> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Oferta zespołów - Design & Styling > ℹ️ **Note:** Ten artykuł został automatycznie przetłumaczony za pomocą AI i może zawierać nieścisłości. Jeśli coś wygląda źle, skontaktuj się z naszym zespołem wsparcia. Karta Design daje pełną kontrolę nad tym, jak Hoppy Bundles oferuje wygląd i uczucie na swoim sklepie. Od czcionek i kolorów do granic, przycisków, najważniejszych poziomów i kart produktów - prawie każdy wizualny aspekt widżetów oferty można dostosować do marki. Dostarczyliśmy szeroki zakres ustawień, więc można albo: * Szybkie uruchamianie przy użyciu gotowych szablonów i motywów * Lub głęboko dostosować każdy szczegół idealnie dopasować swój sklep Większość ustawień związanych z kolorem obejmuje: * Wybór koloru (kliknij przycisk koloru, aby go otworzyć) * Wejście kodu szesnastkowego (wpisz swój dokładny kolor marki bezpośrednio) To ułatwia wybór wizualny lub dokładne kolory marki. # **⚠️ Zanim zaczniesz** Konfigurowanie ustawień projektu: → Otworzyć istniejącą ofertę → Albo stworzyć nową ofertę Potem otwórz **Projekt** zakładka wewnątrz edytora oferty. Karta Design jest dostępna dla wszystkich typów ofert w Hoppy Bundles: * **Oferta pakietu** * **Przerwa ilościowa** (Zniżka) * **Build Your Own Bundle (BIOB)** * **Dodatki do produktu** * **Suwak upsell** * **Kategoria Przerwa ilościowa** ℹ️ Karta Design wygląda nieco inaczej w zależności od rodzaju oferty - przewodnik ten obejmuje każdą sekcję i wskazuje różnice w trakcie. --- ## **👀 Zrozumienie karty projektu** ### **📍 Gdzie mieszka** Otwórz każdą ofertę, a zobaczysz zakładki na górze edytora - dla większości typów ofert są to **Ogólne**, **Projekt**oraz **Ukierunkowanie i umiejscowienie**Kliknij **Projekt** aby otworzyć ustawienia stylizacji. * Dla **BIOB** oferty, karty są **Ogólne**, **Wybór produktu Logika**oraz **Projekt**. ### **🖥️ Podgląd na żywo** Każdy edytor ofert zawiera panel podglądu na żywo obok ustawień, pokazujący zarówno **Podgląd pulpitu** oraz **Podgląd mobilny**Kiedy zmieniasz ustawienia wzornictwa - kolor, czcionkę, granicę - podgląd aktualizuje się natychmiast, więc zawsze wiesz dokładnie, jak będzie wyglądał twój widget przed zapisem. ℹ️ Podgląd pokazuje zmiany stylizacji z przykładowych produktów. Zawsze dwukrotnie - sprawdź ostateczny wygląd na żywo sklep po publikacji. --- ## **🎨 Szablony i motywy (Przerwa ilościowa)** Ilość Przerwa oferty pochodzą z gotowych stylów wizualnych, więc nie trzeba projektować od podstaw. ### **🖼️ Szablony oferty** * **Co on robi?** Po utworzeniu nowej oferty Przerwa ilościowa, zaczynasz od wybrania przygotowanego szablonu oferty pod **Wybierz preferowaną ofertę**. Każdy szablon pochodzi z własnego stylu (kolory, rozmiary i style), które można w pełni dostosować później. * **Dostępne szablony:** * _Pasek & Zapisz_ - stosuje świeży **zielone** Motyw koloru. * _Ograniczona oferta czasu_ - stosuje ciepło **pomarańczowe** Motyw koloru. * _Flash Sale Madness!_ - stosuje śmiałe **różowe** Motyw koloru. * _Yay! To BOGO!_ - stosuje żywą **fioletowy** Motyw koloru. * **Jak stosować:** Wybierz szablon i kliknij **Zastosuj wybrany szablon**. Projekt szablonu ładuje się do edytora, i można zmienić wszystko stamtąd. ### **📐 Układ szablonu** * **Co on robi?** Kontroluje sposób rozmieszczenia poziomów ilościowych wewnątrz widżetu. * **Opcje:** * _Pionowe_ - Poziomy są na siebie ułożone. * _Poziome_ - Poziomy siedzą obok siebie. ### **🎨 Wybierz motyw** * **Co on robi?** Pozwala zamienić cały motyw koloru widget za jednym kliknięciem. * **Opcje:** _Niebieski_, _Czerwony_lub _Zielony_. * **Notatka:** Ta opcja pojawia się tylko wtedy, gdy **Pionowe** Wybór układu szablonu. ⚠️ Wybór zamiennika motywu **wszystkie** aktualnych ustawień projektowych (kolory, rozmiary, style) z ustawionymi wartościami tematu. Jeśli dostosowałeś indywidualne ustawienia, zastosuj swój motyw pierwszy i fine- tune później. --- ## **🔤 Typografia i kolor** Jest to główna karta projektu, dostępna w zakładce Design każdego typu oferty. Jest składany - kliknij strzałkę w prawym górnym rogu, aby go powiększyć lub zawalić. ### **🔠 Czcionka** * **Co on robi?** Ustawia rodzinę czcionek stosowaną w całym widgecie oferty. * **Jak stosować:** Wybierz z **60 + built- in fonts** - w tym klasyki jak Helvetica, Arial, Georgia i Impact, plus popularne Google Fonts jak Roboto, Montserrat, Poppins, Inter, Lato, Open Sans, Playfair Display i wiele innych. * **Domyślnie:** Wybierz **Użyj czcionki motywu** aby automatycznie odziedziczyć czcionkę motywu sklepu - najprostszy sposób, aby widget wtopić się w sklep. ℹ️ Czcionki Google są automatycznie ładowane w sklepie po wybraniu - nie jest wymagana konfiguracja ręczna. ### **📝 Stylizacja elementów tekstu (rozmiar / styl / kolor)** Poniżej znacznika czcionek każdy element tekstowy widgetu otrzymuje własny blok stylizacji. Każdy blok ma trzy ustawienia: * **Rozmiar (px):** Kontroluje wielkość czcionki tego elementu. * **Styl:** Kontroluje wagę i nacisk tekstu. Opcje: * _Światło_ * _Regularne_ * _Włoski_ * _Średni_ * _Średnio włoski_ * _SemiBold_ * _Śmiały_ * _Śmiały włoski_ * **Kolor:** Zmienia kolor tekstu za pomocą znacznika kolorów lub wejścia szesnastkowego. ⚠️ Rozmiar nie może być większy niż 20px - jeśli wprowadzisz większą wartość, zobaczysz błąd walidacji. Dostępne elementy zależą od rodzaju oferty: **📦 Oferta pakietowa i dodatki do produktów:** * **Nazwa grupy** - główny kierunek widżetu wiązki. * **Nazwa produktu** - tytuły produktów wewnątrz pakietu. * **Cena produktu** - cena wykazana dla każdego produktu. * **Zaznaczony znacznik** - tekst odznaki (np. "Combo") pokazany na podświetlonych produktach. * **Footer** - tekst stopy na dole widżetu. * **Cena ogółem** - łączną cenę pakietu. * **Przycisk** - tekst przycisku "Dodaj do koszyka". **🏷️ Przerwa na ilość:** * **Nazwa bloku** - główny kierunek powyżej poziomów. * **Nazwa oferty** - tytuł każdego poziomu (np. "2 Para"). * **Zniżka Etykieta** - tekst rabatowy na każdym poziomie (np. "Kup 2 Pobierz 1"). * **Cena** - obniżoną cenę. * **Porównaj cenę** - struck- poprzez oryginalną cenę. * **Znacznik** - tekst odznaki na poziomie (np. "Najbardziej Popularne"). * **Podtytuł** - tekst podtytułu na poziomie. * **Etykieta / Cena / Kolor znacznika prezentu** - tekst używany do darmowych elementów prezentów (gdy jest skonfigurowany darmowy prezent). * **Footer** - tekst stopy poniżej poziomów. * **Zaznaczony znacznik** - zaznaczony tekst odznaki. * **Przycisk** - tekst przycisku. * **Cena ogółem** - całkowity wyświetlacz cenowy. **🧺 Build Your Own Bundle (BIOB):** * **Nazwa bloku** - nagłówek strony. * **Opis** - tekst opisu pod nagłówkiem. * **Nazwa oferty** - nazwy produktów w pakiecie. * **Cena** - ceny produktu. * **Tekst paska** - komunikat postępu w pasku lepkim (np. "Potrzebuję co najmniej 3 z tej grupy"). * **Przycisk** - główny tekst przycisku "Dodaj pasek do koszyka". * **Przycisk produktu** - przycisk "Dodaj" na każdej karcie produktu. * **Cena ogółem** - cały pakiet. **🛍️ Upsell Slider:** * **Nazwa bloku** - kurs suwaka (np. "Często kupowane razem"). * **Nazwa produktu** - nazwy produktów w suwaku. * **Cena** - ceny produktu. * **Przycisk** - tekst przycisku "Dodaj do koszyka". **🗂️ Kategoria Przerwa ilościowa:** * Te same elementy tekstowe, co przerwa ilościowa (Block Title, Oferta Tytuł, Zniżka Etykieta, Cena, Tag, Podtytuł, Footer, Przycisk, Cena całkowita), bez opcji stylizacji prezent i porównaj ceny. --- ## **🌈 Kolory widżetu (przerwa ilościowa i przerwa ilościowa kategorii)** Sekcja ta kontroluje tło i podświetla kolory pasków poziomów. Każda opcja jest pojedynczym wybieraczem kolorów z wejściem szesnastkowym. * **Kolor graniczny:** Kolor graniczny aktualnie wybranego poziomu - wyróżnia aktywny wybór. * **Kolor tła:** Kolor tła wybranego poziomu. * **Niewybrany pasek:** Kolor tła wszystkich niewybranych poziomów. * **Kolor tła etykiety:** Tło za etykietą rabatową na każdym poziomie. * **Kolor tła znacznika:** Tło znacznika (np. "Najbardziej popularne"). * **Kolor tła prezentu:** Tło darmowych wierszy prezentów (tylko quantity break). * **Kolor tła tagu prezentu:** Tło darmowego tagu upominkowego (tylko quantity break). 💡 **Wskazówka:** Użyj subtelnego kontrastu pomiędzy wybranymi i nie wybranymi backgroundami - to pomaga klientom natychmiast zobaczyć, który poziom wybrano. --- ## **📏 Rozmiar wariantu (przerwa ilościowa)** * **Co on robi?** Kontroluje wielkość przetwornika wariantu pokazanego na każdym poziomie, gdy produkt ma warianty. * **Opcje:** _Małe_, _Średni_lub _Duże_ - wystarczy kliknąć odznakę, aby ją wybrać. --- ## **📐 Granica** Dostępny w zakładce Design każdego typu oferty. * **Szerokość graniczna (0- 10px):** Dostosuje grubość granicy wokół widżetu (i pręty poziomu dla przerwy ilościowej). Ustaw go na 0, żeby wyglądał bez granic. * **Promień graniczny (0- 50px):** Steruje jak zaokrąglone rogi pojawiają się. Niższe wartości dają ostry, nowoczesny wygląd; wyższe wartości dają miękki, zaokrąglony wygląd. --- ## **🖌️ Tło & Kolory Graniczne (Karty, Footer, Tagi i przyciski)** Dostępne dla **Oferta pakietu**, **Dodatki do produktu**, **Suwak upsell**oraz **BIOB**Te bloki pozwalają ustawić oba **Kolor granic** oraz **Kolor tła** dla kluczowych bloków wizualnych widżetu. **📦 Oferta pakietowa i dodatki do produktów:** * **Produkt** - karty produktu wewnątrz pakietu. * **Footer** - obszar stóp na dnie widżetu. * **Zaznaczony znacznik** - podświetlona odznaka. * **Przycisk** - przycisk "Dodaj do koszyka". **🛍️ Upsell Slider:** * **Produkt** - karty produktów w suwaku. * **Przycisk** - przycisk "Dodaj do koszyka". **🧺 /** * **Przycisk** - główny przycisk "Dodaj pasek do koszyka". * **Przycisk produktu** - przycisk "Dodaj" na każdej karcie produktu. 💡 **Wskazówka:** Dla przycisków, ustawić kolor tła do pierwotnego koloru marki i dopasować kolor Graniczny do niego za czysty, solidny przycisk. --- ## **⚙️ Wtyczki wyglądu (przerwa ilościowa - karta ogólna)** Kilka opcji wizualnych dla Przerwa ilościowa żyć w **Ogólne** tab under **Ustawienia → Wygląd i wygląd** zamiast zakładki Design: * **Pokaż cenę jednostkową:** Wyświetla cenę jednostkową w ramach każdego poziomu, dzięki czemu klienci mogą dokładnie zobaczyć, ile kosztuje każdy element. * **Pokaż całkowitą cenę:** Wyświetla całkowitą cenę dla każdego poziomu. * **Ukryj linie nagłówka i stopki:** Usuwa linie dzielące na górze i na dole widżetu dla czystszego, bardziej minimalny wygląd. ℹ️ BYOB oferuje również **Szablon** opcja w zakładce Ogólne (_Wybrać_ lub _Podziel_) który zmienia ogólny układ strony pakietowej. --- ## **📌 Ważne uwagi** * ⚠️ **Napisy zastępują stylizację na zamówienie.** Zastosowanie szablonu lub przełączanie motywów (Przerwa ilościowa) resetuje ustawienia projektu do ustawień motywu. Zawsze najpierw stosuj motywy, a następnie dostosowuj. * ⚠️ **Limit rozmiaru tekstu.** Poszczególne elementy tekstowe nie mogą przekraczać 20px - większe wartości wywołują błąd walidacji. * ℹ️ **Czcionka stosuje widget- wide.** Ustawienie Czcionka wpływa na cały tekst widgetu; w celu podkreślenia konkretnych elementów należy użyć ustawienia typu per- element Style (Bold, Italic itp.). * ℹ️ **Czcionka motywu jest najbezpieczniejszym wyborem.** "Użyj czcionki motywu" gwarantuje, że widget pasuje do twojej typografii sklepowej z zerowym wysiłkiem. * ℹ️ **Ustawienia projektowe są per- offer.** Każda oferta ma własny, niezależny projekt - stylizacja jednej oferty nigdy nie wpływa na inne oferty. * ℹ️ **Podgląd kontra sklep.** Na żywo podgląd wykorzystuje próbki danych. Po zapisaniu i publikacji, sprawdź ofertę na prawdziwej stronie produktu, aby potwierdzić odstępy i czcionek patrzeć w prawo wewnątrz tematu. --- ## **💡 Przykłady i przypadki użycia** * **Dopasuj swoją markę dokładnie:** Wprowadź kody szesnastkowe swojej marki do przycisków, tytułu bloku i podświetl kolory, a następnie ustaw czcionkę do najbliższego dopasowania do czcionki motywu. * **Zrób najlepszy pop na poziomie (Przerwa ilościowa):** Daj swój "Najbardziej popularne" na poziomie pogrubiony styl Tag, kontrastujący kolor tła Tag, i silny kolor Border tak oczy kupujących przejść prosto do niego. * **Czysty wygląd minimalny:** Ustaw szerokość ramki na 0, ukryj linie nagłówka / stopki i użyj "Użyj czcionki motywu" dla widżetu, który wygląda rodzime dla tematu. * **Przyciski kontrastowe:** Tło ciemnego przycisku + biały tekst przycisku + pasujący kolor graniczny = przycisk, który zostaje kliknięty. * **Miękkie, przyjazne wibracje:** Bump Border Radius up (20- 50px) i wybrać pastelowy kolor tła dla wybranego poziomu. --- ## **🚀 Wynik końcowy** Po skonfigurowaniu pomyślnie, **Projektowanie i stylizacja** ustawienia pomagają tworzyć oferty, które wyglądają jak naturalna część sklepu - a nie bolted-on widget. Z odpowiednim stylizowaniem na miejscu: ✅ Oferta widżety czują się w pełni zgodne z marką sklepu ✅ Niższe poziomy i oszczędności pakietów stają się łatwiejsze do skanowania i zrozumienia ✅ Przyciski best- value i CTA wyróżniają się wizualnie ✅ Darmowe prezenty i zaznaczone tagi zwrócić uwagę klienta ✅ Oferty wyglądają na polerowane i spójne zarówno na pulpicie, jak i w telefonie ✅ Klienci cieszą się płynniejszym, bardziej godnym zaufania doświadczeniem w zakupach Korzystanie z tych opcji projektowania i stylizacji skutecznie może znacznie poprawić zaangażowanie klientów, prezentacji sklepowej i ogólnego potencjału konwersji ✨