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.
På den här sidan
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:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på Lägg till en ny mall i katalogen Mallar.
-
Skapa produktmallen:
- Välj produkt i rullgardinsmenyn.
- Döp din mall till
requires-contact
. - Klicka på Skapa mall.
Hitta följande kod:
Ersätt den med:
Denna kod länkar din nya mall till ett nytt produktavsnitt som du kommer att skapa i nästa steg.
- Klicka på Spara.
Skapa ett nytt produktavsnitt
- I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
-
Skapa avsnittet:
- Döp ditt nya avsnitt till
product-template-requires-contact
. - Klicka på Skapa avsnitt.
- Döp ditt nya avsnitt till
Radera all standardkod i avsnittsfilen, så att filen är tom.
Klicka på
product-template.liquid
i katalogen Avsnitt. Kopiera allt innehåll i filen till ditt urklipp.Återgå till ditt nya
product-template-requires-contact.liquid
-avsnitt och klistra in koden i filen.Klicka på Spara.
Dölj knappen Lägg till i varukorgen
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 ordetform
i filen.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:
- 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:
- 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:
- 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:
- Klicka på
page.contact.liquid
i katalogen Mallar. -
Hitta Liquid
{% form 'contact' %}
-taggen i filen. -
Kopiera hela koden från Liquid
{% form 'contact' %}
-taggen ner till Liquid{% endform %}
-taggen. Inkludera Liquid-formulärtaggarna i koden som du kopierar. - 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.
- 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:
På en ny rad ovanför {% endform %}
klistrar du in följande kod:
- 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.
Gå till Produkter i din Shopify-administratör.
Klicka på namnet på en produkt som du vill dölja knappen Lägg till i varukorgen på.
På produktsidan i din Shopify-administratör, under Webbutik, väljer du en ny mall för requires-contact från rullgardinsmenyn Temamall.
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:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på Lägg till en ny mall i katalogen Mallar.
-
Skapa produktmallen:
- Välj produkt i rullgardinsmenyn.
- Döp din mall till
requires-contact
. - Klicka på Skapa mall.
Hitta följande kod:
Ersätt den med:
Denna kod länkar din nya mall till ett nytt produktavsnitt som du kommer att skapa i nästa steg.
- Klicka på Spara.
Skapa ett nytt produktavsnitt
- I katalogen Avsnitt klickar du på Lägg till ett nytt avsnitt.
-
Skapa avsnittet:
- Döp ditt nya avsnitt till
product-template-requires-contact
. - Klicka på Skapa avsnitt.
- Döp ditt nya avsnitt till
Radera all standardkod i avsnittsfilen, så att filen är tom.
Klicka på
product-template.liquid
i katalogen Avsnitt. Kopiera allt innehåll i filen till ditt urklipp.Återgå till ditt nya
product-template-requires-contact.liquid
-avsnitt och klistra in koden i filen.Klicka på Spara.
Dölj knappen Lägg till i varukorgen
- 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 ordetcart
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:
- 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:
- 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:
- 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:
- 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:
- Klicka på
page.contact.liquid
i katalogen Mallar. -
Hitta Liquid
{% form 'contact' %}
-taggen i filen. -
Kopiera hela koden från Liquid
{% form 'contact' %}
-taggen ner till Liquid{% endform %}
-taggen. Inkludera Liquid-formulärtaggarna i koden som du kopierar. - Återgå till din nya
product-template-requires-contact.liquid
-fil i katalogen Avsnitt. -
Hitta slut
</form>
-taggen i filen. På en ny rad under den avslutande</form>
-taggen ska du klistra in koden för kontaktformuläret. - 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:
På en ny rad ovanför {% endform %}
klistrar du in följande kod:
- 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.
Gå till Produkter i din Shopify-administratör.
Klicka på namnet på en produkt som du vill dölja knappen Lägg till i varukorgen på.
På produktsidan i din Shopify-administratör, under Webbutik, väljer du ny mall för kontakt kr ävs, från rullgardinsmenyn temamall.
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:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på Lägg till en ny mall i katalogen Mallar.
-
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
- 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 ordetcart
.
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:
- 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:
- 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
- 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:
- 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:
- Klicka på
page.contact.liquid
i katalogen Mallar. -
Hitta Liquid
{% form 'contact' %}
-taggen i filen. -
Kopiera hela koden från Liquid
{% form 'contact' %}
-taggen ner till Liquid{% endform %}
-taggen. Inkludera Liquid-formulärtaggarna i koden som du kopierar. - Gå tillbaka till din nya
product.requires-contact.liquid
-fil i katalogen Mallar. -
Hitta slut
</form>
-taggen i filen. På en ny rad under den avslutande</form>
-taggen ska du klistra in koden för kontaktformuläret. - 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:
På en ny rad ovanför {% endform %}
klistrar du in följande kod:
- 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.
Gå till Produkter i din Shopify-administratör.
Klicka på namnet på en produkt som du vill dölja knappen Lägg till i varukorgen på.
På produktsidan i din Shopify-administratör, under Webbutik, väljer du ny mall för kontakt krävs, från rullgardinsmenyn temamall.
Klicka på Spara.
Upprepa dessa steg för varje produkt som du vill lägga till din nya mall för.