Pop

Minimalistyczny szablon zaprojektowany z myślą o zapewnieniu dostępności zawartości. Szablon Pop jest idealny dla sklepów z poziomem zapasów od małego do średniego. Nawigacja w szablonie odbywa się za pomocą dużego paska bocznego, który zapewnia łatwość dostępu do zawartości.

Przykładowy sklep online korzystający z szablonu Pop

Edytor szablonów

Użyj edytora szablonów, aby dostosować swój szablon. Korzystając z edytora szablonów, możesz edytować zawartość, która pojawia się w Twoim sklepie, dodając i edytując sekcje szablonu. Możesz również zmienić wygląd sklepu, jego działanie i funkcjonalność, korzystając z ustawień szablonu.

Zawartość szablonu tworzona jest za pomocą sekcji. Sekcje to konfigurowalne bloki zawartości, które określają układ i wygląd różnych stron w Twoim sklepie online.

Sekcje statyczne to sekcje, które pojawiają się we wcześniej ustalonych lokalizacjach w Twoim sklepie online. Tych sekcji nie można usunąć ani zmienić ich układu. Sekcje statyczne mogą zawierać nagłówki, stopki, sekcje nawigacji lub sekcje zawartości na stronach takich jak strony produktów i strony kolekcji. Na przykład sekcja Produkt określa wygląd każdej strony produktu w sklepie online.

Sekcje dynamiczne to opcjonalne sekcje, których można używać w celu dostosowania układu strony głównej. Na stronie głównej Twojego sklepu możesz dodawać sekcje dynamiczne, zmieniać ich rozmieszczenie oraz je usuwać, tworząc w ten sposób układ strony. Na stronie głównej możesz mieć maksymalnie 25 sekcji dynamicznych.

Możesz zapoznać się z unikalnym wyborem sekcji dla Pop i dowiedzieć się, jak je dostosować do potrzeb swojej firmy.

Pop zawiera następujące sekcje statyczne:

  • Logo i menu
  • Pasek ogłoszeń
  • Stopka
  • Strony produktu
  • Strony kolekcji
  • Strona listy kolekcji
  • Artykuł

Sekcje dynamiczne

Możesz dodawać, zmieniać rozmieszczenie i usuwać sekcje dynamiczne w celu dostosowania układu strony głównej. Każdy szablon ma unikalny zestaw sekcji dynamicznych do wyboru.

Pop zawiera następujące sekcje dynamiczne:

  • Posty na blogu
  • Lista kolekcji
  • Polecana kolekcja
  • Obraz z tekstem
  • Pokaz slajdów
  • Polecany produkt
  • Newsletter
  • Mapa
  • Tekst sformatowany
  • Film
  • Niestandardowy HTML

Strony produktu

W sekcji Strona produktu możesz dodać lub usunąć następujące elementy:

  • Marka lub dostawca produktu
  • Powiększenie obrazu
  • Powiązane produkty
  • Selektor ilości
  • Dynamiczny przycisk realizacji zakupu
  • Ikony udostępniania w mediach społecznościowych

Aby edytować ustawienia dla stron produktu:

  1. W menu rozwijanym górnego paska wybierz opcję Strony produktów.

  2. Kliknij opcję Sekcje.

  3. Kliknij opcję Strona produktu.

  4. Aby wyświetlić markę lub dostawcę produktu, zaznacz opcję Pokaż dostawcę produktu. Aby wyświetlana była marka lub dostawca, do produktu należy dodać dostawcę.

  5. Aby umożliwić klientom powiększanie obrazu produktu poprzez najechanie wskaźnikiem myszy, zaznacz opcję Włącz powiększenie obrazu.

  6. Aby wyświetlić wybór powiązanych produktów na dole strony, zaznacz opcję Pokaż powiązane produkty. Wyświetlane powiązane produkty determinuje kolekcja, do której należy produkt. Aby wyświetlić powiązane produkty, należy utworzyć kolekcję dla produktu lub dodać go do istniejącej kolekcji. Jeśli produkt nie jest częścią kolekcji, powiązane produkty nie zostaną wyświetlone.

  7. Aby wyświetlić selektor ilości, zaznacz opcję Pokaż selektor ilości.

  8. Aby wyświetlić dynamiczny przycisk realizacji zakupu, zaznacz opcję Pokaż dynamiczny przycisk realizacji zakupu.

  9. Aby wyświetlić ikony udostępniania w mediach społecznościowych, zaznacz opcję Włącz udostępnianie produktu.

  10. Kliknij opcję Zapisz.

Newsletter

Możesz dodać możliwość rejestracji do newslettera do swojej strony głównej. Pozwoli Ci to gromadzić adresy e-mail klientów dla celów kampanii e-mail marketingu. Dowiedz się więcej na temat e-mail marketingu na blogu Shopify.

Aby dodać możliwość rejestracji do newslettera do swojej strony głównej:

  1. Kliknij opcję Sekcje.

  2. Kliknij opcję Dodaj sekcję > Newsletter.

  3. Wprowadź nagłówek rejestracji do newslettera w polu Nagłówek. Domyślnym nagłówkiem jest „Subskrybuj nasz newsletter”.

  4. Wprowadź nagłówek podrzędny dla rejestracji do newslettera w polu Tekst podrzędny. Domyślny tekst to „Promocje, nowe produkty i wyprzedaże. Bezpośrednio do Twojej skrzynki odbiorczej”.

  5. Ustaw kolor tła dla sekcji rejestracji do newslettera, klikając próbnik Koloru tła i wybierając kolor.

  6. Kliknij opcję Zapisz.

Film

Możesz dodać do swojej strony głównej film hostowany w serwisie YouTube lub Vimeo. Filmy mogą przyciągnąć uwagę klientów i zaciekawić ich ofertą Twojej firmy.

Aby dodać film do swojej strony głównej:

  1. Kliknij opcję Sekcje.

  2. Kliknij opcję Dodaj sekcję > Film.

  3. Wprowadź nagłówek dla filmu w polu Nagłówek.

  4. Wprowadź link do udostępniania filmu w polu Link filmu.

    Link do udostępniania filmu z serwisu YouTube wygląda następująco: https://youtu.be/OTJXAUZY9t0. Możesz dowiedzieć się, jak skopiować link udostępniający film z YouTube, zapoznając się z treścią tego artykułu Pomocy YouTube.

    Link do udostępniania filmu z serwisu Vimeo wygląda następująco: https://vimeo.com/281332510. Możesz dowiedzieć się, jak skopiować link udostępniający film z Vimeo, zapoznając się z treścią tego artykułu Centrum pomocy Vimeo.

  5. Kliknij opcję Zapisz.

Niestandardowy HTML

W sekcji Niestandardowy kod HTML możesz użyć kodu HTML do tworzenia niestandardowych treści dla swojej strony głównej. Możesz na przykład użyć kodu HTML do formatowania bloków tekstowych, tworzenia tabel lub osadzania zawartości z zewnętrznych stron internetowych.

Dodaj niestandardową sekcję HTML do strony głównej

  1. Kliknij opcję Dodaj sekcję.

  2. Kliknij opcję Niestandardowy kod HTML, a następnie Wybierz.

  3. Kliknij opcję Niestandardowy kod HTML i wprowadź kod HTML, który chcesz dodać do swojej strony głównej.

  4. Kliknij opcję Zapisz.

Ustawienia szablonu Możesz użyć ustawień szablonu do konfiguracji kolorów i typografii w Twoim sklepie online. Możesz także skonfigurować linki do swoich kont w mediach społecznościowych, edytować ustawienia koszyka oraz dodawać Favicon.

Pop zawiera następujące ustawienia szablonu:

  • Kolory
  • Typografia
  • Ikona Favicon
  • Strona koszyka
  • Media społecznościowe
  • Realizacja zakupu

Kolory

Możesz wybrać kolory dla różnych części swojego sklepu online.

