Piilota Lisää ostoskoriin -painikkeet

Huomaa

Jos käytät Shopifyn ilmaista teemaa, voit ottaa yhteyttä Shopify-tukeen tutoriaaliin liittyvissä asioissa. Tähän tarvitaan 15 minuuttia suunnitteluaikaa. Lisätietoja on kohdassa Teemojen tuki.

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

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

Huomautus: Tämä mukautus ei ole yhteensopiva dynaamisten kassapainikkeiden kanssa. Jos teemasi tukee dynaamista kassaa, voit estää painikkeiden näyttämisen noudattamalla vaiheita, joilla voit piilottaa dynaamiset kassapainikkeet tuotesivuilta.

Osiin jaetut ja jakamattomat teemat

Huomautus: Tämän tutoriaalin vaiheet vaihtelevat sen mukaan, käytätkö osiin jaettua vai osiin jakamatonta teemaa. Osiin jaetussa teemassa etusivun asettelua voi järjestää vetämällä ja pudottamalla elementtejä, osiin jakamattomassa teemassa ei.

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 themes

Tietokone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

Android

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

1. 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 koodin näyttäminen kaupassasi lakkaa, mutta voit palauttaa sen helposti, 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 Tallenna.

Non-sectioned themes

Tietokone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

Android

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

1. Klikkaa Mallit-hakemistossa product.liquid-tiedostoa 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.

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 koodin näyttäminen kaupassasi lakkaa, mutta voit palauttaa sen helposti, 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.