Piilota Lisää ostoskoriin -painikkeet

Voit piilottaa Lisää ostoskoriin ‑painikkeen kauppapaikastasi ja palauttaa sen myöhemmin näkyviin.

Huomio

Tämä on edistyneille käyttäjille tarkoitettu tutoriaali, jota Shopify ei tue. Verkkosuunnittelun kielten, kuten HTML:n, CSS:n, JavaScriptin ja Liquidin, tuntemus on tarpeen. Jos et tunne kykeneväsi käymään läpi seuraavaa tutoriaalia, suosittelemme, että hankit avuksesi Shopify Partnerin.

Huomio

Vanhoja teemoja ei ole saatavilla Theme Storessa. Vanhoissa teemoissa ei ole Shopifyn Online Store 2.0 ‑teemoihin sisältyviä ominaisuuksia, eikä Shopifyn ilmaisiin vanhoihin teemoihin tehdä muita päivityksiä kuin tietoturvakorjauksia.

Huomaa

tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.

• Selvitä teemasi arkkitehtuuriversio
• Tutustu Online Store 2.0:n teemojen mukauttamiseen

Osiin jaetut ja jakamattomat teemat

Huomaa

Tämän tutoriaalin vaiheet poikkeavat toisistaan sen mukaan, käytätkö osioihin jaettua vai osioihin jakamatonta teemaa. Osiin jaetussa teemassa voit käyttää vedä-ja-pudota-toimintoa etusivun pohjan asetteluun, kun taas osiin jakamattomassa teemassa et.

Teeman Muokkaa koodia -sivulla saat selville tukeeko teemasi osioita. Jos Osiot-hakemistossa on tiedostoja, käytössäsi on osioihin jaettu teema. Osioihin jakamattomat teemat on julkaistu ennen lokakuuta 2016, eikä niiden Osiot-hakemistossa ole tiedostoja.

Jos käytät osioihin jaettua teemaa, klikkaa Osioihin jaetut teemat ‑painiketta ja noudata ohjeita. Jos käytät vanhempaa teemaa, jota ei ole jaettu osioihin, klikkaa Osioihin jakamattomat teemat ‑painiketta ja noudata ohjeita.

Sectioned

1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
3. Klikkaa Osat-hakemistossa tiedostoa product-template.liquid avataksesi sen. Etsi Lisää ostoskoriin ‑painikkeen HTML-koodi. Voit hakea aluksi sanaa ostoskori.

Lisää ostoskoriin ‑painikkeen koodi vaihtelee teemasta toiseen. Hae tunnistetta <input> tai <button> esimerkiksi tekstillä Add to cart, AddToCart tai add-to-cart.

Debut-teemassa Lisää ostoskoriin ‑painikkeen koodi näyttää tältä:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Kun löydät koodin, lisää sen ympärille Liquidissä tunnisteet {% comment %} ja {% endcomment %}. Näin koodia ei enää näytetä kaupassasi, mutta voit palauttaa sen helpommin, jos haluat myöhemmin muuttaa uutta malliasi.

Jos käytät yllä olevaa esimerkkiä, uusi koodi näyttää seuraavalta:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Huomio

Varmista, että et kommentoi tuotesivusi <form>-tunnisteita. Kommenttitunnisteiden ympärillä ei tulisi olla mitään <form>- tai </form>-tunnisteita, muuten asiakkaat saattavat kokea virheitä tarkastellessaan tuotesivuasi.

1. Vahvista muutokset valitsemalla Tallenna.

Kun olet taas valmis näyttämään Lisää ostoskoriin ‑painikkeesi, palaa Muokkaa HTML-/CSS-sivulla olevaan product-template.liquid-tiedostoosi, poista tunnisteet {% comment %} ja {% endcomment %} ja valitse sitten Tallenna.

Non-sectioned

1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
3. Klikkaa Mallit-hakemistossa product.liquid-tiedostoa avataksesi sen. Etsi Lisää ostoskoriin ‑painikkeen HTML-koodi. Voit hakea aluksi sanaa ostoskori.

Lisää ostoskoriin ‑painikkeen koodi vaihtelee teemoittain. Hae tunnistetta <input> tai <button> esimerkiksi tekstillä Add to cart, AddToCart tai add-to-cart.

Minimal-teemassa Lisää ostoskoriin ‑painikkeen koodi näyttää tältä:

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

1. Kun löydät koodin, lisää sen ympärille Liquidissä tunnisteet {% comment %} ja {% endcomment %}. Näin koodia ei enää näytetä kaupassasi, mutta voit palauttaa sen helpommin, jos haluat myöhemmin muuttaa uutta malliasi.

Jos käytät yllä olevaa esimerkkiä, uusi koodi näyttää seuraavalta:

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

Huomio

Varmista, että et kommentoi tuotesivusi <form>-tunnisteita. Kommenttitunnisteiden ympärillä ei tulisi olla mitään <form>- tai </form>-tunnisteita, muuten asiakkaat saattavat kokea virheitä tarkastellessaan tuotesivuasi.

1. Vahvista muutokset valitsemalla Tallenna.

Kun olet taas valmis näyttämään Lisää ostoskoriin ‑painikkeesi, palaa Muokkaa HTML-/CSS-sivulla olevaan product.liquid-malliisi, poista tunnisteet {% comment %} ja {% endcomment %} ja valitse Tallenna.