Ukryj przyciski Dodaj do koszyka

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 tutoriala.

Uwaga

Klasyczne szablony nie są dostępne w Sklepie z szablonami. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane oprócz 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

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

Uwaga

To dostosowanie nie jest kompatybilne z dynamicznymi przyciskami realizacji zakupu. Jeśli Twój szablon obsługuje dynamiczne przyciski realizacji zakupu, możesz uniemożliwić wyświetlanie przycisków, wykonując poniższe kroki, aby ukryć dynamiczne przyciski realizacji zakupu na stronach produktów.

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 są pliki, używasz szablonu z sekcjami. Szablony bez sekcji zostały zatwierdzone przed październikiem 2016 roku i nie zawierają 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. Poszukaj tagu <input> lub <button> z tekstem, np. 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.

Gdy będziesz gotowy(-a) 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.