Wskazówki dotyczące szablonu Supply

W tym artykule przedstawiono kilka przydatnych wskazówek i najlepszych praktyk, które mogą Ci pomóc w skonfigurowaniu Supply swojego sklepu online.

Wskazówki dotyczące obrazu

Obrazy produktu

Zdjęcia o wysokiej rozdzielczości wyglądają na lepiej dopracowane i bardziej profesjonalne w szablonie Supply, należy więc dążyć do tego, by obrazy miały co najmniej 1024 piksele szerokości i wysokości. W razie potrzeby obrazy są automatycznie zmniejszane. Wysoka rozdzielczość zdjęć ma szczególne znaczenie w przypadku włączenia powiększenia obrazu na stronach produktów.

Optymalny stosunek szerokości do wysokości dla zdjęć Twoich produktów to 1:1 (kwadrat).

Zmniejsz pokaz slajdów

Aby pokaz slajdów zajmował mniej miejsca w pionie na stronie głównej, należy użyć obrazów o orientacji poziomej, których szerokość jest większa od wysokości. Należy załadować obrazy o szerokości 1000 pikseli, aby po lewej lub prawej stronie slajdów na większych ekranach nie występowały białe znaki. Obrazy o mniejszej szerokości są wyśrodkowywane w pokazie slajdów.

Uwaga

Wszystkie slajdy powinny mieć taką samą szerokość i wysokość. W przeciwnym razie zawartość strony głównej będzie się przesuwać podczas zmiany slajdów.

Wskazówki dotyczące nagłówka

Jeśli nagłówek jest zbyt wysoki, możesz go skrócić, dostosowując logo. Jeśli Twoje logo jest zbyt duże, możesz zmniejszyć jego rozmiar, dostosowując jego maksymalną szerokość. Logo może również zawierać niewidoczne lub białe piksele, które dodają się do białych znaków nad i pod nim. Możesz użyć programu do edycji obrazów, jak np. Photoshop, w celu wycięcia tych pikseli z obrazu logo. Po przycięciu logo załaduj je ponownie. Przycięcie białych znaków w obrazie logo może znacząco zmniejszyć wysokość nagłówka.

Dostosuj szerokość logo

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
2. Kliknij opcję Dostosuj obok Supply.

iPhone

1. W aplikacji Shopify naciśnij Sklep.
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.
4. Obok Supply naciśnij opcję Dostosuj.
5. Naciśnij Edytuj.

Android

1. W aplikacji Shopify naciśnij Sklep.
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.
4. Obok Supply naciśnij opcję Dostosuj.
5. Naciśnij Edytuj.

1. Kliknij Nagłówek. 5. Wprowadź nową szerokość w polu Niestandardowa szerokość logo (w pikselach). Domyślna wartość wyrażona w pikselach wynosi 305. Użyj mniejszej wartości wyrażonej w pikselach, aby zmniejszyć rozmiar logo, a w rezultacie zredukować wysokość nagłówka. Zmniejszenie szerokości logo redukuje również jego wysokość, ponieważ logo jest zmniejszane z zachowaniem proporcji. 6. Kliknij opcję Zapisz.

Wskazówki dotyczące nawigacji

Poniższe wskazówki mogą ulepszyć nawigację w Twoim sklepie opartym na szablonie Supply.

Dodaj menu rozwijane

Aby dodać menu rozwijane do menu głównego, należy utworzyć menu na stronie Nawigacja.

Najlepsze praktyki dotyczące menu głównego

Jeśli Twoje menu główne zawiera zbyt dużo elementów, by mogły się zmieścić w jednej linii, ostatnie linki, które się nie mieszczą, są dodawane do menu rozwijanego Więcej.

Choć zachowanie to nie jest ściśle kontrolowane przez liczbę linków w menu głównym, to utrzymywanie tej liczby poniżej pięciu czy sześciu pomaga. Aby dodać więcej linków, możesz:

• Zmniejsz linki nawigacji. Rozmiarem czcionki tych linków steruje Rozmiar czcionki głównego menu w ustawieniach typografii.
• Użyć mniej znaków dla każdego linku. Możesz na przykład zmienić „Często zadawane pytania” na „FAQ”, „Skontaktuj się z nami” na „Kontakt”, „Katalog” na „Sklep”, a wszystkie wystąpienia „oraz” – na „i”.

Zbyt wiele pozycji w menu nawigacji może utrudnić obsługę Twojej strony. Jeśli będzie ich za dużo, klienci mogą mieć trudności z wyszukaniem ważnych pozycji. Spróbuj ograniczyć menu nawigacji do pięciu lub sześciu pozycji. Użyj menu rozwijanych, jeśli chcesz udostępnić więcej niż sześć stron.

Należy unikać dodawania linków do każdej kolekcji z menu głównego. Spróbuj zamiast tego utworzyć rozwijane menu pod linkiem „Sklep” lub „Katalog”. Można również podzielić kolekcje na grupy, przypisując do każdej grupy menu rozwijane. Możesz także użyć tagów produktów, aby tworzyć podkategorie produktów.

Usuń pasek boczny

