Knoppen voor Toevoegen aan winkelwagen verbergen

Opmerking

Als je een gratis thema van Shopify gebruikt, kun je mogelijk contact opnemen met Shopify Support voor hulp bij deze tutorial. Hiervoor is 15 minuten ontwerptijd nodig. Zie Ondersteuning voor thema's voor meer informatie.

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

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

Opmerking

deze aanpassing is niet compatibel met dynamische betaalknoppen. Als je thema dynamisch afrekenen ondersteunt, kun je voorkomen dat de knoppen worden weergegeven door de stappen te volgen om dynamische betaalknoppen op productpagina's te verbergen.

Thema's met en zonder secties

Opmerking

de stappen in deze tutorial verschillen al naar gelang of je een thema met secties of zonder secties gebruikt. In een thema met secties kun je verslepen om de pagina-indeling van je 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 gebruikt voor oktober 2016 en de directory Secties van deze thema's bevat geen bestanden.

Als je een sectiethema gebruikt, klik op de knop Sectiethema's en volg de instructies. Als je een ouder, niet-gesegmenteerd thema gebruikt, klik op de knop Thema's zonder secties en volg de instructies.

---

Sectioned themes

Desktop

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.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

1. 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 er Liquid tags {% comment %} en {% endcomment %} omheen toe. Zo wordt de code niet weergegeven in je winkel, maar zorgt ervoor dat je deze makkelijk terugvindt als je je 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 je knoppen voor Voeg toe aan winkelwagen weer wilt weergeven: ga terug naar je product-template.liquid-bestand op de pagina Bewerk HTML/CSS, verwijder de tags {% comment %} en {% endcomment %}, en klik op Opslaan.

Non-sectioned themes

Desktop

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.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

1. 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 per thema. Zoek naar een <input>- of <button>-tag met tekst zoals 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 er Liquid tags {% comment %} en {% endcomment %} omheen toe. Zo wordt de code niet weergegeven in je winkel, maar zorgt ervoor dat je deze makkelijk terugvindt als je je 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 je knoppen voor Voeg toe aan winkelwagen weer wilt weergeven: ga terug naar je template product.liquid op de pagina Bewerk HTML/CSS, verwijder de tags {% comment %} en {% endcomment %}, en klik op Opslaan.