Erstatt «Legg i handlekurv» med en kontaktkobling

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Eldre temaer har ikke funksjonene fra 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 du kontakte Shopifys brukerstøtte for å få hjelp med denne veiledningen. Det krever 15 minutter med designtid. Finn ut mer om Shopify Design Policy.

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:

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.