Pomoc
Zaloguj

Dostosowywanie ustawień szablonu

Możesz dostosować ogólne ustawienia sklepu online, takie jak typografia, kolory, linki do mediów społecznościowych i strona koszyka, w sekcji Ustawienia szablonu w menu paska bocznego edytora szablonów. Zmiany wprowadzone w sekcji Ustawienia szablonu dotyczą całego sklepu online.

Sekcje i bloki mają również indywidualne ustawienia, za pomocą których można dostosować poszczególne sekcje szablonu. Dowiedz się więcej o sekcjach i blokach.

Na tej stronie

Do sklepu online możesz dodać logo swojej firmy. Twoje logo będzie wyświetlane w następujących miejscach:

  • w nagłówku na wszystkich stronach
  • na stronie hasła

Dostosuj logo

Obrazy logo mają maksymalną szerokość 300 pikseli.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij opcję Logo.

  5. W obszarze Logo dodaj obraz lub użyj darmowego obrazu:

    • Aby dodać obraz, kliknij przycisk Wybierz obraz, a następnie dodaj nowy lub istniejący obraz:
      • Aby użyć obrazu, który został już załadowany do panelu administracyjnego Shopify, wybierz obraz, a następnie kliknij przycisk Gotowe.
      • Aby użyć obrazu z komputera, kliknij przycisk Dodaj obrazy. Wybierz i dodaj obraz, a następnie kliknij przycisk Gotowe.
    • Aby użyć darmowego obrazu, kliknij przycisk Przeglądaj darmowe obrazy. Znajdź obraz, kliknij go, aby go wybrać, a następnie kliknij przycisk Wybierz.

  6. Opcjonalnie: Dodaj tekst alternatywny do obrazu logo:

    1. W obszarze Logo kliknij przycisk Edytuj.
    2. W polu Tekst alternatywny wprowadź krótki opis obrazu.
    3. Kliknij przycisk Zapisz.

  7. Opcjonalnie: W obszarze Szerokość logo na komputerze stacjonarnym użyj suwaka zakresu, aby dostosować szerokość logo w pikselach.

  8. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij opcję Logo.

  7. W obszarze Logo dodaj obraz lub użyj darmowego obrazu:

    • Aby dodać obraz, naciśnij przycisk Wybierz obraz, a następnie dodaj nowy lub istniejący obraz:
      • Aby użyć obrazu, który został już załadowany do panelu administracyjnego Shopify, wybierz obraz, a następnie naciśnij przycisk Gotowe.
      • Aby użyć obrazu z urządzenia, naciśnij przycisk Dodaj obrazy. Wybierz i dodaj obraz z urządzenia, naciśnij obraz, aby go wybrać, a następnie naciśnij przycisk Gotowe.
    • Aby użyć darmowego obrazu, naciśnij przycisk Przeglądaj darmowe obrazy. Znajdź obraz, naciśnij go, aby go wybrać, a następnie naciśnij przycisk Gotowe.

  8. Opcjonalnie: Dodaj tekst alternatywny do obrazu logo:

    1. W obszarze Logo naciśnij przycisk Edytuj.
    2. W polu Tekst alternatywny wprowadź krótki opis obrazu.
    3. Naciśnij przycisk Zapisz lub ✓.

  9. Opcjonalnie: W obszarze Szerokość logo na komputerze stacjonarnym użyj suwaka zakresu, aby dostosować szerokość logo w pikselach.

  10. Naciśnij przycisk Zapisz lub ✓.

Dodaj ikonę Favicon

Możesz dodać ikonę ulubionych lub ikonę Favicon, aby wspomóc budowanie świadomości marki sklepu online. Ikona Favicon jest wyświetlana w następujących miejscach:

  • na karcie przeglądarki internetowej
  • w historii przeglądarki internetowej
  • ikony na pulpicie
  • obok nazwy sklepu online po dodaniu strony internetowej do zakładek

Dowiedz się więcej o ikonach Favicon.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, do którego chcesz dodać ikonę Favicon, a następnie kliknij opcję Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. W zależności od wersji szablonu kliknij opcję Logo lub Ikona Favicon.

  5. W sekcji Obraz ikony Favicon kliknij opcję Wybierz obraz, a następnie dodaj nowy lub istniejący obraz:

    • Aby wybrać obraz, który został już załadowany do panelu administracyjnego Shopify, wyszukaj go lub znajdź, a następnie zaznacz za pomocą pola wyboru.
    • Aby wybrać obraz z komputera, kliknij opcję Dodaj obrazy, otwórz go, a następnie zaznacz za pomocą pola wyboru.

  6. Kliknij Gotowe.

  7. Opcjonalnie: Dodaj alternatywny tekst do obrazu ikony Favicon:

    1. W sekcji Obraz ikony Favicon kliknij opcję Edytuj.
    2. W polu Tekst alternatywny wprowadź krótki opis obrazu.
    3. Kliknij przycisk Zapisz.

  8. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, do którego chcesz dodać ikonę Favicon, a następnie naciśnij opcję Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. W zależności od wersji szablonu naciśnij opcję Logo lub Ikona Favicon.

  7. W sekcji Obraz ikony Favicon naciśnij opcję Wybierz obraz, a następnie dodaj nowy lub istniejący obraz:

    • Aby wybrać obraz, który został już załadowany do panelu administracyjnego Shopify, wyszukaj go lub znajdź, a następnie zaznacz za pomocą pola wyboru.
    • Aby wybrać obraz z urządzenia, naciśnij opcję Dodaj obrazy, otwórz go, a następnie zaznacz za pomocą pola wyboru.

  8. Naciśnij Gotowe.

  9. Dodaj alternatywny tekst do obrazu ikony Favicon:

    1. W sekcji Obraz ikony Favicon naciśnij opcję Edytuj.
    2. W polu Tekst alternatywny wprowadź krótki opis obrazu.
    3. Naciśnij przycisk Zapisz lub ✓.

  10. Naciśnij przycisk Zapisz lub ✓.

Kolory

Możesz zdefiniować różne schematy kolorów w ustawieniach szablonu i zastosować je w różnych sekcjach sklepu online za pomocą selektora schematów kolorów. Schemat kolorów to zestaw kolorów. W szablonie zastosowano zestaw domyślnych schematów kolorów, które można zmienić w dowolnym momencie w edytorze szablonów. Możesz dodać kolory swojej marki, aby zapewnić spójne stosowanie palety kolorów w całym sklepie online.

Szablony stron nie mają indywidualnych ustawień kolorów, dzięki czemu projekt sklepu online jest spójny w całej witrynie internetowej. Szablon strony jest traktowany jako strona główna lub główna zawartość sklepu. Stosowanie różnych schematów kolorów w sklepie może prowadzić do złych doświadczeń użytkowników i spowodować, że klienci opuszczą sklep bez zakupu produktów.

Możesz utworzyć i dostosować do 21 unikalnych schematów kolorów i zastosować je w różnych sekcjach sklepu online.

Schematy kolorów

Schematy kolorów to ustawienie szablonu, które grupuje elementy i odpowiadające im kolory w sposób wizualnie reprezentatywny. Możesz przypisać różne kolory do różnych elementów w ramach spójnego schematu kolorów, który można następnie zastosować w całym szablonie, tam gdzie dostępny jest selektor schematów kolorów. Możesz mieć do 21 schematów kolorów. Możesz również zobaczyć podgląd kolorów w podglądzie schematu.

Lista różnych ustawień, które można zastosować do schematów kolorów w edytorze szablonów.
UstawienieOpis
TłoKolor jest stosowany do tła niektórych sekcji i do tła przycisku konturowego.
Gradient tłaGradient kolorów jest stosowany do tła niektórych sekcji. Gradienty tła zastępują tło tam, gdzie jest to możliwe.
TekstKolor jest stosowany do tekstu sekcji lub bloku.
Tło przycisku wypełnionegoKolor jest stosowany do tła przycisku podstawowego.
Etykieta przycisku wypełnionegoKolor jest stosowany do tekstu przycisku podstawowego.
Przycisk konturowyKolor jest stosowany do tekstu i obramowania przycisku pomocniczego.
CieńKolor jest stosowany do cieni.

Zarządzanie schematem kolorów

