Zastąp przycisk „Dodaj do koszyka" linkiem kontaktowym

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

Jeśli używasz darmowego szablonu z Shopify, możesz kontaktować się z pomocą techniczną Shopify i uzyskać pomoc w związku z tym tutorialem. Czas projektowania wynosi 15 minut. Dowiedz się więcej o Polityce Shopify w zakresie projektowania.

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 zastąpić przycisk Dodaj do koszyka linkiem do poczty e-mail lub formularzem kontaktowym. Przykładowo, przycisk Dodaj do koszyka możesz zastąpić w przypadku produktów, które nie są obecnie na sprzedaż lub które są wykonywane na zamówienie.

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.

Kroki dotyczące szablonów z sekcjami

Wybierz swój szablon

Kroki tej konfiguracji różnią się w zależności od tego, czy używasz szablonu Narrative czy innego darmowego szablonu wykonanego przez aplikację Shopify. Kliknij przycisk swojego szablonu, zanim wykonasz poniższe instrukcje:

Narrative

Utwórz nowy szablon produktu w szablonie Narrative

Aby zastąpić przycisk Dodaj do koszyka dla produktu, musisz utworzyć niestandardowy szablon dla tego produktu.

Kroki:

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 opcję Dodaj nowy szablon.

4. Utwórz szablon produktu:

   • Z menu rozwijanego wybierz produkt.
   • Nazwij swój szablon requires-contact.
   • Kliknij Utwórz szablon.

5. Znajdź następujący kod:

{% section 'product-template' %}

Zastąp go poprzez:

{% section 'product-template-requires-contact' %}

Ten kod łączy nowy szablon z nową sekcją produktu, którą utworzysz w kolejnych krokach.

1. Kliknij opcję Zapisz.

Utwórz nową sekcję produktu

1. W katalogu Sekcje kliknij opcję Dodaj nowa sekcję.

2. Utwórz sekcję:

   1. Nazwij swoją nową sekcję product-template-requires-contact.
   2. Kliknij opcję Utwórz sekcję.

3. Usuń cały domyślny kod w pliku sekcji, tak aby plik był pusty.

4. W katalogu Sekcje kliknij product-template.liquid. Skopiuj całą zawartość pliku do schowka.

5. Wróć do nowej sekcji product-template-requires-contact.liquid i wklej kod do pliku.

6. Kliknij opcję Zapisz.

Ukryj przycisk Dodaj do koszyka

1. W sekcji produktu product-template-requires-contact.liquid znajdź kod HTML dla formularza produktu na stronie produktu. Możesz go znaleźć, wyszukując słowo form w pliku.

2. 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 przypadku szablonu Narrative zmodyfikowany kod wyglądałby tak:

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. Kliknij opcję Zapisz.

Dodaj link do poczty e-mail lub formularz kontaktowy

Po ukryciu przycisku Dodaj do koszyka możesz dodać zawartość, którą chcesz wyświetlić w jego miejsce.

Link do poczty e-mail

Możesz dodać link do poczty e-mail, który otworzy domyślny program pocztowy klienta i wprowadzi w polu odbiorcy adres e-mail Twojego sklepu przeznaczony dla klienta. Aby dodać link do poczty e-mail:

1. W nowej linii pod tagiem Liquid {% endcomment %} dodanym w ostatnim kroku dodaj kod HTML dla linku e-maila:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Kliknij opcję Zapisz.

Formularz kontaktowy

Możesz dodać formularz kontaktowy do nowego szablonu produktu, kopiując kod z szablonu strony kontaktowej szablonu produktu. Aby dodać formularz kontaktowy:

1. W katalogu Szablony kliknij page.contact.liquid.
2. Znajdź tag Liquid {% form 'contact' %} w pliku.
3. Skopiuj cały kod z tagu Liquid {% form 'contact' %} do tagu Liquid {% endform %}. Dołącz tagi formularza Liquid do kodu, który kopiujesz.
4. Wróć do nowego pliku product.requires-contact.liquid w katalogu Szablony.

W nowej linii pod dodanym tagiem Liquid {% endcomment %} wklej kod formularza kontaktowego.