Dostosuj ustawienia kolorów

  1. Kliknij Ustawienia szablonu.
  2. Kliknij Kolory.
  3. Aby otworzyć próbnik kolorów, kliknij próbkę koloru dla typu zawartości, który chcesz zmienić. W sekcji Ostatnio wybrane pokazane są kolory, które wybrałeś(-aś) ostatnio dla Twojego szablonu. W sekcji Obecnie używane pokazane są kolory, których używasz obecnie w innych częściach swojego szablonu.

    Aby ustawić konkretny szesnastkowy kod koloru, kliknij pole tekstowe i wprowadź kolor.

    Aby ustawić kolor na transparentny, usuń z pola tekstowego wartość szesnastkowego kodu.

  4. Kliknij opcję Zapisz.

Typografia

Możesz ustawić styl i rozmiar czcionki dla tekstu w sklepie online. Możesz wybrać czcionkę systemową lub niestandardową.

Zaleca się użycie w sklepie czcionek systemowych. Korzystanie z czcionek systemowych pozwala uniknąć pobierania nowych czcionek na komputer klienta, co może negatywnie wpłynąć na szybkość ładowania sklepu. Czcionka wyświetlana na komputerze klienta zależy od jego systemu operacyjnego. Dowiedz się więcej o czcionkach systemowych.

Dostosuj swoje ustawienia typografii

  1. Kliknij Ustawienia szablonu.

  2. Kliknij przycisk Typografia.

  3. Dla każdego typu tekstu kliknij opcję Zmień, aby użyć selektora czcionek.

  4. Przeglądaj czcionki, używając pola wyszukiwania lub klikając opcję Załaduj więcej.

    Aby zobaczyć wszystkie dostępne czcionki, zajrzyj do Biblioteki czcionek Shopify.

  5. Kliknij nazwę czcionki, której chcesz używać.

  6. Aby zmienić styl czcionki, kliknij nazwę bieżącego stylu czcionki, a następnie wybierz nowy styl czcionki z menu rozwijanego.

  7. Kliknij Wybierz.

  8. Kliknij opcję Zapisz.

Media społecznościowe

Możesz dodawać przyciski udostępniania w mediach społecznościowych dla swoich produktów i postów na blogu oraz linki do swoich kont w mediach społecznościowych.

Aby dostosować ustawienia mediów społecznościowych:

  1. Kliknij opcję Ustawienia szablonu.

  2. Kliknij opcję Media społecznościowe.

  3. Aby załadować obraz do udostępniania w mediach społecznościowych, w obszarze Obraz do udostępniania w mediach społecznościowych kliknij opcję Wybierz obraz lub Przeglądaj darmowe obrazy.

  4. Aby dodać linki do kont mediów społecznościowych, w obszarze Konta mediów społecznościowych wprowadź linki do swoich kont w podanych polach. Wprowadź pełne linki, np. https://instagram.com/shopify lub https://twitter.com/shopify.

    Linki do Twoich kont w mediach społecznościowych są wyświetlane w stopce sklepu online.

  5. Aby dodać przyciski udostępniania w mediach społecznościowych do produktów i postów na blogu, w obszarze Opcje udostępniania w mediach społecznościowych zaznacz dowolne lub wszystkie pola wyboru.

    Możesz dodać następujące przyciski udostępniania:

- Udostępnij na Facebooku - Tweetuj na Twitterze - Przypnij do tablicy Pinterest (niedostępne dla udostępniania posta na blogu)

  1. Kliknij opcję Zapisz.

Dodaj menu podrzędne do paska bocznego

Aby dodać menu rozwijane do menu głównego, należy utworzyć menu na stronie Nawigacja. Ten artykuł przeprowadzi Cię przez ten proces.

Optymalny rozmiar logo sklepu

W szablonie Pop najlepiej będzie wyglądać proporcjonalne logo kompaktowe, ponieważ jest ono w nim wyświetlane na pasku bocznym. Logo w stylu baneru, o dużej szerokości i stosunkowo małej wysokości nie będzie wyglądać dobrze w tym szablonie.

Maksymalna szerokość Twojego logo powinna wynosić 450 pikseli, a maksymalna wysokość - 200 pikseli. Rozmiar załadowanego pliku logo zostanie zmieniony, tak aby spełniał te ograniczenia.

Idealny format to PNG.

Zredukuj odstępy wokół logo paska bocznego

