Ukryj przyciski Dodaj do koszyka

Możesz ukryć przyciski Dodaj do koszyka w witrynie sklepu i wyświetlić je ponownie w późniejszym czasie.

Uwaga

To jest zaawansowany tutorial, który nie jest obsługiwany przez Shopify. Wymagana jest znajomość języków projektowania stron internetowych, takich jak HTML, CSS, JavaScript i Liquid. Sugerujemy zatrudnienie partnera Shopify, jeśli nie czujesz się pewnie, korzystając z poniższego tutorialu.

Uwaga

Klasyczne szablony nie są dostępne w Theme Store. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane z wyjątkiem poprawek bezpieczeństwa.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

Szablony z sekcjami i bez sekcji

Uwaga

Kroki tego tutoriala różnią się w zależności od tego, czy używasz szablonu z sekcjami czy bez sekcji. Szablon z sekcjami umożliwia przeciąganie i upuszczanie elementów w celu zmiany układu strony głównej, nie jest to możliwe w przypadku szablonu bez sekcji.

Aby ustalić, czy Twój szablon obsługuje sekcje, przejdź do strony Edytuj kod. Jeśli w katalogu Sekcje znajdują się pliki, używasz szablonu z sekcjami. Szablony bez sekcji zostały opublikowane przed październikiem 2016 roku i nie mają plików w katalogu Sekcje.

Jeśli używasz szablonu z sekcjami, kliknij przycisk Szablony z sekcjami i zastosuj się do instrukcji. Jeśli używasz starszego szablonu, niezawierającego sekcji, kliknij przycisk Szablony bez sekcji i zastosuj się do instrukcji.

Sectioned

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Sekcje kliknij plik product-template.liquid, aby go otworzyć. Znajdź kod HTML dla przycisku Dodaj do koszyka. Możesz wyszukać na przykład słowo koszyk.

Kod przycisku Dodaj do koszyka różni się w zależności od szablonu. Szukaj tagu <input> lub <button> z tekstem Add to cart, AddToCart lub add-to-cart.

W szablonie Debut kod przycisku Dodaj do koszyka wygląda następująco:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Gdy znajdziesz kod, otocz go tagami Liquid {% comment %} i {% endcomment %}. Dzięki temu kod nie będzie wyświetlany w Twoim sklepie, ale będzie go można łatwo ponownie wstawić, gdy zajdzie konieczność późniejszej zmiany nowego szablonu.

W powyższym przykładzie nowy kod wyglądałby tak:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Uwaga

Upewnij się, że tagi <form> nie są oznaczone jako komentarz dla strony produktu. Tagi komentarzy nie powinny otaczać żadnych tagów <form> ani </form>. W przeciwnym razie klienci mogą napotkać błędy podczas przeglądania strony produktu.

1. Kliknij opcję Zapisz, aby potwierdzić zmiany.

Aby ponownie wyświetlić przyciski Dodaj do koszyka, wróć do pliku product-template.liquid na stronie Edytuj HTML/CSS, usuń tagi {% comment %} i {% endcomment %}, a następnie kliknij opcję Zapisz.

Non-sectioned

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.
3. W katalogu Szablony kliknij, aby otworzyć plik product.liquid. Znajdź kod HTML dla przycisku Dodaj do koszyka. Możesz wyszukać na przykład słowo koszyk.

Kod przycisku Dodaj do koszyka różni się w zależności od szablonu. Poszukaj tagu <input> lub <button> z tekstem, np. Add to cart, AddToCart lub add-to-cart.

W szablonie Minimal kod przycisku dodawania do koszyka wygląda następująco:

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

1. Gdy znajdziesz kod, otocz go tagami Liquid {% comment %} i {% endcomment %}. Dzięki temu kod nie będzie wyświetlany w Twoim sklepie, ale będzie go można łatwo ponownie wstawić, gdy zajdzie konieczność późniejszej zmiany nowego szablonu.

W powyższym przykładzie nowy kod wyglądałby tak:

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

Uwaga

Upewnij się, że tagi <form> nie są oznaczone jako komentarz dla strony produktu. Tagi komentarzy nie powinny otaczać żadnych tagów <form> ani </form>. W przeciwnym razie klienci mogą napotkać błędy podczas przeglądania strony produktu.

1. Kliknij opcję Zapisz, aby potwierdzić zmiany.

Aby ponownie wyświetlić przyciski Dodaj do koszyka, wróć do szablonu product.liquid na stronie edycji HTML/CSS, usuń tagi {% comment %} i {% endcomment %}, a następnie kliknij opcję Zapisz.