Schemat kolorów i opcje kolorów sklepu są ustawiane w ustawieniach szablonu. W przypadku jednolitych kolorów użyj selektora kolorów, aby wybrać nowy kolor, lub wprowadź wartość koloru w polu tekstowym. Pole koloru akceptuje następujące nazwy i wartości kolorów:

  • Nazwy kolorów, takie jak red, black czy blue.
  • Kody kolorów RGB.
  • Heksadecymalne wartości kolorów.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Kliknij opcję Edytuj szablon obok szablonu, który chcesz dostosować.

  3. Kliknij ikonę ustawienia, a następnie kliknij opcję Kolory.

  4. W sekcji Schematy kliknij istniejący schemat lub kliknij opcję Dodaj schemat, aby dodać nowy schemat kolorów.

  5. Kliknij próbkę koloru dla typu treści, którego kolor chcesz zmienić.

  6. Aby ustawić kolor, wprowadź heksadecymalny kod koloru lub wybierz kolor z selektora kolorów. Aby ustawić kolor jako przezroczysty, usuń kod heksadecymalny z pola tekstowego.

  7. Kliknij przycisk Zapisz.

Stosowanie schematu kolorów

Po zdefiniowaniu schematu kolorów w ustawieniach szablonu możesz przypisać schemat kolorów za pomocą selektora schematów kolorów w sekcjach i blokach szablonu. Selektor schematów kolorów jest dostępny tylko w niektórych sekcjach, blokach i ogólnych ustawieniach szablonu.

Selektor schematów kolorów

Gradienty

W niektórych szablonach można skonfigurować gradient kolorów, aby uzyskać wizualnie interesujące opcje tła. Ustawienie color_background służy do dostosowania właściwości tła CSS.

Selektor gradientu umożliwia wybór kolorów, stylu gradientu, kąta, pozycji i krycia gradientu. Opcje wybrane w selektorze gradientu są wyświetlane w czasie rzeczywistym w edytorze szablonów. Możesz również utworzyć tło gradientowe za pomocą kodu CSS, który zawiera narzędzie do sprawdzania poprawności kodu.

Konfiguracja gradientów

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Kliknij opcję Edytuj szablon obok szablonu, który chcesz dostosować.

  3. Kliknij ikonę ustawienia, a następnie kliknij opcję Kolory.

  4. W sekcji Schematy kliknij istniejący schemat, który chcesz edytować.

  5. Kliknij opcję próbki koloru gradientu, np. Gradient tła.

  6. Jeśli gradient nie został wcześniej skonfigurowany, wyświetlą się gotowe opcje do wyboru. Wybierz dowolny gotowy gradient, aby otworzyć panel opcji.

  7. Wybierz opcje gradientu:

  • Wybierz gradient liniowy lub radialny. Użyj przycisków, aby wybrać preferowany styl gradientu.
  • Ustaw kąt gradientu za pomocą strzałek w górę i w dół. Kliknij strzałkę w górę lub w dół, aby zwiększyć lub zmniejszyć wartość procentową kąta o 5.
  • Użyj suwaka, aby wybrać położenie gradientu, lub wprowadź wartość liczbową w polu.
  • Wprowadź określony kod szesnastkowy koloru lub użyj suwaka kolorów, aby wybrać odcień. Ostatnio wybrane kolory są wyświetlane u dołu panelu opcji gradientu.
  • Aby dostosować przezroczystość gradientu, użyj suwaka po prawej stronie. Możesz także wprowadzić wartość procentową w polu obok kodu szesnastkowego koloru.
  1. Kliknij przycisk Zapisz.

Selektor gradientu w edytorze szablonów

Używanie CSS do ustawiania gradientów

