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. Pasek narzędzi edytora szablonów jest podzielony na Sekcje i Ustawienia szablonów.

Pasek narzędzi edytora szablonów pokazujący Sekcje i Ustawienia szablonów

Możesz użyć sekcji do modyfikowania zawartości i układu różnych stron Twojego sklepu. Możesz użyć ustawień szablonu do personalizacji czcionek i kolorów Twojego sklepu i dokonywania zmian w linkach do Twoich mediów społecznościowych i ustawień realizacji zakupu.

Sections are customizable blocks of content that determine the layout of different pages on your online store.

  • Home sections include features such as a slideshow or a newsletter signup that you can add, re-arrange, or remove. You can have up to 25 sections on your home page.

  • Each type of page has its own sections. For example, the product page section determines the layout of each product page on your online store.

  • Page sections are always in specific places on your online store. You can customize them, but you can't re-arrange or remove them.

  • Each theme includes fixed sections, such as the header and footer, that show on every page of your online store.

You can learn about 's unique selection of sections and how to customize them to suit your business.

Pop zawiera następujące sekcje statyczne:

  • Logo i menu
  • Pasek ogłoszenia
  • 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.

Sekcja newslettera na stronie internetowej. Dostępne jest pole, w którym klienci mogą wprowadzić adres e-mail, oraz przycisk o nazwie „Subskrybuj”.

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

  1. Wyszukaj Pop i kliknij Dostosuj.

  2. Kliknij opcję Sekcje.

  3. Kliknij opcję Dodaj sekcję > Newsletter.

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

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

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

  7. 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. Wyszukaj Pop i kliknij Dostosuj.

  2. Kliknij opcję Sekcje.

  3. Kliknij opcję Dodaj sekcję > Film.

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

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

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

Aby dodać niestandardowy kod HTML do Twojej strony głównej:

  1. Wyszukaj Pop i kliknij Dostosuj.

  2. Kliknij opcję Sekcje.

  3. Kliknij opcję Dodaj sekcję.

  4. W obszarze Układ zaawansowany kliknij opcjęNiestandardowy kod HTML > Dodaj.

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

  6. 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 opcję Dostosuj obok ****.

  2. Kliknij Ustawienia szablonu.

  3. Kliknij Kolory.

  4. Dla każdego typu zawartości kliknij próbnik kolorów w celu skorzystania z selektora kolorów:

    Selektor kolorów w edytorze szablonów

- W obszarze Ostatnio wybrane wyświetlane są kolory ostatnio wybrane dla Twojego szablonu. - Obszar Obecnie używane pokazuje kolory, których obecnie używasz w innych częściach swojego szablonu.

Aby ustawić kolor jako transparentny, kliknij opcję Brak.

  1. Kliknij opcję Zapisz.

Typografia

Możesz ustawić styl i rozmiar czcionki dla tekstu w swoim sklepie online.

Dostosuj swoje ustawienia typografii

  1. Kliknij opcję Dostosuj obok ****.

  2. Kliknij Ustawienia szablonu.

  3. Kliknij przycisk Typografia.

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

    Przycisk 'Zmień' w selektorze czcionek

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

    Aby zobaczyć wszystkie dostępne czcionki, wyświetl Bibliotekę czcionek Shopify.

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

  7. Aby zmienić styl czcionki na inny, np. pogrubienie lub kursywę, kliknij opcję Zwykły. Następnie kliknij styl, którego chcesz używać, oraz opcję Wybierz:

    Wybór grubości czcionek dostępnych w selektorze czcionek

  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. Wyszukaj Pop i kliknij Dostosuj.

  2. Kliknij Ustawienia szablonu.

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

  4. 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 Eksploruj darmowe obrazy.

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

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

Powiększ swoje logo na urządzeniach mobilnych

Po pierwsze, aby Twoje logo było większe w dowolnym układzie, niezwykle ważne jest przycięcie wszystkich przestrzeni ujemnych lub pikseli przezroczystych otaczających grafikę logo, zanim załadujesz jej plik do Shopify.

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

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

Oto nieprzycięte logo zastosowane w szablonie Pop:

Oto przycięte logo zastosowane w szablonie Pop:

Wiedząc, że logo nie zmniejszy się ze względu na przestrzeń ujemną w nim zawartą, możesz dostosować wysokość swojego mobilnego nagłówka, aby zapewnić swojemu logo przestrzeń. W rezultacie logo powiększy się.

Przejdź do edytora szablonów i w sekcji Nagłówek i nawigacja zwiększ wartość „Rozmiar > Wysokość menu mobilnego”.

Powiększ swoje logo na pasku bocznym

Po pierwsze, aby Twoje logo było większe w dowolnym układzie, niezwykle ważne jest przycięcie wszystkich przestrzeni ujemnych lub pikseli przezroczystych otaczających grafikę logo, zanim załadujesz jej plik do Shopify.

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

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

Oto logo z przestrzeniami ujemnymi po załadowaniu do szablonu Pop:

Oto przycięte logo zastosowane w szablonie Pop:

Wiedząc, że logo nie zmniejszy się ze względu na przestrzeń ujemną w nim zawartą, możesz dostosować szerokość swojego paska bocznego, aby zapewnić swojemu logo przestrzeń. W rezultacie logo powiększy się.

Przejdź do edytora szablonów i w sekcji Nagłówek i nawigacja zwiększ wartość „Rozmiar > Szerokość menu pulpitu”.

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