Link "Mit dem Shoppen fortfahren" zu deinem Warenkorb hinzufügen

Du kannst deiner Warenkorbseite den Link Einkauf fortsetzen hinzufügen. So können Kunden schnell zur Produktansicht zurückkehren, nachdem sie dem Warenkorb ein Produkt hinzugefügt haben. Du kannst einen Link hinzufügen, der Kunden zurück zur Katalogseite, zur Startseite oder zur letzten Kategorieseite führt.

Weiter einkaufen

So fügst du den Link Einkauf fortsetzen zu deiner Warenkorbseite hinzu:

  1. Klicke in der Übersicht Abschnitte auf cart-template.liquid. Wenn dein Theme diese Datei nicht hat, klicke auf cart.liquid im Verzeichnis Vorlagen.

  2. Suche nach dem Code für die Checkout-Schaltfläche, indem du in der Datei nach name="checkout" suchst. Die Codezeile für die Checkout-Schaltfläche variiert je nach Theme, sieht aber etwa so aus:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. Im nächsten Schritt musst du eine neue Codezeile einfügen, um den Link Einkauf fortsetzen zu erstellen. Der Code, den du einfügen musst, hängt davon ab, auf welcher Seite der Link angezeigt werden soll:

Um einen Link hinzuzufügen, der auf deine Katalogseite verweist, füge den folgenden Code in einer neuen Zeile ein, entweder vor oder hinter dem Code für die Schaltfläche Checkout:

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

Um einen Link hinzuzufügen, der auf deine Startseite verweist, füge den folgenden Code in einer neuen Zeile ein, entweder vor oder hinter dem Code für die Schaltfläche Checkout:

<a href="/" title="Continue shopping">Continue shopping</a>

Um einen Link hinzuzufügen, der auf die zuletzt geöffnete Kategorieseite verweist, füge den folgenden Code in einer neuen Zeile ein, entweder vor oder hinter dem Code für die Schaltfläche Checkout:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>
  1. Klicke auf Speichern. Wenn du einen Link hinzugefügt hast, der auf deine Katalogseite oder Startseite verweist, bist du fertig. Wenn du einen Link hinzugefügt hast, der auf die zuletzt geöffnete Kategorieseite verweist, musst du deinem Theme-Code etwas JavaScript-Code hinzufügen. Befolge dazu die nächsten Schritte.

  2. Klicke in der Übersicht Layout auf theme.liquid .

  3. Suche das abschließende Tag </body> am Ende der Datei. Füge den folgenden Code über dem abschließenden Tag </body> ein:

<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. Klicke auf Speichern.

Schaltflächenstil hinzufügen (optional)

Wenn du ein kostenloses Shopify-Theme verwendest, kannst du dem Link Einkauf fortsetzen einen Stil verpassen, damit der Link wie eine Schaltfläche aussieht. Wenn du dem Schaltflächenlink-Code ein Klassenattribut hinzufügst, kannst du sicherstellen, dass der Stil der Schaltfläche mit dem Stil der anderen Schaltflächen in deinem Theme übereinstimmt. Alle kostenlosen Shopify-Themes verwenden denselben Klassennamen für Stile primärer Schaltflächen. Außerdem verwenden die meisten kostenlosen Shopify-Themes denselben Klassennamen für Stile sekundärer Schaltflächen.

Füge das Attribut class="btn" zu der Codezeile hinzu, die du eingefügt hast, um den Link Einkauf fortsetzen hinzuzufügen. Dein Code sollte nun folgendermaßen aussehen:

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

Hinweis: Das Hinzufügen dieser Klasse hat keinen Einfluss auf Boundless.

Wenn du ein kostenloses Theme außer Supply verwendest, füge das Attribut class="btn--secondary" zu der Codezeile hinzu, die du eingefügt hast, um den Link Einkauf fortsetzen hinzuzufügen. Dein Code sollte nun folgendermaßen aussehen:

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

Wenn du Supply verwendest, füge das Attribut class="btn-secondary" zu der Codezeile hinzu, die du eingefügt hast, um den Link Weiter einkaufen hinzuzufügen. Dein Code sollte nun folgendermaßen aussehen:

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

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren