Knoppen voor Toevoegen aan winkelwagen verbergen

Je kunt de knoppen Aan winkelwagen toevoegen in je webwinkel verbergen en deze daarna opnieuw tonen.

Thema's met en zonder secties

Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik om je bestand product-template.liquid te openen in het menu Secties. Zoek de HTML-code voor de knop Voeg toe aan winkelwagen. Je kunt naar het woord winkelwagen zoeken om dit te vinden.

De code voor de knop 'Toevoegen aan winkelwagen' varieert per thema. Zoek naar een <input>- of <button>-tag met tekst zoals Add to cart, AddToCart of add-to-cart.

In het thema 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>

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 de template later wil veranderen.

Met het voorbeeld hierboven als uitgangspunt, ziet de nieuwe code er als volgt 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 %}

Klik op Opslaan om de wijzigingen te bevestigen.

Als je knoppen voor Toevoegen aan winkelwagen opnieuw wil weergeven, ga je terug naar hetproduct-template.liquid-bestand op de pagina HTML/CSS bewerken, verwijder je de tags {% comment %} en {% endcomment %} en klik je op Opslaan.

Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
Klik om je bestand product.liquid te openen in de directory Templates. Zoek de HTML-code voor de knop Voeg toe aan winkelwagen. Je kunt naar het woord winkelwagen zoeken om dit te vinden.

De code voor de knop 'Toevoegen aan winkelwagen' varieert van thema tot thema. Zoek naar een <input>- of <button>-tag met tekst als Add to cart, AddToCart of add-to-cart.

De code voor de knop Voeg toe aan winkelwagen ziet er zo uit in het thema Minimal:

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

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 de template later wil veranderen.

Met het voorbeeld hierboven als uitgangspunt, ziet de nieuwe code er als volgt uit:

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

Klik op Opslaan om de wijzigingen te bevestigen.

Als je knoppen voor Toevoegen aan winkelwagen opnieuw wil weergeven, ga je terug naar deproduct.liquid-template op de pagina HTML/CSS bewerken, verwijder je de tags {% comment %} en {% endcomment %} en klik je op Opslaan.

Knoppen voor Toevoegen aan winkelwagen verbergen

Thema's met en zonder secties

Sectioned

Non-sectioned