Erstatt «Legg i handlekurv» med en kontaktkobling

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Disse temaene har ikke funksjonene som er inkludert i Shopifys Online Store 2.0-temaer, og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.

Merk

Hvis du bruker et gratis tema fra Shopify, kan det hende du kan kontakte Shopify-brukerstøtte for hjelp med denne veiledningen. Det krever 15 minutters designtid. For å finne ut mer, kan du se _Støtte for temaer–.

Merk

Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.

• Finn ut temaets arkitekturversjon
• Utforsk Online Store 2.0-tematilpasninger

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

Merk

Trinnene i denne opplæringen varierer avhengig av om du bruker et kategorisert eller et ukategorisert tema. Et kategorisert tema lar deg dra og slippe for å sortere layouten på startsiden, noe du ikke kan gjøre med et ukategorisert tema.

For å finne ut om temaet ditt støtter seksjoner kan du gå til temaets Rediger kode-side. Hvis det er filer i Seksjoner-katalogen, bruker du et tema med seksjoner. Temaer uten seksjoner ble utgitt før oktoper 2016 og har ingen filer i Seksjoner-katalogen.

Hvis du bruker et tema med seksjoner, klikker du på Seksjonerte temaer-knappen og følger anvisningene. Hvis du bruker et eldre tema uten seksjoner, klikker du på Ikke-sesksjonerte temaer knappen og følger anvisningen.

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:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. Klikk på Legg til en ny mal i Maler-katalogen.

4. Opprett produktmalen:

   • Velg produkt fra rullegardinmenyen.
   • Gi malen navnet requires-contact.
   • Klikk på Opprett mal.

5. 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.

1. Klikk på Lagre.

Opprett en ny produktseksjon

1. Klikk på Legg til en ny seksjon i Seksjoner-katalogen.

2. Opprett seksjonen:

   1. Gi den nye seksjonen navnet product-template-requires-contact.
   2. Klikk på Opprett seksjon.

3. Slett all standardkoden i seksjonsfilen, slik at filen er tom.

4. I Seksjoner-katalogen klikker du på product-template.liquid. Kopier alt innhold fra filen til utklippstavlen.

5. Gå tilbake til den nye product-template-requires-contact.liquid-seksjonen, og lim inn koden i filen,

6. Klikk på Lagre.

Skjul Legg i handlekurv-knappen

1. Finn HTML-koden for Produktskjema på produktsiden i product-template-requires-contact.liquid-seksjonsfilen. Du finner den ved å søke etter ordet form i filen.

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

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

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

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

1. I Maler -katalogen klikker du på page.contact.liquid.
2. Finn Liquid-taggen {% form 'contact' %} i filen.
3. Kopier all kode fra Liquid {% form 'contact' %}-taggen ned til Liquid {% endform %}-taggen. Inkluder Liquid-skjemataggene i koden du kopierer.
4. 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.

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

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

1. Fra Shopify-administratoren går du til Produkter.

2. Klikk på navnet til et produkt du vil skjule Legg i handlekurv-knappen på.

3. På produktsiden i Shopify-administrator, under Nettbutikk, velger du den nye requires-contact-malen fra rullegardinmenyen Temamal.

4. 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:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. Klikk på Legg til en ny mal i Maler-katalogen.

4. Opprett produktmalen:

   • Velg produkt fra rullegardinmenyen.
   • Gi malen navnet requires-contact.
   • Klikk på Opprett mal.

5. 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.

1. Klikk på Lagre.

Opprett en ny produktseksjon

1. Klikk på Legg til en ny seksjon i Seksjoner-katalogen.

2. Opprett seksjonen:

   1. Gi den nye seksjonen navnet product-template-requires-contact.
   2. Klikk på Opprett seksjon.

3. Slett all standardkoden i seksjonsfilen, slik at filen er tom.

4. I Seksjoner-katalogen klikker du på product-template.liquid. Kopier alt innhold fra filen til utklippstavlen.

5. Gå tilbake til den nye product-template-requires-contact.liquid-seksjonen, og lim inn koden i filen,

6. Klikk på Lagre.

Skjul Legg i handlekurv-knappen

1. 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 ordet cart 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>

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

Advarsel

Pass på at du ikke kommenterer ut <form>-taggene for produktsiden. Kommentar-taggene må ikke omgi noen <form>- eller </form>-tagger, ellers kan kundene oppleve feil når de ser produktsiden.

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

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

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

1. I Maler -katalogen klikker du på page.contact.liquid.
2. Finn Liquid-taggen {% form 'contact' %} i filen.
3. Kopier all kode fra Liquid {% form 'contact' %}-taggen ned til Liquid {% endform %}-taggen. Inkluder Liquid-skjemataggene i koden du kopierer.
4. Gå tilbake til den nye product-template-requires-contact.liquid-filen i Seksjoner-katalogen.
5. Finn den avsluttende </form>-taggen i koden. Lim inn koden for kontaktskjemaet på en ny linje under den avsluttende </form>-taggen.
6. 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>

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

1. Fra Shopify-administratoren går du til Produkter.

2. Klikk på navnet til et produkt du vil skjule Legg i handlekurv-knappen på.

3. På produktsiden i Shopify-administrator, under Nettbutikk, velger du den nye requires-contact-malen fra rullegardinmenyen Temamal.

4. 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:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.
3. Klikk på Legg til en ny mal i Maler-katalogen.
4. Opprett produktmalen:
   • Velg produkt fra rullegardinmenyen.
   • Gi malen navnet requires-contact.
   • Klikk på Opprett mal.

Skjul Legg i handlekurv-knappen

1. Finn HTML-koden for Legg i handlekurv-knappen i den nye product.requires-contact.liquid-filen. Du kan søke etter ordet cart.

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>

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

Advarsel

Pass på at du ikke kommenterer ut <form>-taggene for produktsiden. Kommentar-taggene må ikke omgi noen <form>- eller </form>-tagger, ellers kan kundene oppleve feil når de ser produktsiden.

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

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

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

1. I Maler -katalogen klikker du på page.contact.liquid.
2. Finn Liquid-taggen {% form 'contact' %} i filen.
3. Kopier all kode fra Liquid {% form 'contact' %}-taggen ned til Liquid {% endform %}-taggen. Inkluder Liquid-skjemataggene i koden du kopierer.
4. Gå tilbake til den nye product.requires-contact.liquid-filen i Maler-katalogen.
5. Finn den avsluttende </form>-taggen i koden. Lim inn koden for kontaktskjemaet på en ny linje under den avsluttende </form>-taggen.
6. 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>

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

1. Fra Shopify administrator går du til Produkter.
2. Klikk på navnet til et produkt du vil skjule Legg i handlekurv-knappen på.
3. På produktsiden i Shopify-administrator, under Nettbutikk, velger du den nye requires-contact-malen fra rullegardinmenyen Temamal.
4. Klikk på Lagre.

Gjenta disse trinnene for hvert produkt du vil legge til den nye malen i.