Voeg een "winkel verder"-link toe aan je winkelwagen

Deze pagina is afgedrukt op Sep 09, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-link.

Je kunt een link Verder winkelen toevoegen aan je winkelwagenpagina waarmee klanten snel terug kunnen bladeren door producten nadat ze iets aan de winkelwagen hebben toegevoegd. Je kunt ervoor kiezen om een link toe te voegen die klanten terugbrengt naar je cataloguspagina, naar je homepage of naar de laatste collectiepagina die ze bekeken.

Winkel verder

Op deze pagina

  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 in de directory Secties op cart-template.liquid. Klik op cart.liquid in het menu Templates als je thema dit bestand niet bevat.
  4. Zoek de code voor de checkoutknop door in het bestand naar name="checkout" te zoeken. De coderegel voor de checkoutknop verschilt per thema, maar ziet er als volgt uit: 
<button type="submit" id="checkout" name="checkout" class="btn">
   {{ 'cart.general.checkout' | t }}
</button>

 5. De volgende stap is om een nieuwe coderegel te plakken om een link Doorgaan met winkelen te maken. De code die je plakt hangt van de pagina waar je de link naar wilt laten verwijzen: * Plak de volgende code op een nieuwe regel vóór of na de code voor de Checkoutknop om een link toe te voegen die naar je assortimentspagina wijst:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>
  • Plak de volgende code op een nieuwe regel net voor of na de code van de checkout-knop om een link toe te voegen die naar de homepage verwijst: 
<a href="/" title="Continue shopping">Continue shopping</a>
  • Plak de volgende code op een nieuwe regel net voor of na de code van de checkout-knop om een link toe te voegen die naar de laatst bekeken collectie verwijst: 
<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>

 6. Klik op Opslaan. Als je een link hebt toegevoegd die naar je assortimentspagina of je homepage leidt, ben je klaar. Als je een link hebt toegevoegd die naar de laatst bekeken collectie leidt, voeg je JavaScript toe aan je themacode. Ga verder met de volgende stappen.

 7. Klik in de map Opmaak op theme.liquid.

 8. Zoek de </body>-sluittag onderaan het bestand. Plak de volgende code boven de </body>-sluittag:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>

 9. Klik op Opslaan.

  1. Tik in de Shopify-app op de knop ….
  2. Tik in het gedeelte Verkoopkanalen op webshop.
  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.
  5. Klik in de directory Secties op cart-template.liquid. Klik op cart.liquid in het menu Templates als je thema dit bestand niet bevat.
  6. Zoek de code voor de checkoutknop door in het bestand naar name="checkout" te zoeken. De coderegel voor de checkoutknop verschilt per thema, maar ziet er als volgt uit: 
<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. De volgende stap is om een nieuwe coderegel te plakken om een 'winkel verder'-link te maken. De code die je plakt, is afhankelijk van de pagina waarop je de link wilt plaatsen:
    • Plak de volgende code op een nieuwe regel net voor of na de code voor de **Checkout*-knop om een link naar je assortimentspagina toe te voegen. 
<a href="/collections/all" title="Continue shopping">Continue shopping</a>
  • Plak de volgende code op een nieuwe regel net voor of na de code van de checkout-knop om een link toe te voegen die naar de homepage verwijst: 
<a href="/" title="Continue shopping">Continue shopping</a>
  • Plak de volgende code op een nieuwe regel net voor of na de code van de checkout-knop om een link toe te voegen die naar de laatst bekeken collectie verwijst: 
<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>
  1. Klik op Opslaan. Als je een link hebt toegevoegd die naar je cataloguspagina of je homepage leidt, ben je klaar. Als je een link toevoegt die naar de laatst bekeken collectie leidt, moet je JavaScript toevoegen aan je themacode. Ga verder met de volgende stappen.
  2. Klik in de directory Opmaak op theme.liquid.
  3. Zoek de sluitende tag </body> onderaan het bestand. Plak de volgende code boven de sluitende tag </body>: 
<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>
  1. Klik op Opslaan.
  1. Tik in de Shopify-app op de knop ….
  2. Tik in het gedeelte Verkoopkanalen op webshop.
  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.
  5. Klik in de directory Secties op cart-template.liquid. Klik op cart.liquid in het menu Templates als je thema dit bestand niet bevat.
  6. Zoek de code voor de checkoutknop door in het bestand naar name="checkout" te zoeken. De coderegel voor de checkoutknop verschilt per thema, maar ziet er als volgt uit: 
<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. De volgende stap is om een nieuwe coderegel te plakken om een 'winkel verder'-link te maken. De code die je plakt, is afhankelijk van de pagina waarop je de link wilt plaatsen:
    • Plak de volgende code op een nieuwe regel net voor of na de code voor de **Checkout*-knop om een link naar je assortimentspagina toe te voegen. 
<a href="/collections/all" title="Continue shopping">Continue shopping</a>
  • Plak de volgende code op een nieuwe regel net voor of na de code van de checkout-knop om een link toe te voegen die naar de homepage verwijst: 
<a href="/" title="Continue shopping">Continue shopping</a>
  • Plak de volgende code op een nieuwe regel net voor of na de code van de checkout-knop om een link toe te voegen die naar de laatst bekeken collectie verwijst: 
<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>
  1. Klik op Opslaan. Als je een link hebt toegevoegd die naar je cataloguspagina of je homepage leidt, ben je klaar. Als je een link toevoegt die naar de laatst bekeken collectie leidt, moet je JavaScript toevoegen aan je themacode. Ga verder met de volgende stappen.
  2. Klik in de directory Opmaak op theme.liquid.
  3. Zoek de sluitende tag </body> onderaan het bestand. Plak de volgende code boven de sluitende tag </body>: 
<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>
  1. Klik op Opslaan.

Knopstijl toevoegen (optioneel)

Als je een gratis Shopify-thema gebruikt, kun je een stijl toepassen op je 'winkel verder'-link om deze op een knop te laten lijken. Door een klasse-attribuut toe te voegen aan de code voor je knoplink, kun je je knop laten overeenkomen met de stijl van de andere knoppen in je thema. Alle gratis Shopify-thema's gebruiken dezelfde klassenaam voor primaire knopstijlen en de meeste gebruiken dezelfde klassenaam voor secundaire knopstijlen.

Voeg het attribuut class="btn" toe aan de regel code die je hebt geplakt om een 'Winkel verder'-link toe te voegen. Je code hoort er zo uit te zien:

<a href="/collections/all" title="Continue shopping" class="btn">
  Continue shopping
</a>

Als je een ander gratis thema dan Supply gebruikt, voeg je het kenmerk class="btn--secondary" toe aan de coderegel die je hebt geplakt om een link naar Doorgaan met winkelen toe te voegen. De code zou er zo uit moeten zien:

<a href="/collections/all" title="Continue shopping" class="btn--secondary">
  Continue shopping
</a>

Als je Supply gebruikt, voeg dan het attribuut class="btn-secondary" toe aan de regel code die je hebt geplakt om een Winkel verder-link toe te voegen. Je code hoort er zo uit te zien:

<a href="/collections/all" title="Continue shopping" class="btn-secondary">
  Continue shopping
</a>

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis