Wskazówki dotyczące szablonu Brooklyn

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

Wskazówki dotyczące nawigacji

Dodaj menu rozwijane

Aby dodać menu rozwijane do menu głównego, należy utworzyć menu na stronie Nawigacja. Aby dowiedzieć się więcej, zapoznaj się z informacjami dostępnymi w sekcji Skonfiguruj menu rozwijane w sklepie online.

Menu główne w sklepie online. Wskaźnik myszy znajduje się nad linkiem „Katalog”, którego kliknięcie powoduje wyświetlenie menu rozwijanego odsyłającego do takich kolekcji jak „Salon” i „Sypialnia”.

Zamiana menu głównego w menu paska bocznego

Jeśli menu główne zajmuje dużo miejsca, zmienia się w menu paska bocznego, które otwiera się po kliknięciu przycisku w sekcji nagłówka:

Menu paska bocznego po lewej stronie sklepu online. Linki menu głównego, takie jak „Strona główna” i „Katalog”, są wyświetlane w menu paska bocznego.

Możesz zapobiec zamianie menu głównego w menu paska bocznego, podejmując następujące działania:

  • Nie dodawaj więcej niż czterech-pięciu linków do menu głównego.
  • Używaj wąskiej czcionki w linkach menu głównego. Możesz zmienić czcionkę tekstu akcentowanego w ustawieniach typografii.
  • Twórz pozycje menu o ograniczonej liczbie znaków. Możesz na przykład użyć skrótowej formy „FAQ” zamiast „Często zadawane pytania” lub „Kontakt” zamiast „Skontaktuj się z nami”.

Wskazówki dotyczące obrazu

Najlepsze typy obrazów produktów dla szablonu Brooklyn

  • Ponieważ obrazy o wysokiej rozdzielczości wyglądają na lepiej dopracowane i bardziej profesjonalne, obrazy produktów powinny mieć co najmniej 1024 x 1024 piksele. Najlepszy kształt dla obrazów produktów to kwadratowy.

  • Najlepiej, aby obrazy miały jednolity kolor tła. Kolor jednolity to kolor pełny, bez cieniowania i rozjaśniania. Wszystkie Twoje obrazy powinny mieć ten sam kolor tła.

  • Aby usunąć ramkę okalającą obrazy produktów, ustaw kolor tła produktu na transparentny w ustawieniach koloru:

Dwie oferty produktów są wyświetlane z białym tłem. Tło sklepu online jest także białe, a wokół obrazów produktów nie ma ramek.

Najlepszy rozmiar dla obrazów w pokazie slajdów

Oba slajdy z obrazami wyświetlane w sklepie demonstracyjnym opartym na szablonie Brooklyn mają rozmiar 1200 x 800 pikseli. Zaleca się, aby wszystkie slajdy z obrazami miały identyczny rozmiar.

Przycinanie obrazów na małych ekranach

Na małych urządzeniach slajdy z obrazami wypełniają ekran od krawędzi górnej po dolną. Rozmiar slajdów jest zmieniany w taki sposób, by ich wysokość odpowiadała wysokości ekranu urządzenia. Aby wypełnić ekran bez zniekształcania obrazów, slajdy są przycinane po lewej i prawej stronie.

Na dużych ekranach rozmiary slajdów z obrazami są zmieniane w taki sposób, aby ich szerokość pasowała do szerokości okna przeglądarki. Aby wypełnić okno bez zniekształcania obrazów, slajdy są przycinane na dole.

Poniższy przykład pokazuje ten sam sklep online w wersji dla pulpitów i w wersji mobilnej:

W wersji pokazu slajdów dla pulpitu wyświetlany jest obraz, którego szerokość jest większa od wysokości. W wersji mobilnej ten sam obraz ma tę samą wysokość, ale oba rozmiary obrazu zostały przycięte w taki sposób, że pasuje on do wąskiego ekranu.

Wyświetl obraz od krawędzi do krawędzi dla kolekcji

Aby wyświetlany był obraz od krawędzi do krawędzi, kolekcja musi zawierać wyróżniony obraz.

W sklepie demonstracyjnym opartym na szablonie Brooklyn możesz zobaczyć, jak wygląda obraz kolekcji od krawędzi do krawędzi. Obraz kolekcji wyświetlany na górze ma rozmiar 1405 x 800 pikseli.

W wersji pokazu slajdów dla pulpitu wyświetlany jest obraz, którego szerokość jest większa od wysokości.

W wersji mobilnej ten sam obraz ma tę samą wysokość, ale oba rozmiary obrazu zostały przycięte w taki sposób, że pasuje on do wąskiego ekranu.

Ustaw obraz dla postów na blogu

Pierwszy obraz w artykule na blogu jest wykorzystywany jako wyróżniony obraz strony blogu. O tym, jak dodać obraz do artykułu na blogu, możesz dowiedzieć się z sekcji Pisanie postów na blogu.

Wskazówki dotyczące produktów

Dodawaj znaczki wyprzedaży do produktów

Możesz dodawać znaczki wyprzedaży do produktu, ustawiając cenę do porównania na wyższą od ceny regularnej. Znaczek pojawi się nad obrazem danego produktu na stronach kolekcji.

Ustal, które produkty mają być wyświetlane jako większe na stronach kolekcji

Jeśli ustawisz strony kolekcji tak, aby pokazywały produkty w stylu kolażu, obrazy niektórych produktów będą wyświetlane w dużych rozmiarach, a innych – w małych. Rozmiar obrazu zależy od kolejności produktów w ich kolekcji. Możesz zmieniać kolejność produktów na stronie Kolekcja w panelu administracyjnym. Kliknij kolekcję, którą chcesz edytować, a następnie w obszarze Produkty wybierz opcję Ręcznie z menu rozwijanego Sortuj. Następnie przeciągaj i upuszczaj produkty w celu określenia kolejności, w jakiej mają pojawiać się w sklepie online.

Strona Kolekcje w panelu administracyjnym Shopify.

Na każde sześć produktów obrazy pierwszego i ostatniego z nich są wyświetlane w dużych rozmiarach. Przykładowo, pierwszy, szósty, siódmy, dwunasty, trzynasty i osiemnasty obraz w kolekcji jest wyświetlany w dużych rozmiarach:

Strona kolekcji wyświetlająca produkty w stylu kolażu. Na produktach wyświetlane są numery odzwierciedlające kolejność produktów w relacji do rozmiaru obrazu.

Aby wyświetlić siatkę obrazów produktów w tym samym rozmiarze, ustaw kolekcje tak, aby produkty były wyświetlane w stylu siatki.

Animacja przewijania podczas wyboru wariantu

Jeśli opis produktu jest wystarczająco krótki, aby zmieścić się na ekranie bez przewijania, w przypadku wybrania wariantu, dla którego dostępny jest obraz, na stronie produktu pojawi się animacja przewijania. Jeśli opis jest zbyt długi, aby zmieścić się na ekranie bez przewijania w dół, to górny obraz jest po prostu zastępowany obrazem wariantu i nie występuje animacja przewijania.

Jeśli chcesz wyświetlić animację przewijania, upewnij się, że Twoje opisy produktów są krótkie.

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

Wypróbuj za darmo