Erstat “Læg i indkøbskurv” med et kontaktlink

Du kan erstatte knappen Læg i indkøbskurv med et maillink eller en kontaktformular. Dette kan f.eks. være, hvis du vil erstatte knappen Læg i indkøbskurv for produkter, der ikke er til salg i øjeblikket, eller for produkter, der fremstilles ved bestilling.

Temaer med og uden sektioner

Bemærk: Trinnene i denne vejledning er forskellige, afhængigt af om du bruger et tema med sektioner eller uden sektioner. Med et tema med sektioner kan du trække og slippe for at arrangere startsidens layout – det kan du ikke med et tema uden sektioner.

Du kan finde ud af, om dit tema understøtter sektioner, ved at gå til temaets side Rediger kode. Hvis der er filer i mappen Sektioner, bruger du et tema med sektioner. Temaer uden sektioner blev udgivet før oktober 2016 og har ikke filer i mappen Sektioner.

Hvis du bruger et tema med afsnit, skal du klikke på knappen Temaer med afsnit og følge instruktionerne. Hvis du bruger et ældre tema uden afsnit, skal du klikke på knappen Temaer uden afsnit og følge instruktionerne.

Trin for temaer med afsnit

Vælg dit tema

Trinnene til denne tilpasning varierer afhængigt af, om du bruger Narrative-temaet eller et andet gratis tema udviklet af Shopify. Klik på knappen for dit tema, inden du følger vejledningen nedenfor:

Trin for temaer uden sektioner

Opret en ny produktskabelon

Hvis du vil erstatte knappen Læg i indkøbskurv for et produkt, skal du oprette en tilpasset produktskabelon for dette produkt.

Trin:

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik på knappen for at åbne handlingsmenuen. Klik derefter på Rediger kode.
  3. Klik på Tilføj en ny skabelon i mappen Skabeloner.
  4. Opret produktskabelon:
    • Vælg Produkt i rullemenuen.
    • Navngiv din skabelon requires-contact.
    • Klik på Opret skabelon.

Skjul knappen Læg i indkøbskurv

  1. I din nye product.requires-contact.liquid-fil skal du finde HTML-koden for knappen Læg i indkøbskurv. Du kan søge efter ordet cart.

Koden for knappen Læg i indkøbskurv varierer fra tema til tema. Led efter et <input>- eller <button>-tag med tekst som Add to cart, AddToCart eller add-to-cart.

For Debut ser koden Læg i indkøbskurv således ud:

<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 finder koden, skal du indlejre den mellem Liquid {% comment %}- og {% endcomment %}-tagget. Dette medfører, at koden ikke mere bliver vist i din butik, men du kan nemmere indsætte den igen, hvis du senere vil ændre din nye skabelon.

For Debut ser den ændrede kode sådan ud:

{% 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 %}
  1. Klik på Gem.

Tilføj et maillink eller en kontaktformular

Nu, hvor du har skjult knappen Læg i indkøbskurv, kan du tilføje det indhold, du vil vise i stedet.

  1. Tilføj HTML-koden for et maillink på en ny linje under det Liquid {% endcomment %}-tag, som du tilføjede i det forrige trin:
Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.
  1. Klik på Gem.

Kontaktformular

Du kan føje en kontaktformular til din nye produktskabelon ved at kopiere koden fra dit temas kontaktsideskabelon. Sådan tilføjer du en kontaktformular:

  1. Klik på page.contact.liquid i mappen Skabeloner.
  2. Find Liquid {% form 'contact' %}-tagget i filen.
  3. Kopiér hele koden fra Liquid {% form 'contact' %}-tagget til {% endform %}-tagget. Medtag de Liquid-formaterede tags i den kode, du kopierer.
  4. Vend tilbage til din nye product.requires-contact.liquid-fil i mappen Skabeloner.
  5. Find det afsluttende </form>-tag i filen. Indsæt koden for kontaktformularen på en ny linje under det afsluttende </form>-tag.
  6. I næste trin skal du indlejre den kode, som du lige har indsat i dine HTML div-tags. Klasseattributten, der er inkluderet i koden for div-tagget, sikrer, at din kontaktformular gengives korrekt på siden.

Indsæt følgende kode på en ny linje over {% form 'contact' %}:

<div class="form-vertical"></div>

Indsæt følgende kode på en ny linje under {% endform %}:

</div>
  1. Klik på Gem.

Tildel den nye skabelon til et produkt

Nu, hvor skabelonen er færdig, kan du tildele den til alle de produkter, hvor du vil skjule knappen Læg i indkøbskurv.

  1. Gå til Produkter i din Shopify-administrator.
  2. Klik på navnet på det produkt, hvor du vil skjule knappen Læg i indkøbskurv.
  3. Vælg den nye skabelon requires-contact i rullemenuen Temaskabelon under Webshop på produktsiden i din Shopify-administrator.
  4. Klik på Gem.

Gentag disse trin for alle de produkter, du vil føje til din nye skabelon.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis