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:

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.

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

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

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

Zat het antwoord dat je zocht er niet bij? Wij helpen je graag verder.