Lisää ostoskoriin ‑painikkeen korvaaminen yhteystietolinkillä

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

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.

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:

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 %}
  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 Adminissa 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.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi