Lisää ostoskoriin ‑painikkeen korvaaminen yhteystietolinkillä

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

Jos käytät Shopifyn ilmaista teemaa, voit ottaa yhteyttä Shopify-tukeen saadaksesi tähän tutoriaaliin liittyvää tukea. Tarvitset 15 minuuttia suunnitteluaikaa. Lue lisää Shopifyn suunnittelukäytännöstä.

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 korvata Lisää ostoskoriin -painikkeen sähköpostilinkillä tai yhteydenottolomakkeella. Voit esimerkiksi haluta korvata Lisää ostoskoriin -painikkeen tilaustuotteiden kohdalla ja niiden tuotteiden kohdalla, joita ei tällä hetkellä ole myynnissä.

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.

Osiin jaettujen teemojen ohjeet

Valitse teema

Tämän mukautuksen toimintavaiheet vaihtelevat sen mukaan, käytätkö Narrative-teemaa vai jotakin muuta Shopifyn kehittämää ilmaisteemaa. Klikkaa teeman painiketta ennen kuin noudatat seuraavia ohjeita:

Narrative

Uuden tuotemallin luominen Narrative-teemassa

Jos haluat korvata tuotteen Lisää ostoskoriin ‑painikkeen, sinun on luotava kyseiselle tuotteelle mukautettu tuotemalli.

Vaiheet:

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 kohtaa Lisää uusi malli.

4. Luo tuotemalli:

   • Valitse pudotusvalikosta tuote.
   • Anna mallillesi nimeksi requires-contact.
   • Klikkaa Luo malli.

5. Etsi seuraava koodi:

{% section 'product-template' %}

Korvaa se tällä:

{% section 'product-template-requires-contact' %}

Tämä koodi linkittää uuden mallisi uuteen tuoteosioon, jonka luot seuraavissa vaiheissa.

1. Klikkaa Tallenna.

Uuden tuoteosion luominen

1. Klikkaa Osat-hakemistossa kohtaa Lisää uusi osa.

2. Luo osio:

   1. Anna uudelle osiollesi nimeksi product-template-requires-contact.
   2. Valitse Luo osio.

3. Poista koko osiotiedoston oletuskoodi, jotta tiedosto on tyhjä.

4. Klikkaa Osat-hakemistossa kohtaa product-template.liquid. Kopioi kaikki tiedoston sisältö leikepöydälle.

5. Palaa uuteen product-template-requires-contact.liquid-osioosi ja liitä koodi tiedostoon.

6. Klikkaa Tallenna.

Lisää ostoskoriin ‑painikkeen piilottaminen

1. Etsi product-template-requires-contact.liquid-osiotiedostostasi tuotesivusi tuotelomakkeen HTML-koodi. Löydät sen hakemalla tiedostosta sanaa form.

2. 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 helpommin, jos haluat myöhemmin muuttaa uutta malliasi.

Narrative-teemassa muokattu koodi näyttää tältä:

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. Klikkaa Tallenna.

Sähköpostilinkin tai yhteydenottolomakkeen lisääminen

Nyt kun olet piilottanut Lisää ostoskoriin ‑painikkeen, voit lisätä sen sijasta näytettävän sisällön.

Sähköpostilinkki

Voit lisätä sähköpostilinkin, joka avaa asiakkaan oletussähköpostiohjelman ja syöttää vastaanottajaksi kauppasi asiakasviestintään tarkoitetun sähköpostiosoitteen. Näin lisäät sähköpostilinkin:

1. Lisää sähköpostilinkin HTML-koodi viimeisessä vaiheessa lisäämäsi Liquid-tunnisteen {% endcomment %} alla olevalle riville.

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Klikkaa Tallenna.

Yhteydenottolomake

Voit lisätä uuteen tuotemalliisi yhteydenottolomakkeen kopioimalla koodin teemasi yhteystietojen sivumallista. Näin lisäät yhteydenottolomakkeen:

1. klikkaa Mallit-hakemistossa page.contact.liquid.
2. Etsi tiedostosta {% form 'contact' %}-Liquid-tunniste.
3. Kopioi koko {% form 'contact' %}-Liquid-tunnisteen koodi {% endform %}-Liquid-tunnisteeseen. Sisällytä Liquid-lomaketunnisteet kopioimaasi koodiin.
4. Palaa Mallit-hakemistossa olevaan uuteen tiedostoosi product.requires-contact.liquid.

Liitä yhteydenottolomakkeen koodi lisäämäsi {% endcomment %}-Liquid-tunnisteen alapuolelle uudelle riville.

1. Seuraava vaihe on lisätä juuri liittämäsi koodin ympärille HTML div ‑tunnisteet. Div-tunnistekoodiin sisältyvä luokkamäärite varmistaa, että yhteydenottolomake näkyy sivulla oikein.

Liitä seuraava koodi uudelle riville koodin {% form 'contact' %} ylle:

