Ersätt "Lägg till i varukorgen" med en kontaktlänk

Du kan ersätta knappen Lägg till i varukorgen med en e-postlänk eller ett kontaktformulär. Du kanske till exempel vill ersätta knappen Lägg till i varukorgen för produkter som inte är till salu för tillfället eller för produkter som behöver beställas.

Avsnitt och icke-sektionerade teman

Obs! Stegen i den här handledningen varierar beroende på om du använder ett tema med avsnitt eller ett tema utan avsnitt. Med ett tema med avsnitt kan du dra och släppa för att arrangera layouten på din startsida, men inte med ett tema utan avsnitt.

Gå till temasidan Redigera kod för att ta reda på om ditt tema stöder avsnitt. Om det finns filer i Avsnittskatalogen använder du ett avgränsat tema. Icke-sektionerade teman släpptes före oktober 2016 och har inga filer i Avsnittskatalogen.

Om du använder ett avgränsat tema klickar du på knappen Avgränsade teman-knapp och följer anvisningarna. Om du använder ett äldre, icke-avsnittsbaserat tema klickar du på knappen Icke-avgränsade teman och följer anvisningarna.

Steg för indelade teman

Välj ditt tema

Stegen för denna anpassning varierar beroende på om du använder Narrative-temat eller ett annat gratistema som skapats av Shopify. Klicka på knappen för ditt tema innan du följer anvisningarna nedan:

Steg för icke-indelade teman

Skapa en ny produktmall

För att ersätta knappen Lägg till i varukorgen för en produkt måste du skapa en anpassad produktmall för den produkten.

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Hitta det tema du vill redigera, klicka på knappen för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
  3. Klicka på Lägg till en ny mall i katalogen Mallar.
  4. Skapa produktmallen:
    • Välj produkt i rullgardinsmenyn.
    • Döp din mall till requires-contact.
    • Klicka på Skapa mall.

Dölj knappen Lägg till i varukorgen

  1. I din nya product.requires-contact.liquid-fil ska du leta efter HTML-koden för knappen Lägg till i varukorgen. Du kan söka efter ordet cart.

Koden för knappen Lägg till i varukorg varierar från tema till tema. Leta efter en <input>- eller <button>-tagg med text som Add to cart, AddToCart eller add-to-cart.

För Debut ser koden för knappen Lägg till i varukorgen ut så här:

<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. När du hittar koden ska du slå in den i Liquid-taggarna {% comment %} och {% endcomment %}. Det hindrar koden från att visas i din butik men gör det möjligt för dig att enkelt lägga tillbaka den om du vill ändra din nya mall senare.

För Debut skulle den modifierade koden se ut så här:

{% 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. Klicka på Spara.

Lägg till en e-postlänk eller ett kontaktformulär

Nu när du har dolt knappen Lägg till i varukorgen kan du lägga till det innehåll du vill visa istället.

E-postlänk

  1. På en ny rad under Liquid-taggen {% endcomment %} som du lade till i föregående steg lägger du till HTML-koden för en e-postlänk:
Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.
  1. Klicka på Spara.

Kontaktformulär

Du kan lägga till ett kontaktformulär till din nya produktmall genom att kopiera koden från ditt temas mall för kontaktsida. Så här lägger du till ett kontaktformulär:

  1. Klicka på page.contact.liquidi katalogen Mallar.
  2. Hitta Liquid {% form 'contact' %}-taggen i filen.
  3. Kopiera hela koden från Liquid {% form 'contact' %}-taggen ner till Liquid {% endform %}-taggen. Inkludera Liquid-formulärtaggarna i koden som du kopierar.
  4. Gå tillbaka till din nya product.requires-contact.liquid-fil i katalogen Mallar.
  5. Hitta slut </form>-taggen i filen. På en ny rad under den avslutande </form>-taggen ska du klistra in koden för kontaktformuläret.
  6. Nästa steg är att omsluta den kod som du just klistrade in i HTML div-taggar. Klassattributet som ingår i div-taggkoden ser till att ditt kontaktformulär återges korrekt på sidan.

På en ny rad ovanför {% form 'contact' %} klistrar du in följande kod:

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

På en ny rad ovanför {% endform %} klistrar du in följande kod:

</div>
  1. Klicka på Spara.

Tilldela din nya mall till en produkt

Nu när mallen är klar kan du tilldela den till alla produkter som du vill dölja knappen Lägg till i varukorgen för.

  1. Från din Shopify-admin, gå till produkter.
  2. Klicka på namnet på en produkt som du vill dölja knappen Lägg till i varukorgen på.
  3. På produktsidan i din Shopify-administratör, under Webbutik, väljer du ny mall för kontakt krävs, från rullgardinsmenyn temamall.
  4. Klicka på Spara.

Upprepa dessa steg för varje produkt som du vill lägga till din nya mall för.

Är du redo att börja sälja med Shopify?

Prova gratis