Dodaj link kontynuacji zakupów do koszyka

Możesz dodać link Kontynuuj zakupy do strony koszyka, który umożliwia klientom łatwy powrót do przeglądania produktów po dodaniu czegoś do koszyka. Możesz dodać link pozwalający klientom na powrót do strony katalogu, strony głównej lub do ostatniej strony kolekcji, którą oglądali.

Kontynuuj zakupy

Aby dodać link Kontynuuj zakupy do strony swojego koszyka:

  1. W katalogu Sekcje kliknij cart-template.liquid. Jeśli dla Twojego szablonu nie istnieje ten plik, kliknij cart.liquid w katalogu Szablony.

  2. Znajdź kod przycisku Realizacja zakupu, wyszukując plik dla name="checkout". Linia kodu przycisku realizacji zakupu różni się w zależności od szablonu, ale będzie wyglądać ogólnie tak:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. Następnym krokiem jest wklejenie nowej linii kodu w celu utworzenia linku Kontynuuj zakupy. Wklejony kod będzie zależeć od strony, do której ma odsyłać link:

Aby dodać link odsyłający do strony katalogu, wklej w nowej linii poniższy kod przed lub po kodzie przycisku Realizacja zakupu:

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

Aby dodać link łączący ze stroną główną, wklej następujący kod w nowej linii przed lub za kodem dla przycisku Realizacja zakupu:

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

Aby dodać link odsyłający do ostatniej oglądanej kolekcji, wklej poniższy kod w nowej linii przed lub po kodzie przycisku Realizacja zakupu:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>
  1. Kliknij Zapisz. W przypadku dodania linku odsyłającego do strony katalogu lub strony głównej nie musisz robić nic więcej. Jeśli dodałeś(-aś) link odsyłający do ostatniej oglądanej kolekcji, musisz dodać kod JavaScript do kodu szablonu. Kontynuuj, aby wykonać kolejne kroki.

  2. W katalogu Układ kliknij theme.liquid.

  3. Znajdź tag zamykający </body> w dolnej części pliku. Wklej powyższy kod nad tagiem zamykającym </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. Kliknij opcję Zapisz.

Dodaj stylizację przycisku (opcjonalnie)

Jeśli korzystasz z darmowego szablonu Shopify, możesz zastosować stylizację do linku Kontynuuj zakupy, aby upodobnić go do przycisku. Dodając atrybut klasy do kodu linku przycisku, możesz dopasować przycisk do stylu innych przycisków w swoim szablonie. Wszystkie darmowe szablony Shopify używają tej samej nazwy klasy dla stylów głównych przycisków i większość z nich używa tej samej nazwy klasy dla stylów dodatkowych przycisków.

Aby zastosować styl przycisku głównego do linku Kontynuuj zakupy:

Dodaj atrybut class="btn" do linii kodu wklejonego w celu dodania linku Kontynuuj zakupy. Twój kod powinien wyglądać tak:

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

Aby zastosować styl przycisku dodatkowego do linku Kontynuuj zakupy:

Jeśli używasz darmowego szablonu innego niż Supply, dodaj atrybut class="btn--secondary" do linii kodu wklejonego w celu dodania linku Kontynuuj zakupy. Twój kod powinien wyglądać tak:

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

Jeśli korzystasz z szablonu Supply, dodaj atrybut class="btn-secondary" do linii kodu wklejonego w celu dodania linku Kontynuuj zakupy. Twój kod powinien wyglądać następująco:

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

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo