Vervang 'Aan winkelwagen toevoegen' met een contactlink

Je kunt de knop Aan winkelwagen toevoegen vervangen door een e-maillink of een contactformulier. Je kunt bijvoorbeeld de knop Aan winkelwagen toevoegen vervangen voor producten die momenteel niet te koop zijn of voor producten die zijn gemaakt om te bestellen.

Thema's met en zonder secties

Stappen voor thema's met secties

Je thema selecteren

De stappen voor deze aanpassing variëren naargelang je het thema Narrative gebruikt of een ander gratis thema dat door Shopify is gemaakt. Klik op de knop voor je thema voordat je de onderstaande instructies volgt:

Stappen voor thema's zonder secties

Een nieuw producttemplate maken

Om de knop Toevoegen aan winkelwagen voor een product te vervangen, moet je een aangepast producttemplate voor dat product aanmaken.

Stappen:

  1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. In het menu Templates, klik op Voeg een nieuw template toe.
  4. Maak het producttemplate aan:
    • Selecteer product in de vervolgkeuzelijst.
    • Een naam geven aan requires-contact.
    • Klik op Template maken.

De knop Aan winkelwagen toevoegen verbergen

  1. Zoek in je nieuwe product.requires-contact.liquid-bestand de HTML-code voor de knop Aan winkelwagen toevoegen. Je kunt zoeken naar het woord cart.

De code voor de knop Voeg toe aan winkelwagen varieert van thema tot thema. Zoek naar de tag <input> of <button> met tekst die lijkt op Add to cart, AddToCart of add-to-cart.

Voor Debut ziet de knopcode Toevoegen aan winkelwagen er als volgt uit:

<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. Als je de code hebt gevonden, voeg je er Liquid-tags {% comment %} en {% endcomment %} omheen toe. Zo wordt de code niet meer weergegeven in je winkel, maar vind je deze eenvoudiger terug als je je template later wilt veranderen.

In Debut ziet de aangepaste code er zo uit:

{% 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 op Opslaan.

Nu je de knop Toevoegen aan winkelwagen hebt verborgen, kun je in plaats daarvan de content toevoegen die je wilt weergeven.

  1. Plak de HTML-code voor een e-maillink op een nieuwe regel onder de Liquid-tag {% endcomment %} die je in de laatste stap hebt toegevoegd:
Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.
  1. Klik op Opslaan.

Contactformulier

Je kunt een contactformulier toevoegen aan je nieuwe producttemplate door de code te kopiëren uit het template voor de contactpagina van je thema. Een contactformulier toevoegen:

  1. Klik op page.contact.liquid in de directory Templates.
  2. Zoek de Liquid-tag {% form 'contact' %} in het bestand.
  3. Kopieer alle code van de Liquid-tag {% form 'contact' %} naar de Liquid-tag {% endform %}. Voeg de Liquid-formuliertags toe aan de code die je kopieert.
  4. Ga terug naar je nieuwe bestand product.requires-contact.liquid in je menu Templates.
  5. Zoek de laatste </form>-tag in het bestand. Plak de code voor het contactformulier op een nieuwe regel onder de </form>-tag.
  6. De volgende stap is om de code die je zojuist hebt gelabeld in HTML-div-tags te plakken. Het klasseattribuut dat is opgenomen in de div-tagcode, zorgt ervoor dat je contactformulier correct wordt weergegeven op de pagina.

Plak de volgende code op een nieuwe regel boven {% form 'contact' %}:

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

Plak de volgende code op een nieuwe regel onder {% endform %}:

</div>
  1. Klik op Opslaan.

Wijs je nieuwe template toe aan een product

Nu het template is voltooid, kun je deze toewijzen aan alle producten waarvoor je de knop Toevoegen aan winkelwagen wilt verbergen.

  1. Ga vanuit het Shopify-beheercentrum naar Producten.
  2. Klik op de naam van een product waar je de knop Toevoegen aan winkelwagen voor wilt verbergen.
  3. Kies op de productpagina van je Shopify-beheercentrum onder Onlinewinkel de nieuwe template contactpersoon vereist in de vervolgkeuzelijst Thema-template.
  4. Klik op Opslaan.

Herhaal deze stappen voor elk product waaraan je je nieuwe template wilt toevoegen.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis