Vervang 'Aan winkelwagen toevoegen' met een contactlink

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

Als je een gratis thema van Shopify gebruikt, kun je contact opnemen met Shopify Support voor hulp bij deze tutorial. Hiervoor is vijftien minuten ontwerptijd nodig. Hier vind je meer informatie over het Ontwerpbeleid van Shopify.

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

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.

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:

Narrative

Maak een nieuw producttemplate aan in Narrative

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

5. Zoek de volgende code:

{% section 'product-template' %}

Vervang door:

{% section 'product-template-requires-contact' %}

Deze code koppelt je nieuwe template aan een nieuwe productsectie dat je in de volgende stappen maakt.

1. Klik op Opslaan.

Een nieuwe productsectie maken

1. In het menu Secties, klik je op Voeg een nieuwe sectie toe.

2. Maak de sectie:

   1. Je nieuwe sectienaam product-template-requires-contact.
   2. Klik op Sectie maken.

3. Verwijder alle standaardcode in het sectiebestand, zodat het bestand leeg is.

4. Klik in de directory Secties op product-template.liquid. Kopieer alle content van het bestand naar je klembord.

5. Ga terug naar de nieuwe product-template-requires-contact.liquid-sectie en plak de code in het bestand.

6. Klik op Opslaan.

De knop Aan winkelwagen toevoegen verbergen

1. Zoek in het sectiebestand product-template-requires-contact.liquid de HTML-code voor het productformulier van je productpagina. Je kunt het vinden door te zoeken naar het woord form in het bestand.

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

Voor Narrative zou de aangepaste code er als volgt uitzien:

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. Klik op Opslaan.

Voeg een e-maillink of contactformulier toe

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

E-maillink

Je kunt een e-maillink toevoegen die het standaard e-mailprogramma van de klant opent en het klantgerichte e-mailadres van je winkel als ontvanger invoeren. Een e-maillink toevoegen:

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:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

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.

Plak de code voor het contactformulier op een nieuwe regel onder de Liquid-tag {% endcomment %} die je hebt toegevoegd.

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

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 vanaf je 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 webshop 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.

Other

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

5. Zoek de volgende code:

{% section 'product-template' %}

Vervang door:

{% section 'product-template-requires-contact' %}

Deze code koppelt je nieuwe template aan een nieuwe productsectie dat je in de volgende stappen maakt.

1. Klik op Opslaan.

Een nieuwe productsectie maken

1. In het menu Secties, klik je op Voeg een nieuwe sectie toe.

2. Maak de sectie:

   1. Je nieuwe sectienaam product-template-requires-contact.
   2. Klik op Sectie maken.

3. Verwijder alle standaardcode in het sectiebestand, zodat het bestand leeg is.

4. Klik in de directory Secties op product-template.liquid. Kopieer alle content van het bestand naar je klembord.

5. Ga terug naar de nieuwe product-template-requires-contact.liquid-sectie en plak de code in het bestand.

6. Klik op Opslaan.

De knop Aan winkelwagen toevoegen verbergen

1. In je nieuwe sectiebestand product-template-requires-contact.liquid, zoek de HTML-code voor de knop Voeg toe aan winkelwagen op je productpagina. Je kunt het vinden door te zoeken naar het woord cart in het bestand.

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

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.

Voeg een e-maillink of contactformulier toe

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

E-maillink

Je kunt een e-maillink toevoegen die het standaard e-mailprogramma van de klant opent en het klantgerichte e-mailadres van je winkel als ontvanger invoeren. Een e-maillink toevoegen:

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:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

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 product-template-requires-contact.liquid-bestand in de directory Secties.
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 vanaf je 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 webshop 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.

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

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.

Voeg een e-maillink of contactformulier toe

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

E-maillink

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 vanaf je 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 webshop 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.