Niezwykle ważne jest, aby przed usunięciem wszelkich wypełnień dodanych przez szablon Pop nad i pod logo, przyciąć wszelkie wypełnienia, które mogą być zawarte w samym obrazie. Musisz przyciąć przestrzeń ujemną lub piksele przezroczyste otaczające Twoją grafikę logo, zanim załadujesz jej plik do Shopify.

Oto logo z dużą ilością przestrzeni ujemnych wokół:

To jest to samo logo po przycięciu — przestrzenie ujemne zostały od niego odcięte:

Oto nieprzycięte logo zastosowane w szablonie Pop:

Oto przycięte logo zastosowane w szablonie Pop:

Po załadowaniu przyciętego logo do zasobów szablonu można dostosować szerokość paska bocznego, przechodząc do edytora szablonów. W sekcji Nagłówek i nawigacja wyedytuj wartość „Rozmiar > Szerokość menu pulpitu” stosownie do potrzeb.

Ostatecznym, nieobjętym wsparciem środkiem umożliwiającym redukcję wypełnienia nad logo i pod nim jest wykonanie następujących kroków:

  1. W obszarze Zasoby kliknij timber.scss.liquid, aby otworzyć arkusz stylów w edytorze kodów online, lub przejdź do tego adresu URL.

  2. Na dole pliku dodaj:

```sass {% comment %} Wynik poniższej funkcji zapytania o multimedia: @media screen and (min-width: 1025px) { ... } Pasek boczny jest wyświetlany tylko w przypadku, gdy szerokość > 1025 pikseli. {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. Zapisz plik.

Edytuj ustawienia dla strony produktu

W sekcji Strona produktu możesz dodać lub usunąć następujące elementy:

  • Marka lub dostawca produktu
  • Powiększenie obrazu
  • Powiązane produkty
  • Selektor ilości
  • Dynamiczny przycisk realizacji zakupu
  • Ikony udostępniania w mediach społecznościowych

Aby edytować ustawienia dla stron produktu:

  1. W menu rozwijanym górnego paska wybierz opcję Strony produktów.

  2. Kliknij opcję Sekcje.

  3. Kliknij opcję Strona produktu.

  4. Aby wyświetlić markę lub dostawcę produktu, zaznacz opcję Pokaż dostawcę produktu. Aby wyświetlana była marka lub dostawca, do produktu należy dodać dostawcę.

  5. Aby umożliwić klientom powiększanie obrazu produktu poprzez najechanie wskaźnikiem myszy, zaznacz opcję Włącz powiększenie obrazu.

  6. Aby wyświetlić wybór powiązanych produktów na dole strony, zaznacz opcję Pokaż powiązane produkty. Wyświetlane powiązane produkty determinuje kolekcja, do której należy produkt. Aby wyświetlić powiązane produkty, należy utworzyć kolekcję dla produktu lub dodać go do istniejącej kolekcji. Jeśli produkt nie jest częścią kolekcji, powiązane produkty nie zostaną wyświetlone.

  7. Aby wyświetlić selektor ilości, zaznacz opcję Pokaż selektor ilości.

  8. Aby wyświetlić dynamiczny przycisk realizacji zakupu, zaznacz opcję Pokaż dynamiczny przycisk realizacji zakupu.

  9. Aby wyświetlić ikony udostępniania w mediach społecznościowych, zaznacz opcję Włącz udostępnianie produktu.

  10. Kliknij opcję Zapisz.

Najlepsze typy obrazów produktów dla szablonu Pop

Zdjęcia o wysokiej rozdzielczości wyglądają na lepiej dopracowane i bardziej profesjonalne w szablonie Pop, 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 będą automatycznie zmniejszane, więc im wyższa jakość, tym lepiej.

Zdjęcia o wysokiej rozdzielczości będą miały szczególnie duże znaczenie, jeśli używasz funkcji Powiększenie obrazu, którą możesz włączyć w edytorze szablonów w sekcji Strony produktów.

Idealnie byłoby, gdyby wszystkie prezentowane obrazy produktów miały ten sam stosunek szerokości do wysokości – wtedy będą wyglądać najlepiej na stronach kolekcji.

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

Wypróbuj za darmo