Aby usunąć pasek boczny ze sklepu, musisz dodać kod do dwóch spośród Twoich plików szablonu.

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź szablon, który chcesz edytować, a następnie kliknij Czynności > Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź szablon, który chcesz edytować, a następnie kliknij Czynności > Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź szablon, który chcesz edytować, a następnie kliknij Czynności > Edytuj kod.

1. W katalogu Sekcje kliknij collection-template.liquid.

2. Znajdź has_sidebar w pliku. Usuń następujące linie kodu:

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}

1. Kliknij opcję Zapisz.

2. W katalogu Sekcje kliknij collection-list-template.liquid.

3. Znajdź has_sidebar w pliku. Usuń następujące linie kodu:

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}

1. Kliknij opcję Zapisz.

Wskazówki dotyczące produktów

Poniższe wskazówki pomogą Ci prezentować produkty z wykorzystaniem szablonu Supply.

Użyj zaawansowanego filtrowania grup

Jeśli masz wiele produktów, możesz włączyć podgrupy, aby ułatwić klientom ich sortowanie.

1. Zdefiniuj swoje grupy. Na obrazie powyżej grupami są Marka, Długość ogniskowej oraz Rozdzielczość.

2. Wyeksportuj wszystkie produkty do pliku .csv.

3. Poprzedź wszystkie istniejące tagi nazwą grupy, w której chcesz je zawrzeć, zachowując następujący format Grupa_Nazwa tagu. W tym przykładzie niektóre tagi wyglądałyby następująco: Marka_Canon, Długość ogniskowej_18 - 55mm oraz Rozdzielczość_12 MP. Po lewej stronie od podkreślenia znajduje się nazwa grupy, a po prawej – tag produktu. Po obu stronach podkreślenia można dodawać spacje.

4. Zapisz swój plik .csv i zaimportuj produkty z powrotem do sklepu. Pamiętaj, aby wybrać opcję Zastąp wszystkie obecne produkty z tym samym uchwytem produktu przy ładowaniu pliku, aby zapobiec tworzeniu duplikatów produktów.

5. Włącz filtrowanie według grupy na stronach kolekcji:

   1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
   2. Kliknij opcję Dostosuj obok szablonu Supply.
   3. Z menu rozwijanego na górze strony lub menu Szablony wybierz Strony kolekcji.
   4. Kliknij sekcję Kolekcja.
   5. W sekcji Filtry produktów w pasku bocznym wybierz opcję Wg grupy.
   6. Kliknij opcję Zapisz.

Uwaga

Jeśli używasz pojedynczych lub podwójnych cudzysłowów bądź ampersandów wewnątrz tagów produktu, filtrowanie grup nie działa w oczekiwany sposób.

Zmień kolejność grup filtrów i tagów

Grupy są uporządkowane alfabetycznie, podobnie jak tagi wymienione wewnątrz grup. Ekspert z programu Shopify Experts może pomóc Ci dostosować kolejność.

Wskazówki dotyczące cen

Poniższe wskazówki pomogą Ci ustawić ceny z wykorzystaniem szablonu Supply.

Wyłącz zaokrąglanie kwot sprzedaży

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź szablon, który chcesz edytować, a następnie kliknij Czynności > Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź szablon, który chcesz edytować, a następnie kliknij Czynności > Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź szablon, który chcesz edytować, a następnie kliknij Czynności > Edytuj kod.

1. Po lewej stronie, w sekcji Zasoby, otwórz timber.scss.liquid.

2. Na dole pliku dodaj następujący kod:

.sale-tag sup {
   display: inline;
   top: 0;
   font-size: 100%;

   &:before {
    content: '.';
   }
 }

1. Kliknij opcję Zapisz.

Wskazówki dotyczące koszyka

Przestrzeganie poniższych wskazówek zapewnia prawidłowe działanie koszyka w Twoim sklepie w przypadku dodania JavaScript do szablonu Supply.

Zmień typ koszyka, tak aby zapewnić działanie zaawansowanego JavaScript

W szablonie Supply dowolny JavaScript dodany do cart.liquid nie jest wykonywany w przypadku koszyków typu szuflada lub okno modalne. Wykonanie zapewnia tylko dołączenie /cart do adresu URL sklepu. Na przykład: http://your.store.url/cart.

Jeśli chcesz dodać dowolną z poniższych funkcji do strony koszyka, musisz ustawić typ koszyka na Stronę:

• kalkulator stawek wysyłki
• wiele walut
• pakowanie prezentów
• walidacja atrybutów koszyka
• selektor dat
• pole wyboru „Akceptuję warunki”.

Kroki:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
2. Kliknij opcję Dostosuj obok Supply.

iPhone

1. W aplikacji Shopify naciśnij Sklep.
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.
4. Obok Supply naciśnij opcję Dostosuj.
5. Naciśnij Edytuj.

Android

1. W aplikacji Shopify naciśnij Sklep.
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.
4. Obok Supply naciśnij opcję Dostosuj.
5. Naciśnij Edytuj.

1. Kliknij opcję Ustawienia szablonu. 2. Kliknij Koszyk. 3. Z listy rozwijanej Typ koszyka wybierz opcję Strona. 4. Kliknij opcję Zapisz.