Większości wartości właściwości background CSS można użyć do ustawienia koloru tła. Możesz użyć tego pola dla jednolitych kolorów (na przykład #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) i hsla(0, 0%, 0%, 1) — wszystkie dają jednolite czarne tło) lub dla gradientów (na przykład linear-gradient(red, green), radial-gradient(red, green) lub conic-gradient(red, green)). Gradienty można również powtarzać.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Kliknij opcję Edytuj szablon obok szablonu, który chcesz dostosować.

  3. Kliknij ikonę ustawienia, a następnie kliknij opcję Kolory.

  4. W sekcji Schematy kliknij istniejący schemat, który chcesz edytować.

  5. Kliknij gradient, który chcesz edytować.

  6. Kliknij strzałkę obok opcji Gradient, a następnie wybierz opcję CSS.

  7. W polu Kod CSS wpisz lub wklej kod gradientu. Podgląd w edytorze szablonów wyświetli gradient w odpowiednim miejscu.

  8. Kliknij przycisk Zapisz.

Pole Kod CSS gradientu w edytorze szablonów

Usuwanie gradientu

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Kliknij opcję Edytuj szablon obok szablonu, który chcesz dostosować.

  3. Kliknij ikonę ustawienia, a następnie kliknij opcję Kolory.

  4. W sekcji Schematy kliknij istniejący schemat, który chcesz edytować.

  5. Kliknij gradient, który chcesz usunąć.

  6. Kliknij Usuń gradient.

  7. Kliknij przycisk Zapisz.

Typografia

Możesz ustawić styl i rozmiar czcionki dla tekstu w sklepie online. Możesz wybrać czcionkę systemową lub dodać czcionkę niestandardową. Czcionki dostępne w szablonie zależą od autora szablonu. Wszystkie darmowe szablony Shopify używają czcionek z biblioteki czcionek Shopify.

Rozważ użycie czcionek systemowych w sklepie, ponieważ są one już zainstalowane na komputerze użytkownika. Używanie 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.

Dostosowywanie typów czcionek

Sprawdź w bibliotece czcionek Shopify listę dostępnych czcionek.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij opcję Typografia.

  5. Aby zmienić typ czcionki dla nagłówków lub tekstu podstawowego w sklepie, kliknij przycisk Zmień w sekcji Nagłówki lub Tekst podstawowy.

  6. Kliknij nazwę czcionki, której chcesz użyć, a następnie kliknij przycisk Wybierz.

  7. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij opcję Typografia.

  7. Aby zmienić typ czcionki dla nagłówków lub tekstu podstawowego w sklepie, naciśnij przycisk Zmień w sekcji Nagłówki lub Tekst podstawowy.

  8. Naciśnij nazwę czcionki, której chcesz użyć, a następnie naciśnij przycisk Gotowe.

  9. Naciśnij przycisk Zapisz lub ✓.

Dostosowywanie rozmiarów czcionek

Możesz ustawić domyślne rozmiary czcionek dla nagłówków i tekstu podstawowego za pomocą ustawienia szablonu Typografia.

Minimalny rozmiar czcionki to 100%, a maksymalny – 150%. Każdy przyrost na skali zwiększa rozmiar czcionki o 5%. Ustawienie domyślne to 100%.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij opcję Typografia.

  5. Aby zmienić domyślny rozmiar czcionki dla tekstu w nagłówkach, użyj suwaka zakresu Skala rozmiaru czcionki, aby wybrać domyślny rozmiar czcionki.

  6. Aby zmienić domyślny rozmiar czcionki dla tekstu podstawowego, użyj suwaka zakresu Skala rozmiaru czcionki, aby wybrać domyślny rozmiar czcionki.

  7. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij opcję Typografia.

  7. Aby zmienić domyślny rozmiar czcionki dla tekstu w nagłówkach, użyj suwaka zakresu Skala rozmiaru czcionki, aby wybrać domyślny rozmiar czcionki.

  8. Aby zmienić domyślny rozmiar czcionki dla tekstu podstawowego, użyj suwaka zakresu Skala rozmiaru czcionki, aby wybrać domyślny rozmiar czcionki.

  9. Naciśnij przycisk Zapisz lub ✓.

Układ

Możesz ustawić maksymalną szerokość, z jaką będzie wyświetlany sklep online, oraz ustawić pionowe i poziome odstępy między sekcjami.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij opcję Układ.

  5. Użyj suwaka zakresu Szerokość strony, aby wybrać szerokość strony w zakresie 1000–1600 px. Ustawienie domyślne to 1600 px.

  6. Opcjonalnie: Użyj suwaka zakresu, aby dodać pionowe odstępy między sekcjami szablonu na stronach. Możesz dodać odstęp o maksymalnej wielkości 100 px między sekcjami.

  7. Opcjonalnie: Jeśli masz układ siatki, użyj suwaków zakresu Odstęp poziomy i Odstęp pionowy, aby dodać odstępy między zawartością siatki na stronach. Dodanie odstępu poziomego spowoduje dodanie maksymalnie 40 px odstępu do wierszy zawartości na stronach, natomiast dodanie odstępu pionowego spowoduje dodanie maksymalnie 40 px odstępu do kolumn zawartości na stronach.

  8. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij opcję Układ.

  7. Użyj suwaka zakresu Szerokość strony, aby wybrać szerokość strony w zakresie 1000–1600 px. Ustawienie domyślne to 1600 px.

  8. Opcjonalnie: Użyj suwaka zakresu, aby dodać pionowe odstępy między sekcjami szablonu na stronach. Możesz dodać odstęp o maksymalnej wielkości 100 px między sekcjami.

  9. Opcjonalnie: Jeśli masz układ siatki, użyj suwaków zakresu Odstęp poziomy i Odstęp pionowy, aby dodać odstępy między zawartością siatki na stronach. Dodanie odstępu poziomego spowoduje dodanie maksymalnie 40 px odstępu do wierszy zawartości na stronach, natomiast dodanie odstępu pionowego spowoduje dodanie maksymalnie 40 px odstępu do kolumn zawartości na stronach.

  10. Naciśnij przycisk Zapisz lub ✓.

Animacje

Animacje pozwalają dodać ruch i wizualne urozmaicenie do sklepu online. Możesz aktywować animację stopniowego pojawiania się, która odsłania sekcje sklepu podczas przewijania, oraz efekt najechania kursorem dla kart i przycisków.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij opcję Animacje.

  5. Opcjonalnie: Aby aktywować animację, która odsłania sekcje sklepu online podczas przewijania, wybierz opcję Odsłaniaj sekcje podczas przewijania.

  6. Opcjonalnie: Aby dodać animację z efektem najechania kursorem do kart i przycisków, wybierz jedną z następujących opcji w ustawieniu Efekt najechania kursorem:

    • Pionowe uniesienie: Gdy klient najedzie kursorem na kartę lub przycisk, element przesuwa się w górę.
    • Uniesienie 3D: Gdy klient najedzie kursorem na kartę lub przycisk, element przesuwa się do przodu, co daje efekt 3D. Dodatkowo pojawia się subtelny połysk, który przesuwa się po elemencie, nadając mu kolejny wymiar.

  7. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij opcję Animacje.

  7. Opcjonalnie: Aby aktywować animację, która odsłania sekcje sklepu online podczas przewijania, wybierz opcję Odsłaniaj sekcje podczas przewijania.

  8. Opcjonalnie: Aby dodać animację z efektem najechania kursorem do kart i przycisków, wybierz jedną z następujących opcji w ustawieniu Efekt najechania kursorem:

    • Pionowe uniesienie: Gdy klient najedzie kursorem na kartę lub przycisk, element przesuwa się w górę.
    • Uniesienie 3D: Gdy klient najedzie kursorem na kartę lub przycisk, element przesuwa się do przodu, co daje efekt 3D. Dodatkowo pojawia się subtelny połysk, który przesuwa się po elemencie, nadając mu kolejny wymiar.

  9. Naciśnij przycisk Zapisz lub ✓.

Ustawienia dostosowywania elementów wizualnych

Możesz dostosować wygląd elementów szablonu, takich jak przyciski, karty produktów i warianty, na stronie Ustawienia szablonu. Każda opcja zawiera odpowiednie ustawienia dla danego elementu.

Możesz dostosować ustawienia dla następujących elementów szablonu:

  • Przyciski: Przyciski obejmują przyciski z wezwaniem do działania w sekcjach, takich jak pokaz slajdów lub obraz z tekstem, a także przyciski w formularzu kontaktowym, na stronach produktu i stronach koszyka.
  • Przyciski wariantów: Przyciski wariantów umożliwiają wyświetlanie wariantów produktu na stronie produktu lub w sekcji polecanych produktów. Klienci mogą wybrać żądany wariant, aby dodać produkt do koszyka bez konieczności zmiany stron produktu. Możesz dostosować sposób wyświetlania przycisków wariantów w sklepie online.
  • Pola wprowadzania danych: Pola wprowadzania danych to interaktywne obszary, które wymagają podania informacji przez klienta, na przykład selektor ilości, formularz zapisu na e-maile lub uwagi dotyczące koszyka. Możesz dostosować wygląd pól wprowadzania danych w sklepie online.
  • Ustawienia kart produktów, kart kolekcji i kart bloga pozwalają dostosować styl każdego typu karty, gdy są one wyświetlane w sekcjach strony.
    • Karty produktów: Karty produktów wyświetlają informacje o produktach w obszarach szablonu, w których znajduje się lista wielu produktów, takich jak szablony kolekcji, sekcje kolekcji i wyniki wyszukiwania.
    • Karty kolekcji: Karty kolekcji wyświetlają informacje o kolekcjach w obszarach szablonu, w których znajduje się lista kolekcji, takich jak szablon lub sekcja listy kolekcji.
    • Karty bloga: Karty bloga wyświetlają informacje o postach na blogu w obszarach szablonu, w których znajduje się lista wielu produktów, takich jak szablony blogów, sekcje blogów i wyniki wyszukiwania.
  • Kontenery treści: Kontenery są używane dla elementu tekstowego sekcji treści, na przykład pola tekstowego w pokazie slajdów, na banerze z obrazem lub w kolumnach sekcji wielokolumnowych. Możesz dostosować wygląd kontenerów treści w sklepie online.
  • Multimedia: Multimedia to element wizualny sekcji, na przykład multimedia produktu lub obraz w sekcji Obraz z tekstem. Do multimediów możesz dodawać obramowania i cienie.
  • Menu rozwijane i wyskakujące okienka: Możesz dostosować wygląd menu rozwijanych, wyskakujących okienek modalnych i wyskakujących okienek koszyka w sklepie online.
  • Szuflady: Szuflady to ukryte, interaktywne kontenery, które wyświetlają się po naciśnięciu lub kliknięciu, takie jak zwijane menu lub opcje filtrowania kolekcji. Możesz dostosować obramowanie i cień szuflad w sklepie online.
  • Oznaczenia: Oznaczenia Wyprzedaż i Wyprzedane są automatycznie dodawane do obrazów produktów po obniżeniu ceny lub gdy stan zapasów osiągnie 0. Możesz indywidualnie dostosować pozycję, kształt i kolor oznaczeń Wyprzedaż i Wyprzedane w ustawieniach szablonu. Oznaczenia Strona i Blog są wyświetlane w odpowiednich wynikach wyszukiwania. Możesz dostosować pozycję i kształt tych oznaczeń, ale nie możesz zmienić koloru oznaczeń Strona i Blog.
  • Informacje o marce: Możesz zawrzeć informacje o marce w sklepie online. Po wykonaniu poniższych kroków możesz dodać blok Informacje o marce w stopce sklepu online.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Kliknij Edytuj szablon obok szablonu, który chcesz edytować.

  3. Kliknij ikonę settings.

  4. Kliknij element, aby otworzyć ustawienia.

  5. Dostosuj dowolne z dostępnych ustawień. Możesz przejrzeć zmiany, przechodząc do różnych obszarów szablonu w oknie podglądu.

  6. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

  3. Naciśnij Edytuj szablon obok szablonu, który chcesz edytować.

  4. Naciśnij ikonę settings.

  5. Naciśnij element, aby otworzyć ustawienia.

  6. Dostosuj dowolne z dostępnych ustawień. Możesz przejrzeć zmiany, przechodząc do różnych obszarów szablonu w oknie podglądu.

  7. Naciśnij przycisk Zapisz lub ✓.

Media społecznościowe

Możesz dodać linki do kont w mediach społecznościowych, które będą wyświetlane w stopce sklepu online.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij Media społecznościowe.

  5. Aby dodać linki do kont w mediach społecznościowych, wprowadź adresy stron internetowych dla kont w odpowiednich polach Konta społecznościowe. Musisz wprowadzić pełne linki, takie jak https://instagram.com/shopify lub https://tiktok.com/@shopify.

  6. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij Media społecznościowe.

  7. Aby dodać linki do kont w mediach społecznościowych, wprowadź adresy stron internetowych dla kont w odpowiednich polach Konta społecznościowe. Musisz wprowadzić pełne linki, takie jak https://instagram.com/shopify lub https://tiktok.com/@shopify.

  8. Naciśnij przycisk Zapisz lub ✓.

Zachowanie wyszukiwania

Sklep online jest wyposażony w funkcję wyszukiwania predykcyjnego, która wyświetla sugestie, gdy klienci zaczynają pisać w polu wyszukiwania. Sugestie wyszukiwania pomagają klientom formułować i zawężać zapytania oraz odkrywać nowe sposoby przeglądania sklepu online. Pozwalają również szybko przeglądać pasujące wyniki bez opuszczania bieżącej strony w celu wyświetlenia oddzielnej listy wyników wyszukiwania.

Aby dowiedzieć się więcej o działaniu sugestii wyszukiwania, zapoznaj się z sekcją Wyszukiwanie predykcyjne.

Możesz dostosować sposób wyświetlania sugestii wyszukiwania klientom.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij Zachowanie wyszukiwania.

  5. Aby aktywować lub dezaktywować sugestie wyszukiwania, zaznacz lub odznacz opcję Włącz sugestie wyszukiwania.

  6. Opcjonalnie: Aby wyświetlić lub ukryć dostawcę produktu w sugestiach wyszukiwania, zaznacz lub odznacz opcję Pokaż dostawcę produktu.

  7. Opcjonalnie: Aby wyświetlić lub ukryć cenę produktu w sugestiach wyszukiwania, zaznacz lub odznacz opcję Pokaż cenę produktu.

  8. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij Zachowanie wyszukiwania.

  7. Aby aktywować lub dezaktywować sugestie wyszukiwania, zaznacz lub odznacz opcję Włącz sugestie wyszukiwania.

  8. Opcjonalnie: Aby wyświetlić lub ukryć dostawcę produktu w sugestiach wyszukiwania, zaznacz lub odznacz opcję Pokaż dostawcę produktu.

  9. Opcjonalnie: Aby wyświetlić lub ukryć cenę produktu w sugestiach wyszukiwania, zaznacz lub odznacz opcję Pokaż cenę produktu.

  10. Naciśnij przycisk Zapisz lub ✓.

Format waluty

Możesz wybrać, czy kod waluty ma być wyświetlany z cenami przy produktach.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij Format waluty.

  5. Aby wyświetlić kody walut, zaznacz opcję Pokaż kody walut.

  6. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij Format waluty.

  7. Aby wyświetlić kody walut, zaznacz opcję Pokaż kody walut.

  8. Naciśnij przycisk Zapisz lub ✓.

Koszyk

Możesz zmienić styl koszyka w sklepie online. Gdy klient doda produkt ze sklepu do koszyka, koszyk może być wyświetlany jako szuflada, strona lub powiadomienie w wyskakującym okienku. Aby klient pozostał na stronie produktu, użyj opcji szuflady lub powiadomienia w wyskakującym okienku. Aby przenieść klienta na stronę koszyka, użyj opcji strony. Gdy koszyk klienta jest pusty, możesz wyświetlić polecaną kolekcję w szufladzie koszyka.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij Koszyk.

  5. Użyj menu rozwijanego Typ koszyka, aby wybrać styl koszyka: Szuflada, Strona lub Powiadomienie w wyskakującym okienku.

  6. Opcjonalnie: Aby wyświetlić dostawców pozycji w koszyku klienta, zaznacz opcję Pokaż dostawcę.

  7. Opcjonalnie: Aby udostępnić klientom pole tekstowe, w którym mogą wprowadzać specjalne żądania lub dodawać dodatkowe informacje o zamówieniu, zaznacz opcję Włącz uwagę dotyczącą koszyka.

  8. Opcjonalnie: Jeśli jako Typ koszyka wybierzesz opcję Szuflada, możesz wyświetlić kolekcję w szufladzie koszyka, gdy jest on pusty:

    1. W obszarze Szuflada koszyka kliknij Wybierz kolekcję.
    2. Kliknij nazwę kolekcji, którą chcesz wyświetlić, a następnie kliknij Wybierz.

  9. Opcjonalnie: Jeśli jako Typ koszyka wybierzesz opcję Szuflada, możesz zmienić schemat kolorów szuflady koszyka, wykonując następujące kroki:

    1. W obszarze Szuflada koszyka > Schemat kolorów kliknij przycisk Zmień.
    2. Wybierz schemat kolorów, którego chcesz używać w szufladzie koszyka.

  10. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij opcję Koszyk.

  7. Wybierz typ koszyka spośród opcji: Szuflada, Strona lub Powiadomienie wyskakujące.

  8. Opcjonalnie: Aby wyświetlić dostawców pozycji w koszyku klienta, zaznacz opcję Pokaż dostawcę.

  9. Opcjonalnie: Aby udostępnić klientom pole tekstowe, w którym mogą wprowadzać specjalne żądania lub dodawać dodatkowe informacje o zamówieniu, zaznacz opcję Włącz uwagę dotyczącą koszyka.

  10. Opcjonalnie: Jeśli jako Typ koszyka wybierzesz opcję Szuflada, możesz wyświetlić kolekcję w szufladzie koszyka, gdy jest on pusty:

    1. W obszarze Szuflada koszyka naciśnij opcję Wybierz kolekcję.
    2. Naciśnij nazwę kolekcji, którą chcesz wyświetlić, a następnie naciśnij przycisk Gotowe.

  11. Opcjonalnie: Jeśli jako Typ koszyka wybierzesz opcję Szuflada, możesz zmienić schemat kolorów szuflady koszyka, wykonując następujące kroki:

    1. W obszarze Szuflada koszyka > Schemat kolorów naciśnij przycisk Zmień.
    2. Wybierz schemat kolorów, którego chcesz używać w szufladzie koszyka, a następnie naciśnij przycisk Gotowe.

  12. Naciśnij przycisk Zapisz lub ✓.

Niestandardowy kod CSS

W sekcji Niestandardowy kod CSS możesz wprowadzić własny kod CSS, aby na przykład dostosować wygląd przycisków w sklepie online poza dostępnymi ustawieniami domyślnymi lub zastosować unikalny styl dla określonych elementów tekstowych.

Niestandardowy kod CSS w ustawieniach szablonu ma wpływ na wszystkie strony w sklepie online z wyjątkiem strony realizacji zakupu.

Dowiedz się więcej o dodawaniu niestandardowego kodu CSS do szablonu.

Styl szablonu

Styl szablonu to zbiór ustawień wybranych przez projektanta szablonu. Możesz zastosować styl szablonu w sklepie, aby nadać mu dopracowany wygląd i sposób obsługi. Wszystkie szablony mają domyślnie zastosowany styl szablonu. Pozostałe dostępne opcje stylu szablonu zależą od używanego szablonu.

Dostosowując szablon, zastępujesz ustawienia stylu szablonu własnymi. Gdy zastosujesz styl szablonu, zmienisz bieżące ustawienia, takie jak kolory i typografia.

Kroki:

Komputer stacjonarny

  1. W panelu administracyjnym Shopify przejdź do: Sklep online > Szablony.

  2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk Edytuj szablon.

  3. Kliknij ikonę Ustawienia szablonu ustawienia.

  4. Kliknij opcję Styl szablonu.

  5. Wybierz styl szablonu, którego chcesz użyć, a następnie kliknij przycisk Zmień styl.

  6. Kliknij przycisk Zapisz.

Urządzenie mobilne

  1. W aplikacji Shopify naciśnij ikonę Menu.

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

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

  4. Znajdź szablon, który chcesz edytować, a następnie naciśnij przycisk Edytuj szablon.

  5. Naciśnij … lub ⋮, a następnie naciśnij opcję Ustawienia szablonu.

  6. Naciśnij opcję Styl szablonu.

  7. Wybierz styl szablonu, którego chcesz użyć, a następnie naciśnij przycisk Gotowe.

  8. Naciśnij przycisk Zapisz lub ✓.