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.
Dodaj link Kontynuuj zakupy do strony koszyka
Aby dodać link Kontynuuj zakupy do strony swojego koszyka:
Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
W aplikacji Shopify naciśnij Sklep.
W sekcji Kanały sprzedaży naciśnij Sklep online.
Naciśnij opcję Zarządzaj szablonami.
Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
W aplikacji Shopify naciśnij Sklep.
W sekcji Kanały sprzedaży naciśnij Sklep online.
Naciśnij opcję Zarządzaj szablonami.
Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
W katalogu Sekcje kliknij
cart-template.liquid
. Jeśli dla Twojego szablonu nie istnieje ten plik, kliknijcart.liquid
w katalogu Szablony.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>
- 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:
<a href="/collections/all" title="Continue shopping">Continue shopping</a>
### For a link that goes to your home page
To add a link that goes to your home page, paste the following code on a new line either before or after the code for the **Checkout** button:
<a href="/" title="Continue shopping">Continue shopping</a>
### For a link that goes to the last collection viewed
To add a link that goes to the last collection viewed, paste the following code on a new line either before or after the code for the **Checkout** button:
<a
id="continue-shopping"
href=""
title="Continue shopping">
Continue shopping
</a>
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.
W katalogu Układ kliknij
theme.liquid
.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>
- 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>