1. Następnym krokiem jest wstawienie wklejonego kodu wewnątrz tagów div HTML. Atrybut klasy zawarty w kodzie tagu div zapewni poprawne renderowanie formularza kontaktowego na stronie.

W nowej linii nad {% form 'contact' %} wklej następujący kod:

<div class="form-vertical">

W nowej linii pod {% endform %} wklej następujący kod:

</div>

1. Kliknij opcję Zapisz.

Przypisz nowy szablon do produktu

Po ukończeniu szablonu możesz go przypisać do wszystkich produktów, dla których chcesz ukryć przycisk Dodaj do koszyka.

1. Z panelu administracyjnego Shopify przejdź do opcji Produkty.

2. Kliknij nazwę produktu, dla którego chcesz ukryć przycisk Dodaj do koszyka.

3. Na stronie produktu panelu administracyjnego Shopify w obszarze Sklep online wybierz nowy wzorzec wymaga kontaktu z menu rozwijanego Wzorzec szablonu.

4. Kliknij opcję Zapisz.

Powtórz te kroki dla każdego produktu, do którego chcesz dodać nowy szablon.

Other

Utwórz nowy szablon produktu

Aby zastąpić przycisk Dodaj do koszyka dla produktu, musisz utworzyć niestandardowy szablon dla tego produktu.

Kroki:

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 opcję Dodaj nowy szablon.

4. Utwórz szablon produktu:

   • Z menu rozwijanego wybierz produkt.
   • Nazwij swój szablon requires-contact.
   • Kliknij Utwórz szablon.

5. Znajdź następujący kod:

{% section 'product-template' %}

Zastąp go poprzez:

{% section 'product-template-requires-contact' %}

Ten kod łączy nowy szablon z nową sekcją produktu, którą utworzysz w kolejnych krokach.

1. Kliknij opcję Zapisz.

Utwórz nową sekcję produktu

1. W katalogu Sekcje kliknij opcję Dodaj nowa sekcję.

2. Utwórz sekcję:

   1. Nazwij swoją nową sekcję product-template-requires-contact.
   2. Kliknij opcję Utwórz sekcję.

3. Usuń cały domyślny kod w pliku sekcji, tak aby plik był pusty.

4. W katalogu Sekcje kliknij product-template.liquid. Skopiuj całą zawartość pliku do schowka.

5. Wróć do nowej sekcji product-template-requires-contact.liquid i wklej kod do pliku.

6. Kliknij opcję Zapisz.

Ukryj przycisk Dodaj do koszyka

1. W nowym pliku sekcji product-template-requires-contact.liquid znajdź kod HTML dla przycisku Dodaj do koszyka na stronie produktu. Możesz go znaleźć, wyszukując słowo cart w pliku.

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

W przypadku szablonu 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 przypadku szablonu Debut zmodyfikowany kod może wyglądać następująco:

