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 bytte ut Legg i handlekurv-knappen med en e-postkobling eller et kontaktskjema. Du ønsker kanskje å bytte ut Legg i handlekurv-knappen for produkter som ikke er for 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.

---

Sectioned themes

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.

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

iPhone

1. Fra Shopify-appen trykker du på Butikk.

2. I Salgskanal-seksjonen trykker du på Nettbutikk.

3. Trykk på Redigere temaer.

4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

Android

1. Fra Shopify-appen trykker du på Butikk.

2. I Salgskanal-seksjonen trykker du på Nettbutikk.

3. Trykk på Redigere temaer.

4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

1. Klikk på Legg til en ny mal i Maler-katalogen.

2. Opprett produktmalen:

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

3. 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 enkelt 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.

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

iPhone

1. Fra Shopify-appen trykker du på Butikk.

2. I Salgskanal-seksjonen trykker du på Nettbutikk.

3. Trykk på Redigere temaer.

4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

Android

1. Fra Shopify-appen trykker du på Butikk.

2. I Salgskanal-seksjonen trykker du på Nettbutikk.

3. Trykk på Redigere temaer.

4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

1. Klikk på Legg til en ny mal i Maler-katalogen.

2. Opprett produktmalen:

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

3. 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-formcart-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 enkelt 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-formcart-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.

Non-sectioned themes

Opprett en ny produktmal

For å bytte ut Legg i handlekurv-knappen for et produkt, må du opprette en egendefinert produktmal for produktet.

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

iPhone

1. Fra Shopify-appen trykker du på Butikk.

2. I Salgskanal-seksjonen trykker du på Nettbutikk.

3. Trykk på Redigere temaer.

4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

Android

1. Fra Shopify-appen trykker du på Butikk.

2. I Salgskanal-seksjonen trykker du på Nettbutikk.

3. Trykk på Redigere temaer.

4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

1. Klikk på Legg til en ny mal i Maler-katalogen.
2. 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 enkelt 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.