<div class="form-vertical">

Liitä seuraava koodi uudelle riville koodin {% endform %} alle:

</div>

1. Klikkaa Tallenna.

Uuden mallin liittäminen tuotteeseen

Nyt kun malli on valmis, voit määrittää sen kaikille tuotteille, joiden Lisää ostoskoriin ‑painikkeen haluat piilottaa.

1. Siirry Shopify-ylläpitäjästä kohtaan Tuotteet.

2. Klikkaa sen tuotteen nimeä, jonka Lisää ostoskoriin ‑painikkeen haluat piilottaa.

3. Valitse Shopify Adminisi tuotesivulla Verkkokauppa-kohdan alta uusi requires-contact-mallisi Teemamalli-pudotusvalikosta.

4. Klikkaa Tallenna.

Toista nämä vaiheet kunkin tuotteen osalta, jolle haluat lisätä uuden mallin.

Other

Uuden tuotemallin luominen

Jos haluat korvata tuotteen Lisää ostoskoriin ‑painikkeen, sinun on luotava kyseiselle tuotteelle mukautettu tuotemalli.

Vaiheet:

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 kohtaa Lisää uusi malli.

4. Luo tuotemalli:

   • Valitse pudotusvalikosta tuote.
   • Anna mallillesi nimeksi requires-contact.
   • Klikkaa Luo malli.

5. Etsi seuraava koodi:

{% section 'product-template' %}

Korvaa se tällä:

{% section 'product-template-requires-contact' %}

Tämä koodi linkittää uuden mallisi uuteen tuoteosioon, jonka luot seuraavissa vaiheissa.

1. Klikkaa Tallenna.

Uuden tuoteosion luominen

1. Klikkaa Osat-hakemistossa kohtaa Lisää uusi osa.

2. Luo osio:

   1. Anna uudelle osiollesi nimeksi product-template-requires-contact.
   2. Valitse Luo osio.

3. Poista koko osiotiedoston oletuskoodi, jotta tiedosto on tyhjä.

4. Klikkaa Osat-hakemistossa kohtaa product-template.liquid. Kopioi kaikki tiedoston sisältö leikepöydälle.

5. Palaa uuteen product-template-requires-contact.liquid-osioosi ja liitä koodi tiedostoon.

6. Klikkaa Tallenna.

Lisää ostoskoriin ‑painikkeen piilottaminen

1. Etsi uudessa osatiedostossasi product-template-requires-contact.liquid HTML-koodi tuotesivusi Lisää ostoskoriin ‑painikkeelle. Löydät sen hakemalla tiedostosta sanaa cart.

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 helpommin, jos haluat myöhemmin muuttaa uutta malliasi.

Debut-teeman osalta muokattu koodi näyttää tältä:

