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

Najlepsze typy obrazów produktów dla szablonu Supply

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ęć jest szczególnie ważna w przypadku zaznaczenia opcji Włącz powiększenie obrazu. Możesz ją zaznaczyć, otwierając stronę produktu w podglądzie edytora szablonów, a następnie klikając Produkt na karcie Sekcje.

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

Zmniejsz nagłówek

Jest kilka sposobów na zmniejszenie górnej sekcji Twojej strony.

Jeśli logo jest za duże, możesz zredukować jego rozmiar, dostosowując jego maksymalną szerokość w ustawieniach szablonu. Zmniejszenie szerokości logo powoduje zmniejszenie jego wysokości, ponieważ Shopify zmniejsza logo, zachowując jego proporcje. Za pomocą edytora szablonów, w sekcji Nagłówek, dostosuj wartość Szerokość logo niestandardowego. Domyślna wartość wyrażona w pikselach wynosi 305. Użyj mniejszej wartości wyrażonej w pikselach, aby zmniejszyć rozmiar logo, a w konsekwencji – wysokość nagłówka.

Logo może zawierać także niewidoczne lub białe piksele, które dodają się do białych znaków nad i pod nim. Możesz użyć na przykład programu Photoshop, aby wyciąć te piksele z obrazu logo. Po przycięciu logo załaduj je ponownie za pomocą edytora szablonów. Przycięcie białych znaków w obrazie logo może znacząco zmniejszyć wysokość nagłówka.

Zmniejsz pokaz slajdów

Użyj obrazów o orientacji poziomej, których szerokość jest większa od wysokości.

Mimo że edytor szablonów zaleca ładowanie obrazów o szerokości 1000 pikseli i wysokości 500 pikseli, możesz użyć mniejszych. Szerokość 1000 pikseli jest zalecana po to, 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:

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:

  • Zmniejszyć linki nawigacji, redukując Rozmiar czcionki menu głównego w Typografii na karcie Ustawienia szablonu.
  • 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.

Częstym błędem jest dodawanie linków z menu głównego do każdej kolekcji. Spróbuj zamiast tego utworzyć listę kolekcji w menu rozwijanym 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.

  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, aby ułatwić klientom ich sortowanie, możesz włączyć podgrupy:

  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 zaznaczyć opcję Zastąp wszystkie obecne produkty z tym samym uchwytem produktu przy ładowaniu pliku, aby zapobiec tworzeniu duplikatów produktów.

  5. Otwórz stronę kolekcji w podglądzie edytora szablonów. Na karcie Sekcje kliknij opcję Kolekcja, a następnie zaznacz opcję Według grupy.

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

  1. Po lewej stronie, w obszarze Zasoby, kliknij link timber.scss.liquid, aby otworzyć arkusz stylów szablonu w edytorze kodu online.

  2. Na dole pliku dodaj:

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

Musisz ustawić typ koszyka na „strona”, jeśli chcesz dodać dowolną z poniższych funkcji do strony koszyka:

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

Aby zmienić typ koszyka na „strona”:

  1. Kliknij Ustawienia szablonu.

  2. Kliknij opcję Koszyk.

  3. Z listy rozwijanej Typ koszyka wybierz opcję Strona.

  4. Kliknij opcję Zapisz.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo