Knoppen voor Toevoegen aan winkelwagen verbergen

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

Let op

Dit is een uitgebreide tutorial en wordt niet ondersteund door Shopify. Hiervoor is kennis van een webontwerptaal zoals HTML, CSS, JavaScript en Liquid vereist. We raden je aan een Shopify-expert in te huren als je het niet prettig vindt om verder te gaan met de volgende tutorial.

Let op

Vintage thema's zijn niet beschikbaar in de Theme Store. Vintage thema's hebben niet de functies die in de Online Store 2.0-thema's van Shopify zijn opgenomen en de gratis vintage thema's van Shopify krijgen geen updates, behalve als dit voor de beveiliging nodig is.

Opmerking

Deze aanpassing is voor vintage thema's van Shopify en is niet van toepassing op Online Store 2.0-thema's.

• Ontdek de architectuurversie van je thema
• Ontdek aanpassingen aan Online Store 2.0-thema

Thema's met en zonder secties

Opmerking

De stappen in deze tutorial verschillen al naar gelang of je een thema met of zonder secties gebruikt. In een thema met secties kun je slepen en neerzetten om de opmaak van de homepage te bepalen en in een thema zonder secties kan dat niet.

Ga naar de pagina Code bewerken van je thema om erachter te komen of je thema secties ondersteunt. Gebruik een thema met secties als de directory Secties bestanden bevat. Thema's zonder secties werden voor oktober 2016 in gebruik genomen en de directory Secties van deze thema's bevat geen bestanden.

Als je een thema met secties gebruikt, klik je op de knop Thema's met secties en volg je de instructies. Als je een ouder thema zonder secties gebruikt, klik je op de knop Thema's zonder secties en volg je de instructies.

Sectioned

1. Ga in het Shopify-beheercentrum naar webshop > 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. 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>

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 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 %}

Let op

Zorg ervoor dat je geen opmerkingen invoert over de <form>-tags voor je productpagina. Let erop dat de tags bij je opmerkingen niet om <form>- of </form>-tags worden geplaatst, anders kunnen klanten fouten ervaren als ze je productpagina bekijken.

1. 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.

Non-sectioned

1. Ga in het Shopify-beheercentrum naar webshop > 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. 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>

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 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 %}

Let op

Zorg ervoor dat je geen opmerkingen invoert over de <form>-tags voor je productpagina. Let erop dat de tags bij je opmerkingen niet om <form>- of </form>-tags worden geplaatst, anders kunnen klanten fouten ervaren als ze je productpagina bekijken.

1. 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.