{% 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. Varmista, että kommenttitunnisteiden ympärillä ei ole mitään <form>- tai </form>-tunnisteita, muuten asiakkaat saattavat kokea virheitä tarkastellessaan tuotesivuasi.

1. Klikkaa Tallenna.

Sähköpostilinkin tai yhteydenottolomakkeen lisääminen

Nyt kun olet piilottanut Lisää ostoskoriin ‑painikkeen, voit lisätä sen sijasta näytettävän sisällön.

Sähköpostilinkki

Voit lisätä sähköpostilinkin, joka avaa asiakkaan oletussähköpostiohjelman ja syöttää vastaanottajaksi kauppasi asiakasviestintään tarkoitetun sähköpostiosoitteen. Näin lisäät sähköpostilinkin:

1. Lisää sähköpostilinkin HTML-koodi viimeisessä vaiheessa lisäämäsi Liquid-tunnisteen {% endcomment %} alla olevalle riville.

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Klikkaa Tallenna.

Yhteydenottolomake

Voit lisätä uuteen tuotemalliisi yhteydenottolomakkeen kopioimalla koodin teemasi yhteystietojen sivumallista. Näin lisäät yhteydenottolomakkeen:

1. klikkaa Mallit-hakemistossa page.contact.liquid.
2. Etsi tiedostosta {% form 'contact' %}-Liquid-tunniste.
3. Kopioi koko {% form 'contact' %}-Liquid-tunnisteen koodi {% endform %}-Liquid-tunnisteeseen. Sisällytä Liquid-lomaketunnisteet kopioimaasi koodiin.
4. Palaa Osiot-hakemistossa uuteen product-template-requires-contact.liquid-tiedostoosi.
5. Etsi tämän elementin lopputunniste </form>. Liitä yhteydenottolomakkeen koodi lisäämäsi </form>-Liquid-tunnisteen alapuolelle uudelle riville.
6. Seuraava vaihe on lisätä juuri liittämäsi koodin ympärille HTML div ‑tunnisteet. Div-tunnistekoodiin sisältyvä luokkamäärite varmistaa, että yhteydenottolomake näkyy sivulla oikein.

Liitä seuraava koodi uudelle riville koodin {% form 'contact' %} ylle:

<div class="form-vertical"></div>

Liitä seuraava koodi uudelle riville koodin {% endform %} alle:

</div>

1. Klikkaa Tallenna.

Uuden mallin liittäminen tuotteeseen

Nyt kun malli on valmis, voit määrittää sen kaikille tuotteille, joiden Lisää ostoskoriin ‑painikkeen haluat piilottaa.

1. Siirry Shopify-ylläpitäjästä kohtaan Tuotteet.

2. Klikkaa sen tuotteen nimeä, jonka Lisää ostoskoriin ‑painikkeen haluat piilottaa.

3. Valitse Shopify Adminisi tuotesivulla Verkkokauppa-kohdan alta uusi requires-contact-mallisi Teeman malli ‑pudotusvalikosta.

4. Klikkaa Tallenna.

Toista nämä vaiheet kunkin tuotteen osalta, jolle haluat lisätä uuden mallin.

Osiin jakamattomien teemojen ohjeet

Uuden tuotemallin luominen

Jos haluat korvata tuotteen Lisää ostoskoriin ‑painikkeen, sinun on luotava kyseiselle tuotteelle mukautettu tuotemalli.

Vaiheet:

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 kohtaa Lisää uusi malli.

4. Luo tuotemalli:

   • Valitse pudotusvalikosta tuote.
   • Anna mallillesi nimeksi requires-contact.
   • Klikkaa Luo malli.

Lisää ostoskoriin ‑painikkeen piilottaminen

1. Etsi uudessa osatiedostossasi product.requires-contact.liquid HTML-koodi tuotesivusi Lisää ostoskoriin ‑painikkeelle. Voit hakea aluksi sanaa cartostoskori.

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 helpommin, jos haluat myöhemmin muuttaa uutta malliasi.

Debut-teeman osalta muokattu koodi näyttää tältä:

{% 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. Varmista, että kommenttitunnisteiden ympärillä ei ole mitään <form>- tai </form>-tunnisteita, muuten asiakkaat saattavat kokea virheitä tarkastellessaan tuotesivuasi.

1. Klikkaa Tallenna.

Sähköpostilinkin tai yhteydenottolomakkeen lisääminen

Nyt kun olet piilottanut Lisää ostoskoriin ‑painikkeen, voit lisätä sen sijasta näytettävän sisällön.

Sähköpostilinkki

1. Lisää sähköpostilinkin HTML-koodi viimeisessä vaiheessa lisäämäsi Liquid-tunnisteen {% endcomment %} alla olevalle riville.

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

1. Klikkaa Tallenna.

Yhteydenottolomake

Voit lisätä uuteen tuotemalliisi yhteydenottolomakkeen kopioimalla koodin teemasi yhteystietojen sivumallista. Näin lisäät yhteydenottolomakkeen:

1. klikkaa Mallit-hakemistossa page.contact.liquid.
2. Etsi tiedostosta {% form 'contact' %}-Liquid-tunniste.
3. Kopioi koko {% form 'contact' %}-Liquid-tunnisteen koodi {% endform %}-Liquid-tunnisteeseen. Sisällytä Liquid-lomaketunnisteet kopioimaasi koodiin.
4. Palaa Mallit-hakemistossa olevaan uuteen tiedostoosi product.requires-contact.liquid.
5. Etsi tämän elementin lopputunniste </form>. Liitä yhteydenottolomakkeen koodi lisäämäsi </form>-Liquid-tunnisteen alapuolelle uudelle riville.
6. Seuraava vaihe on lisätä juuri liittämäsi koodin ympärille HTML div ‑tunnisteet. Div-tunnistekoodiin sisältyvä luokkamäärite varmistaa, että yhteydenottolomake näkyy sivulla oikein.

Liitä seuraava koodi uudelle riville koodin {% form 'contact' %} ylle:

<div class="form-vertical"></div>

Liitä seuraava koodi uudelle riville koodin {% endform %} alle:

</div>

1. Klikkaa Tallenna.

Uuden mallin liittäminen tuotteeseen

Nyt kun malli on valmis, voit määrittää sen kaikille tuotteille, joiden Lisää ostoskoriin ‑painikkeen haluat piilottaa.

1. Siirry Shopify-ylläpitäjästä kohtaan Tuotteet.

2. Klikkaa sen tuotteen nimeä, jonka Lisää ostoskoriin ‑painikkeen haluat piilottaa.

3. Valitse Shopify Adminisi tuotesivulla Verkkokauppa-kohdan alta uusi requires-contact-mallisi Teeman malli ‑pudotusvalikosta.

4. Klikkaa Tallenna.

Toista nämä vaiheet kunkin tuotteen osalta, jolle haluat lisätä uuden mallin.