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

Je kunt een 'winkel verder'-link toevoegen aan je winkelwagenpagina waarmee klanten eenvoudig kunnen terugkeren naar het 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

Om een Winkel verder link aan je winkelwagenpagina toe te voegen:

  1. Klik in het menu Secties op cart-template.liquid. Als je thema dit bestand niet bevat, klik je op cart.liquid in het menu Sjablonen.

  2. 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 vóór of na de code voor de checkoutknop om een link toe te voegen die naar je cataloguspagina leidt:

<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 je 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 gratis thema gebruikt dat geen Supply is, voeg je het attribuut class="btn--secondary" toe aan de coderegel die je hebt geplakt om een 'Winkel verder'-link toe te voegen. Je code ziet er als volgende uit:

<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