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:

Narrative

Skapa en ny produktmall i Narrative

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.
  5. Hitta följande kod:

{% section 'product-template' %}

Ersätt den med:

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

Denna kod länkar din nya mall till ett nytt produktavsnitt som du kommer att skapa i nästa steg.

  1. Klicka på Spara.

Skapa ett nytt produktavsnitt

  1. I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
  2. Skapa avsnittet:

    1. Döp ditt nya avsnitt till product-template-requires-contact.
    2. Klicka på Skapa avsnitt.
  3. Radera all standardkod i avsnittsfilen, så att filen är tom.

  4. Klicka på product-template.liquid i katalogen Avsnitt. Kopiera allt innehåll i filen till ditt urklipp.

  5. Återgå till ditt nya product-template-requires-contact.liquid-avsnitt och klistra in koden i filen.

  6. Klicka på Spara.

Dölj knappen Lägg till i varukorgen

  1. I din avsnittsfil product-template-requires-contact.liquid ska du leta efter HTML-koden för Produktformuläret på din produktsida. Du kan hitta den genom att söka efter ordet form i filen.

  2. 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 Narrative skulle den modifierade koden se ut så här:

{% comment %}
{% include 'product-form' %}
{% 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

Du kan lägga till en e-postlänk som öppnar kundens standardprogram för e-post och anger den e-postadress som visas för kunder i din butik som mottagare. Så här lägger du till en 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:
<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>
  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.

På en ny rad under den Liquid {% endcomment %}-tagg som du lade till ska du klistra in koden för kontaktformuläret.

  1. 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">

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. Gå till Produkter i din Shopify-administratör.

  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 en ny mall för requires-contact 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.

Other

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.
  5. Hitta följande kod:

{% section 'product-template' %}

Ersätt den med:

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

Denna kod länkar din nya mall till ett nytt produktavsnitt som du kommer att skapa i nästa steg.

  1. Klicka på Spara.

Skapa ett nytt produktavsnitt

  1. I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
  2. Skapa avsnittet:

    1. Döp ditt nya avsnitt till product-template-requires-contact.
    2. Klicka på Skapa avsnitt.
  3. Radera all standardkod i avsnittsfilen, så att filen är tom.

  4. Klicka på product-template.liquid i katalogen Avsnitt. Kopiera allt innehåll i filen till ditt urklipp.

  5. Återgå till ditt nya product-template-requires-contact.liquid-avsnitt och klistra in koden i filen.

  6. Klicka på Spara.

Dölj knappen Lägg till i varukorgen

  1. I din nya avsnittsfil product-template-requires-contact.liquid ska du leta upp HTML-koden för knappen Lägg till i varukorg på din produktsida. Du kan hitta den genom att söka efter ordet cart i filen.

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

Du kan lägga till en e-postlänk som öppnar kundens standardprogram för e-post och anger den e-postadress som visas för kunder i din butik som mottagare. Så här lägger du till en 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:
<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>
  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. Återgå till din nya product-template-requires-contact.liquid-fil i katalogen Avsnitt.
  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. Gå till Produkter i din Shopify-administratör.

  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.

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. Gå till Produkter i din Shopify-administratör.

  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.

Hittar du inte de svar du letar efter? Vi finns här för att hjälpa till!