{% 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.

Dodaj link do poczty e-mail lub formularz kontaktowy

Po ukryciu przycisku Dodaj do koszyka możesz dodać zawartość, którą chcesz wyświetlić w jego miejsce.

Link do poczty e-mail

Możesz dodać link do poczty e-mail, który otworzy domyślny program pocztowy klienta i wprowadzi w polu odbiorcy adres e-mail Twojego sklepu przeznaczony dla klienta. Aby dodać link do poczty e-mail:

1. W nowej linii pod tagiem Liquid {% endcomment %} dodanym w ostatnim kroku dodaj kod HTML dla linku e-maila:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Kliknij opcję Zapisz.

Formularz kontaktowy

Możesz dodać formularz kontaktowy do nowego szablonu produktu, kopiując kod z szablonu strony kontaktowej szablonu produktu. Aby dodać formularz kontaktowy:

1. W katalogu Szablony kliknij page.contact.liquid.
2. Znajdź tag Liquid {% form 'contact' %} w pliku.
3. Skopiuj cały kod z tagu Liquid {% form 'contact' %} do tagu Liquid {% endform %}. Dołącz tagi formularza Liquid do kodu, który kopiujesz.
4. Wróć do nowego pliku product-template-requires-contact.liquid w katalogu Sekcje.
5. Znajdź tag zamykający </form> w pliku. W nowej linii pod tagiem zamykającym </form> wklej kod dla formularza kontaktowego.
6. Następnym krokiem jest wstawienie wklejonego kodu wewnątrz tagów div HTML. Atrybut klasy zawarty w kodzie tagu div zapewni poprawne renderowanie formularza kontaktowego na stronie.

W nowej linii nad {% form 'contact' %} wklej następujący kod:

<div class="form-vertical"></div>

W nowej linii pod {% endform %} wklej następujący kod:

</div>

1. Kliknij opcję Zapisz.

Przypisz nowy szablon do produktu

Po ukończeniu szablonu możesz go przypisać do wszystkich produktów, dla których chcesz ukryć przycisk Dodaj do koszyka.

1. Z panelu administracyjnego Shopify przejdź do opcji Produkty.

2. Kliknij nazwę produktu, dla którego chcesz ukryć przycisk Dodaj do koszyka.

3. Na stronie produktu panelu administracyjnego Shopify w obszarze Sklep online wybierz nowy wzorzec wymaga kontaktu z menu rozwijanego Wzorzec szablonu.

4. Kliknij opcję Zapisz.

Powtórz te kroki dla każdego produktu, do którego chcesz dodać nowy szablon.

Kroki dotyczące szablonów bez sekcji

Utwórz nowy szablon produktu

Aby zastąpić przycisk Dodaj do koszyka dla produktu, musisz utworzyć niestandardowy szablon dla tego produktu.

Kroki:

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 opcję Dodaj nowy szablon.

4. Utwórz szablon produktu:

   • Z menu rozwijanego wybierz produkt.
   • Nazwij swój szablon requires-contact.
   • Kliknij Utwórz szablon.

Ukryj przycisk Dodaj do koszyka

1. W nowym pliku product.requires-contact.liquid znajdź kod HTML dla przycisku Dodaj do koszyka. Możesz wyszukać słowo cart.

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

W przypadku szablonu 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 przypadku szablonu Debut zmodyfikowany kod może wyglądać następująco:

{% 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.

Dodaj link do poczty e-mail lub formularz kontaktowy

Po ukryciu przycisku Dodaj do koszyka możesz dodać zawartość, którą chcesz wyświetlić w jego miejsce.

Link do poczty e-mail

1. W nowej linii pod tagiem Liquid {% endcomment %} dodanym w ostatnim kroku dodaj kod HTML dla linku e-maila:

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

1. Kliknij opcję Zapisz.

Formularz kontaktowy

Możesz dodać formularz kontaktowy do nowego szablonu produktu, kopiując kod z szablonu strony kontaktowej szablonu produktu. Aby dodać formularz kontaktowy:

1. W katalogu Szablony kliknij page.contact.liquid.
2. Znajdź tag Liquid {% form 'contact' %} w pliku.
3. Skopiuj cały kod z tagu Liquid {% form 'contact' %} do tagu Liquid {% endform %}. Dołącz tagi formularza Liquid do kodu, który kopiujesz.
4. Wróć do nowego pliku product.requires-contact.liquid w katalogu Szablony.
5. Znajdź tag zamykający </form> w pliku. W nowej linii pod tagiem zamykającym </form> wklej kod dla formularza kontaktowego.
6. Następnym krokiem jest wstawienie wklejonego kodu wewnątrz tagów div HTML. Atrybut klasy zawarty w kodzie tagu div zapewni poprawne renderowanie formularza kontaktowego na stronie.

W nowej linii nad {% form 'contact' %} wklej następujący kod:

<div class="form-vertical"></div>

W nowej linii pod {% endform %} wklej następujący kod:

</div>

1. Kliknij opcję Zapisz.

Przypisz nowy szablon do produktu

Po ukończeniu szablonu możesz go przypisać do wszystkich produktów, dla których chcesz ukryć przycisk Dodaj do koszyka.

1. Z panelu administracyjnego Shopify przejdź do opcji Produkty.

2. Kliknij nazwę produktu, dla którego chcesz ukryć przycisk Dodaj do koszyka.

3. Na stronie produktu panelu administracyjnego Shopify w obszarze Sklep online wybierz nowy wzorzec wymaga kontaktu z menu rozwijanego Wzorzec szablonu.

4. Kliknij opcję Zapisz.

Powtórz te kroki dla każdego produktu, do którego chcesz dodać nowy szablon.