Konfiguracja strony głównej w szablonach IdoSell
Nowe szablony IdoSell pozwalają szybko uruchomić nowoczesny wygląd sklepu bez konieczności projektowania strony od podstaw. Każdy z szablonów wykorzystuje te same moduły panelu administracyjnego, ale prezentuje je w inny sposób: od minimalistycznej prezentacji produktów po rozbudowane sekcje inspiracyjne i lifestyle'owe.
Ten artykuł pokazuje, gdzie znajdują się poszczególne elementy strony głównej i jak je skonfigurować w szablonach Aura, Glow, Spark, Pulse, Bond oraz Scene. Dzięki temu łatwiej dopasujesz wygląd sklepu do własnej marki bez szukania ustawień w różnych miejscach panelu.
Co znajdziesz w tym artykule?
Jak zainstalować nowy szablon,
Gdzie edytować banery, menu i strefy CMS,
Jak skonfigurować stronę główną dla każdego szablonu,
Gdzie zmienić logo, favicon i newsletter,
Jakie są rekomendowane wymiary grafik.
Zanim zaczniesz sprawdź
Czy masz uprawnienia do konfiguracji wyglądu sklepu,
Czy przygotowano grafiki w odpowiednich rozmiarach,
Czy znasz strukturę menu i kategorii, które mają zostać zaprezentowane na stronie głównej.
Instalacja nowego szablonu
Przejdź do:
SKLEP > Galeria szablonów.Wybierz interesujący Cię szablon.
Zainstaluj szablon wraz z przykładowymi materiałami startowymi.
Podmień banery, treści i grafiki na własne.
Możesz skorzystać z Asystenta wyboru szablonu (dostępny w prawym górnym rogu ekranu), czyli intuicyjnego kreatora, który krok po kroku pomoże Ci wybrać szablon najlepiej dopasowany do charakteru Twojego sklepu. Po zakończeniu konfiguracji szablon zostanie automatycznie zainstalowany wraz z zestawem gotowych banerów startowych. Więcej na temat asystenta wyboru szablonu znajdziesz tutaj.
Przydatne ścieżki w panelu
| Element | Ścieżka |
|---|---|
| Banery (strefy banerowe) | Sklep > Banery i buttony |
| Dodatkowe treści CMS | Sklep > Dodatkowe treści CMS > Strona główna - pierwsza strefa lub Strona główna - druga strefa |
| Menu / kafelki kategorii | Sklep > Menu i podstrony opisowe w masce (Menu 4, Menu 5) |
| Strefy rekomendacji (hotspoty) | Sklep > Strefy produktów rekomendowanych |
| Komponenty Composer | Sklep > Composer |
| Blog | Sklep > Blog |
| Aktualności | Sklep > Aktualności |
| Pasek informacyjny | Sklep > Pasek informacyjny |
| Zawartość newslettera | Sklep > Composer > Literały i tłumaczenia > zakładka Tłumaczenia (język źródłowy i docelowy: Polski) > wyszukaj frazę › wprowadź zmianę (zapis automatyczny) › naciśnij przycisk „Aktualizacja literałów”, żeby zmiana trafiła do opublikowanego szablonu |
| Grafika w newsletterze | Sklep > Composer > edytuj kompozycję > komponent newslettera > Pliki |
| Logo sklepu | Sklep > Logo, top i inne elementy strony > Zarządzanie wyglądem elementów strony > Logo > Edytuj |
| Favicon | Sklep > Logo, top i inne elementy strony > Zarządzanie wyglądem elementów strony > Ikona w pasku adresu (favicon) > Edytuj |
Konfiguracja poszczególnych szablonów
W tej sekcji znajdziesz informacje, które elementy strony głównej możesz skonfigurować w każdym z szablonów oraz gdzie znaleźć odpowiednie ustawienia w panelu administracyjnym. Dodatkowo dla każdego szablonu podaliśmy zalecane wymiary grafik i wykorzystywane fonty.
Aura
Sklep demonstracyjny: https://aura.idosell.com/
Elementy strony głównej do skonfigurowania
| Sekcja | Ścieżka konfiguracji |
|---|---|
| Banner 1 (główny baner powitalny — na demo: „Solaire") | Sklep > Banery i buttony > sekcja „Baner strefy 1" |
| Strefa CMS 1 (kafelki/skróty - 4 ikony: Darmowa dostawa / Wysyłka 24h / Pakowanie na prezenty / Próbka gratis) | Sklep > Dodatkowe treści CMS > Strona główna - pierwsza strefa |
| Buttony strefa 2 (siatka 5 kafli tematycznych z linkiem „Odkryj") | Sklep > Banery i buttony > sekcja buttonów strefy 2 |
| Strefa CMS 2 (na demo: hasło „Aura. Czujesz, nie tłumaczysz.") | Sklep > Dodatkowe treści CMS > Strona główna - druga strefa |
| Menu 4 (stopka - logo sklepu z ikonami social media) | Sklep > Menu i podstrony opisowe w masce > Menu 4 |
Poniżej znajdują się zrzuty ekranu przypisane do poszczególnych sekcji. Zostały one ułożone zgodnie z kolejnością przedstawioną w tabeli powyżej, co ułatwi ich odnalezienie i prawidłową konfigurację.
Rozmiary grafik użyte w demo
| Sekcja | Desktop | Tablet | Mobile | Format | Optymalny rozmiar |
|---|---|---|---|---|---|
| Banner 1 | 1920 × 641 px | 1467 × 873 px | 1134 × 1800 px | WebP | < 150 KB |
| Strefa CMS 1 - ikony | SVG inline 24 × 24 px (kontener 64 × 64 px) | — | — | SVG inline | — |
| Buttony strefa 2 - kafle | 600 × 600 px lub 1220 x 600px | 600 × 600 px lub 1220 x 600px | 600 × 600 px lub 1220 x 600px | WebP | < 50 KB |
| Strefa CMS 2 | tylko tekst | — | — | — | — |
| Blog | 886 × 714 px | 886 × 714 px | 886 × 714 px | WebP | < 100 KB |
Czcionka nagłówka (headline): Google Sans Flex: fonts.google.com/specimen/Google+Sans
Czcionka główna (main): Google Sans Flex: fonts.google.com/specimen/Google+Sans
Glow
Sklep demonstracyjny: https://glow.idosell.com/
Elementy strony głównej do skonfigurowania
| Sekcja | Ścieżka konfiguracji |
|---|---|
| Banner 1 (na demo: „Zdefiniuj swój zestaw", slider z kropkami nawigacji) | Sklep > Banery i buttony > sekcja „Baner strefy 1" |
| Buttony strefa 2 (rząd 4 haseł tekstowych) | Sklep > Banery i buttony > sekcja buttonów strefy 2 |
| Banery kategorii (4 kafle: Pierścionki / Bransoletki / Naszyjniki / Kolczyki) | Sklep > Menu i podstrony opisowe w masce > Menu 5 |
| Strefa CMS 2 (blok „Elegancja i komfort" z przyciskiem „Czytaj więcej") | Sklep > Dodatkowe treści CMS > Strona główna - druga strefa |
| Wyróżniony produkt – hotspot strefa 4 (karuzela produktów) | Sklep > Strefy produktów rekomendowanych > Strona główna >Strefa rekomendacji nr 4 |
| Menu 4 (stopka - dane adresowe, telefon, e-mail, social media) | Sklep > Menu i podstrony opisowe w masce > Menu 4 |
Poniżej znajdują się zrzuty ekranu przypisane do poszczególnych sekcji. Zostały one ułożone zgodnie z kolejnością przedstawioną w tabeli powyżej, co ułatwi ich odnalezienie i prawidłową konfigurację.
Rozmiary grafik użyte w demo
| Sekcja | Desktop | Tablet | Mobile | Format | Optymalny rozmiar |
|---|---|---|---|---|---|
| Banner 1 | 3840 × 1600 px | 1956 × 896 px | 1440 × 1440 px | WebP | < 150 KB |
| Buttony strefa 2 | tylko tekst | — | — | — | — |
| Banery kategorii - kafle | 675 × 960 px | 675 × 960 px | 675 × 960 px | WebP | < 50 KB |
| Strefa CMS 2 | tylko tekst | — | — | — | — |
| Wyróżniony produkt - zdjęcie główne towaru | 1154 × 1600 px | 1154 × 1600 px | 1154 × 1600 px | WebP | < 150 KB |
| Blog | 456 × 640 px | 456 × 640 px | 456 × 640 px | WebP | < 50 KB |
Czcionka nagłówka (headline): Cormorant Garamond Light: fonts.google.com/specimen/Cormorant+Garamond
Czcionka główna (main): DM Sans: fonts.google.com/specimen/DM+Sans
Spark
Sklep demonstracyjny: https://spark.idosell.com/
Elementy strony głównej do skonfigurowania
| Sekcja | Ścieżka konfiguracji |
|---|---|
| Banner 1 (na demo: „Nowości w krainie przytulanek" z przyciskiem „Odkryj") | Sklep > Banery i buttony > sekcja „Baner strefy 1" |
| Strefa CMS 1 (4 ikony: Bezpieczeństwo / Szeroki wybór / Szybka dostawa / Przyjazna obsługa) | Sklep > Dodatkowe treści CMS > Strona główna - pierwsza strefa |
| Buttony strefa 2 (blok „Kupuj według wieku" - 2 duże kafle) | Sklep > Banery i buttony > sekcja buttonów strefy 2 |
| Strefa CMS 2 (blok lifestyle ze zdjęciem obok) | Sklep > Dodatkowe treści CMS > Strona główna - druga strefa |
| Menu 4 (stopka - Socials: Facebook / Instagram / Youtube) | Sklep > Menu i podstrony opisowe w masce > Menu 4 |
Poniżej znajdują się zrzuty ekranu przypisane do poszczególnych sekcji. Zostały one ułożone zgodnie z kolejnością przedstawioną w tabeli powyżej, co ułatwi ich odnalezienie i prawidłową konfigurację.
Rozmiary grafik użyte w demo
| Sekcja | Desktop | Tablet | Mobile | Format | Optymalny rozmiar |
|---|---|---|---|---|---|
| Banner 1 - Desktop (min 979 px) | 1920 × 560 px | 734 × 672 px | 734 × 672 px | WebP | < 50 KB |
| Strefa CMS 1 - ikony | 32 × 32 px | 32 × 32 px | 32 × 32 px | SVG | ~1 KB |
| Buttony strefa 2 - kafle | 1000 × 695 px | 1000 × 695 px | 1000 × 695 px | WebP | < 50 KB |
| Strefa CMS 2 - zdjęcie lifestyle | 1037 × 720 px | 1037 × 720 px | 1037 × 720 px | WebP | < 30 KB |
Czcionka nagłówka (headline): Luckiest Guy: fonts.google.com/specimen/Luckiest+Guy
Czcionka główna (main): Lato: fonts.google.com/specimen/Lato
Pulse
Sklep demonstracyjny: https://pulse.idosell.com/
Elementy strony głównej do skonfigurowania
| Sekcja | Ścieżka konfiguracji |
|---|---|
| Banner 1 (na demo: „Przyspiesz swoją kreatywność" ze zdjęciem laptopa) | Sklep > Banery i buttony > sekcja „Baner strefy 1" |
| Menu 5 (pasek nawigacji: Laptopy / Smartfony / Głośniki / Słuchawki / Akcesoria) | Sklep > Menu i podstrony opisowe w masce > Menu 5 |
| Buttony strefa 2 (4 ikony: Darmowa dostawa / 100 dni na zwrot / Program lojalnościowy / Bezpieczne płatności) | Sklep > Banery i buttony > sekcja buttonów strefy 2 |
| Banner strefa 3 (na demo: „Dźwięk, który wyróżnia" ze zdjęciem słuchawek) | Sklep > Banery i buttony > sekcja „Baner strefy 3" |
| Menu 4 (stopka - Social Media: Facebook / LinkedIn / Instagram / YouTube) | Sklep > Menu i podstrony opisowe w masce > Menu 4 |
Poniżej znajdują się zrzuty ekranu przypisane do poszczególnych sekcji. Zostały one ułożone zgodnie z kolejnością przedstawioną w tabeli powyżej, co ułatwi ich odnalezienie i prawidłową konfigurację.
Rozmiary grafik użyte w demo
| Sekcja | Desktop Large | Desktop | Tablet | Mobile | Format | Optymalny rozmiar |
|---|---|---|---|---|---|---|
| Banner 1 | 1920 × 650 px | 1390 × 650 px | 982 × 650 px | 360 × 600 px | WebP | < 150 KB |
| Banner strefa 3 | 1920 × 650 px | 1390 × 650 px | 982 × 650 px | 360 × 600 px | WebP | < 150 KB |
| Menu 5 - ikony kategorii | 208 × 208 px | 208 × 208 px | 208 × 208 px | 208 × 208 px | WebP | < 5 KB |
| Buttony strefa 2 - ikony | 48 × 48 px | 48 × 48 px | 48 × 48 px | 48 × 48 px | SVG | ~3 KB |
| Blog | 684 × 344 px | 684 × 344 px | 684 × 344 px | 684 × 344 px | WebP | < 20 KB |
Czcionka nagłówka (headline): Lexend: fonts.google.com/specimen/Lexend
Czcionka główna (main): Inter: fonts.google.com/specimen/Inter
Bond
Sklep demonstracyjny: https://bond.idosell.com/
Elementy strony głównej do skonfigurowania
| Sekcja | Ścieżka konfiguracji |
|---|---|
| Banner 1 (na demo: sekcja „Nowości w naszym sklepie") | Sklep > Banery i buttony > sekcja „Baner strefy 1" |
| Buttony strefa 2 (rząd 4 ikon: Radość i aktywność / Funkcjonalne akcesoria / Zdrowa karma / Szeroki asortyment) | Sklep > Banery i buttony > sekcja buttonów strefy 2 |
| Menu 5 (5 okrągłych kafli: Koty / Psy / Króliki / Ptaki / Ryby) | Sklep > Menu i podstrony opisowe w masce > Menu 5 |
| Strefa CMS 2 (baner z tłem lifestylowym i kartą „Wszystko dla Twojego pupila") | Sklep > Dodatkowe treści CMS > Strona główna - druga strefa |
| Nasze marki (karuzela logotypów marek) | Sklep > Producenci > dodaj producenta > wgraj logo |
| Grafika w newsletterze | Sklep > Composer > edytuj kompozycję > Układ > komponent 'Formularz newslettera STANDARD' > Pliki |
| Stopka (logo + dane adresowe ) | Ustawienia > Dane firmy > Dane kontaktowe i dane do dokumentów sprzedaży Logo pobierane jest automatycznie |
Poniżej znajdują się zrzuty ekranu przypisane do poszczególnych sekcji. Zostały one ułożone zgodnie z kolejnością przedstawioną w tabeli powyżej, co ułatwi ich odnalezienie i prawidłową konfigurację.
Rozmiary grafik użyte w demo
| Sekcja | Desktop | Tablet | Mobile | Format | Optymalny rozmiar |
|---|---|---|---|---|---|
| Banner 1 | 1390 × 650 px | 982 × 650 px | 550 × 733 px | WebP / JPG | 150–200 KB |
| Buttony strefa 2 - ikony | 52 × 52 px | 52 × 52 px | 52 × 52 px | SVG | — |
| Menu 5 - kafle kategorii | 256 × 190 px | 256 × 190 px | 256 × 190 px | WebP | < 50 KB |
| Strefa CMS 2 - zdjęcie tła | 1398 × 450 px | 1398 × 450 px | 1398 × 450 px | WebP | < 150 KB |
| Nasze marki - logotypy | 520 × 200 px | 520 × 200 px | 520 × 200 px | PNG | < 30 KB |
| Blog | 892 × 688 | 892 × 688 | 892 × 688 | WebP | < 30 KB |
| Newsletter - zdjęcie | 532 × 365 px | 532 × 365 px | 532 × 365 px | WebP | < 200 KB |
Czcionka nagłówka (headline): Roboto Medium: fonts.google.com/specimen/Roboto
Czcionka główna (main): Roboto Medium: fonts.google.com/specimen/Roboto
Scene
Sklep demonstracyjny: https://scene.idosell.com/
Elementy strony głównej do skonfigurowania
| Sekcja | Ścieżka konfiguracji |
|---|---|
| Banner 1 (na demo: „Zatrzymaj się na chwilę" ze zdjęciem górskiego krajobrazu) | Sklep > Banery i buttony > sekcja „Baner strefy 1" |
| Strefa CMS 1 | Sklep > Dodatkowe treści CMS > Strona główna - pierwsza strefa |
| Menu 5 (dwa duże kafle-zdjęcia: Praktyka / Ciało i umysł) | Sklep > Menu i podstrony opisowe w masce > Menu 5 |
| Strefa CMS 2 (blok „Nasza misja" - zdjęcie obok tekstu z przyciskiem) | Sklep > Dodatkowe treści CMS > Strona główna - druga strefa |
| Grafika w newsletterze | Sklep > Composer > edytuj kompozycję > Układ > komponent 'Formularz newslettera STANDARD' > Pliki |
| Menu 4 (stopka - Social media: Facebook, Instagram) | Sklep > Menu i podstrony opisowe w masce > Menu 4 |
Poniżej znajdują się zrzuty ekranu przypisane do poszczególnych sekcji. Zostały one ułożone zgodnie z kolejnością przedstawioną w tabeli powyżej, co ułatwi ich odnalezienie i prawidłową konfigurację.
Rozmiary grafik użyte w demo
| Sekcja | Desktop | Tablet | Mobile | Format | Optymalny rozmiar |
|---|---|---|---|---|---|
| Banner 1 (wideo) | 1398 × 690 px | 982 × 650 px | 360 × 360 px | MP4 + WebP (cover) | — |
| Strefa CMS 1 - zdjęcia kafli | 1573 × 1170 px | 1573 × 1170 px | 1573 × 1170 px | WebP | < 50 KB |
| Strefa CMS 2 - zdjęcie (Nasza misja) | 1986 × 1250 px | 1986 × 1250 px | 1986 × 1250 px | WebP | < 100 KB |
| Blog | 2500 × 2500 px | 2500 × 2500 px | 2500 × 2500 px | WebP | < 110 KB |
| Newsletter - zdjęcie | 699 × 440 px | 699 × 440 px | 699 × 440 px | WebP | < 15 KB |
Elementy karty produktu do skonfigurowania
| Sekcja | Ścieżka konfiguracji |
|---|---|
| Parametry z ikonami na karcie produktu (Zalety#advantages) | Produkty > Parametry > Dodaj parametr > Zalety#advantages > dodaj wartości z ikonami > przypisz do towarów > Opcje dodatkowe > Wyróżniony |
| Baner "Masz pytania" | Sklep > Composer > edytuj kompozycję > karta towaru > komponent Pytania STANDARD SCENE > Pliki |
Poniżej znajdują się zrzuty ekranu przypisane do poszczególnych sekcji. Zostały one ułożone zgodnie z kolejnością przedstawioną w tabeli powyżej, co ułatwi ich odnalezienie i prawidłową konfigurację.
| Sekcja | Desktop | Tablet | Mobile | Format | Optymalny rozmiar |
|---|---|---|---|---|---|
| Parametry z ikonami na karcie produktu (Zalety#advantages) | 24 × 24 px | 24 × 24 px | 24 × 24 px | SVG | ~1 KB |
| Baner "Masz pytania" | 1398 × 880 px | 1398 × 880 px | 1398 × 880 px | WebP | < 30 KB |
Czcionka nagłówka (headline): Inter: fonts.google.com/specimen/Inter
Czcionka główna (main): Inter: fonts.google.com/specimen/Inter
Elementy wspólne dla wszystkich szablonów
| Element | Zalecany rozmiar | Format | Maks. waga |
|---|---|---|---|
| Logo sklepu | maks. 360 × 130 px | PNG (z przezroczystością) | < 50 KB |
| Favicon | 48 × 48 px | ICO (zalecane) lub PNG | < 15 KB |
Precyzyjne wymiary dla stref CMS nie są ujednolicone między szablonami.