ℹ️ 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, Projektoraz Ukierunkowanie i umiejscowienieKliknij Projekt aby otworzyć ustawienia stylizacji.

• Dla BIOB oferty, karty są Ogólne, Wybór produktu Logikaoraz 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 mobilnyKiedy 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 upselloraz BIOBTe 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 ✨

Aktualizowane na: 10/09/2026