Erstatt «Legg i handlekurv» med en kontaktkobling
Du kan erstatte knappen Legg i handlekurv med en e-postkobling eller et kontaktskjema. Du ønsker for eksempel kanskje å skifte ut knappen Legg i handlekurv for produkter som ikke er på salg for øyeblikket, eller for produkter som lages på bestilling.
Seksjonerte og ikke-seksjonerte temaer
På denne siden
Trinn for kategoriserte temaer
Velg tema
Trinnene for denne tilpasningen varierer avhengig av om du bruker Narrative-temaet eller et annet gratis tema laget av Shopify. Klikk på knappen for temaet ditt før du følger instruksjonene under:
Narrative
Opprett en ny produktmal i Narrative
For å bytte ut Legg i handlekurv-knappen for et produkt, må du opprette en egendefinert produktmal for produktet.
Trinn:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
Klikk på Legg til en ny mal i Maler-katalogen.
-
Opprett produktmalen:
- Velg produkt fra rullegardinmenyen.
- Gi malen navnet
requires-contact
. - Klikk på Opprett mal.
Finn følgende kode:
{% section 'product-template' %}
Erstatt det med:
{% section 'product-template-requires-contact' %}
Denne koden kobler den nye malen med en ny produktseksjon som du vil opprette i de neste trinnene.
- Klikk på Lagre.
Opprett en ny produktseksjon
- Klikk på Legg til en ny seksjon i Seksjoner-katalogen.
-
Opprett seksjonen:
- Gi den nye seksjonen navnet
product-template-requires-contact
. - Klikk på Opprett seksjon.
- Gi den nye seksjonen navnet
Slett all standardkoden i seksjonsfilen, slik at filen er tom.
I Seksjoner-katalogen klikker du på
product-template.liquid
. Kopier alt innhold fra filen til utklippstavlen.Gå tilbake til den nye
product-template-requires-contact.liquid
-seksjonen, og lim inn koden i filen,Klikk på Lagre.
Skjul Legg i handlekurv-knappen
Finn HTML-koden for Produktskjema på produktsiden i
product-template-requires-contact.liquid
-seksjonsfilen. Du finner den ved å søke etter ordetform
i filen.Når du finner koden, pakker du den inn i Liquid-taggene
{% comment %}
og{% endcomment %}
. Dette vil forhindre koden fra å bli vist i butikken, men lar deg enklere legge den tilbake hvis du vil endre den nye malen senere.
For Narrative ser den modifiserte koden slik ut:
{% comment %}
{% include 'product-form' %}
{% endcomment %}
- Klikk på Lagre.
Legg til en e-postkobling eller et kontaktskjema
Nå som du har skjult Legg i handlekurv-knappen, kan du legge til innholdet du vil vise i stedet.
E-postkobling
Du kan legge til en e-postkobling som åpner kundens standardprogram for e-post og angir butikkens kunderettede e-postadresse som mottaker. For å legge til en e-postkobling:
- På en ny linje under Liquid-taggen
{% endcomment %}
som du la til i forrige trinn, legger du til HTML-koden for en e-postkobling:
<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>
- Klikk på Lagre.
Kontaktskjema
Du kan legge til et kontaktskjema i den nye produktmalen ved å kopiere koden fra temaets mal for kontaktsiden. Slik legger du til et kontaktskjema:
- I Maler -katalogen klikker du på
page.contact.liquid
. -
Finn Liquid-taggen
{% form 'contact' %}
i filen. -
Kopier all kode fra Liquid
{% form 'contact' %}
-taggen ned til Liquid{% endform %}
-taggen. Inkluder Liquid-skjemataggene i koden du kopierer. - Gå tilbake til den nye
product.requires-contact.liquid
-filen i Maler-katalogen.
På en ny linje under Liquid-taggen {% endcomment %}
som du la til, limer du inn koden for kontaktskjemaet.
- Det neste trinnet er å pakke inn koden du nettopp limte inn i HTML-div-tagger. Klasseattributten som er inkludert i div-tagg-koden sikrer at kontaktskjemaet vises riktig på siden.
På en ny linje over {% form 'contact' %}
limer du inn følgende kode:
<div class="form-vertical">
På en ny linje under {% endform %}
limer du inn følgende kode:
</div>
- Klikk på Lagre.
Tilordne den nye malen til et produkt
Nå som malen er fullført, kan du tilordne den til alle produktene du ønsker å skjule Legg i handlekurv-knappen fra.
Fra Shopify-administratoren går du til Produkter.
Klikk på navnet til et produkt du vil skjule Legg i handlekurv-knappen på.
På produktsiden i Shopify-administrator, under Nettbutikk, velger du den nye requires-contact-malen fra rullegardinmenyen Temamal.
Klikk på Lagre.
Gjenta disse trinnene for hvert produkt du vil legge til den nye malen i.
Other
Opprett en ny produktmal
For å bytte ut Legg i handlekurv-knappen for et produkt, må du opprette en egendefinert produktmal for produktet.
Trinn:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
Klikk på Legg til en ny mal i Maler-katalogen.
-
Opprett produktmalen:
- Velg produkt fra rullegardinmenyen.
- Gi malen navnet
requires-contact
. - Klikk på Opprett mal.
Finn følgende kode:
{% section 'product-template' %}
Erstatt det med:
{% section 'product-template-requires-contact' %}
Denne koden kobler den nye malen med en ny produktseksjon som du vil opprette i de neste trinnene.
- Klikk på Lagre.
Opprett en ny produktseksjon
- Klikk på Legg til en ny seksjon i Seksjoner-katalogen.
-
Opprett seksjonen:
- Gi den nye seksjonen navnet
product-template-requires-contact
. - Klikk på Opprett seksjon.
- Gi den nye seksjonen navnet
Slett all standardkoden i seksjonsfilen, slik at filen er tom.
I Seksjoner-katalogen klikker du på
product-template.liquid
. Kopier alt innhold fra filen til utklippstavlen.Gå tilbake til den nye
product-template-requires-contact.liquid
-seksjonen, og lim inn koden i filen,Klikk på Lagre.
Skjul Legg i handlekurv-knappen
- I den nye
product-template-requires-contact.liquid
-seksjonsfilen, finn HTML-koden for Legg i handlekurv-knappen på produktsiden. Du finner den ved å søke etter ordetcart
i filen.
Koden for Legg i handlekurv-knappen varierer fra tema til tema. Se etter en <input>
- eller <button>
-tagg med tekst som Add to cart
, AddToCart
eller add-to-cart
.
For Debut ser koden for Legg i handlekurv-knappen slik ut:
<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>
- Når du finner koden, pakker du den inn i Liquid-taggene
{% comment %}
og{% endcomment %}
. Dette vil forhindre koden fra å bli vist i butikken, men lar deg enklere legge den tilbake hvis du vil endre den nye malen senere.
I Debut vil den modifiserte koden se slik ut:
{% 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 %}
- Klikk på Lagre.
Legg til en e-postkobling eller et kontaktskjema
Nå som du har skjult Legg i handlekurv-knappen, kan du legge til innholdet du vil vise i stedet.
E-postkobling
Du kan legge til en e-postkobling som åpner kundens standardprogram for e-post og angir butikkens kunderettede e-postadresse som mottaker. For å legge til en e-postkobling:
- På en ny linje under Liquid-taggen
{% endcomment %}
som du la til i forrige trinn, legger du til HTML-koden for en e-postkobling:
<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>
- Klikk på Lagre.
Kontaktskjema
Du kan legge til et kontaktskjema i den nye produktmalen ved å kopiere koden fra temaets mal for kontaktsiden. Slik legger du til et kontaktskjema:
- I Maler -katalogen klikker du på
page.contact.liquid
. -
Finn Liquid-taggen
{% form 'contact' %}
i filen. -
Kopier all kode fra Liquid
{% form 'contact' %}
-taggen ned til Liquid{% endform %}
-taggen. Inkluder Liquid-skjemataggene i koden du kopierer. - Gå tilbake til den nye
product-template-requires-contact.liquid
-filen i Seksjoner-katalogen. -
Finn den avsluttende
</form>
-taggen i koden. Lim inn koden for kontaktskjemaet på en ny linje under den avsluttende</form>
-taggen. - Det neste trinnet er å pakke inn koden du nettopp limte inn i HTML-div-tagger. Klasseattributten som er inkludert i div-tagg-koden sikrer at kontaktskjemaet vises riktig på siden.
På en ny linje over {% form 'contact' %}
limer du inn følgende kode:
<div class="form-vertical"></div>
På en ny linje under {% endform %}
limer du inn følgende kode:
</div>
- Klikk på Lagre.
Tilordne den nye malen til et produkt
Nå som malen er fullført, kan du tilordne den til alle produktene du ønsker å skjule Legg i handlekurv-knappen fra.
Fra Shopify-administratoren går du til Produkter.
Klikk på navnet til et produkt du vil skjule Legg i handlekurv-knappen på.
På produktsiden i Shopify-administrator, under Nettbutikk, velger du den nye requires-contact-malen fra rullegardinmenyen Temamal.
Klikk på Lagre.
Gjenta disse trinnene for hvert produkt du vil legge til den nye malen i.
Trinn for ukategoriserte temaer
Opprett en ny produktmal
For å bytte ut Legg i handlekurv-knappen for et produkt, må du opprette en egendefinert produktmal for produktet.
Trinn:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
Klikk på Legg til en ny mal i Maler-katalogen.
-
Opprett produktmalen:
- Velg produkt fra rullegardinmenyen.
- Gi malen navnet
requires-contact
. - Klikk på Opprett mal.
Skjul Legg i handlekurv-knappen
-
Finn HTML-koden for Legg i handlekurv-knappen i den nye
product.requires-contact.liquid
-filen. Du kan søke etter ordetcart
.
Koden for Legg i handlekurv-knappen varierer fra tema til tema. Se etter en <input>
- eller <button>
-tagg med tekst som Add to cart
, AddToCart
eller add-to-cart
.
For Debut ser koden for Legg i handlekurv-knappen slik ut:
<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>
- Når du finner koden, pakker du den inn i Liquid-taggene
{% comment %}
og{% endcomment %}
. Dette vil forhindre koden fra å bli vist i butikken, men lar deg enklere legge den tilbake hvis du vil endre den nye malen senere.
I Debut vil den modifiserte koden se slik ut:
{% 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 %}
- Klikk på Lagre.
Legg til en e-postkobling eller et kontaktskjema
Nå som du har skjult Legg i handlekurv-knappen, kan du legge til innholdet du vil vise i stedet.
E-postkobling
- På en ny linje under Liquid-taggen
{% endcomment %}
som du la til i forrige trinn, legger du til HTML-koden for en e-postkobling:
Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.
- Klikk på Lagre.
Kontaktskjema
Du kan legge til et kontaktskjema i den nye produktmalen ved å kopiere koden fra temaets mal for kontaktsiden. Slik legger du til et kontaktskjema:
- I Maler -katalogen klikker du på
page.contact.liquid
. -
Finn Liquid-taggen
{% form 'contact' %}
i filen. -
Kopier all kode fra Liquid
{% form 'contact' %}
-taggen ned til Liquid{% endform %}
-taggen. Inkluder Liquid-skjemataggene i koden du kopierer. - Gå tilbake til den nye
product.requires-contact.liquid
-filen i Maler-katalogen. -
Finn den avsluttende
</form>
-taggen i koden. Lim inn koden for kontaktskjemaet på en ny linje under den avsluttende</form>
-taggen. - Det neste trinnet er å pakke inn koden du nettopp limte inn i HTML-div-tagger. Klasseattributten som er inkludert i div-tagg-koden sikrer at kontaktskjemaet vises riktig på siden.
På en ny linje over {% form 'contact' %}
limer du inn følgende kode:
<div class="form-vertical"></div>
På en ny linje under {% endform %}
limer du inn følgende kode:
</div>
- Klikk på Lagre.
Tilordne den nye malen til et produkt
Nå som malen er fullført, kan du tilordne den til alle produktene du ønsker å skjule Legg i handlekurv-knappen fra.
Fra Shopify-administratoren går du til Produkter.
Klikk på navnet til et produkt du vil skjule Legg i handlekurv-knappen på.
På produktsiden i Shopify-administrator, under Nettbutikk, velger du den nye requires-contact-malen fra rullegardinmenyen Temamal.
Klikk på Lagre.
Gjenta disse trinnene for hvert produkt du vil legge til den nye malen i.