> ## 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). # 🎨 Upsell & Cross Sell - 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 Upsell & Cross Sell widget wygląda i czuje na swoim sklepie. Od kolorów tła i odstępów do typografii i stylizacji guzików - każda wizualna część widgetu może być dostosowana do Twojej marki. Każda konfiguracja upsell (Strona produktu, Strona koszyka, Drawer koszyka, lub Custom position) ma swoje **własne niezależne ustawienia projektowe**, więc można styl widget szuflady koszyka inaczej niż widget strony produktu ✨ Większość ustawień związanych z kolorem obejmuje: * Wizualne **Wybór koloru** * A **Kod szesnastkowy** wejście To sprawia, że łatwo jest wybrać kolory wizualnie lub wkleić swoje dokładne kolory marki. # **⚠️ Zanim zaczniesz** Konfigurowanie ustawień projektu: → Otwórz istniejący Upsell & Cross Sell konfiguracja → Albo najpierw utworzyć nową konfigurację Potem otwórz **Projekt** zakładka na górze strony konfiguracji. ℹ️ Ustawienia projektu zmieniają tylko sposób, w jaki widget **wygląd**Co widget mówi (tytuły, tekst przycisku) jest skonfigurowany w zakładce Zawartość i może być przetłumaczone w tłumaczeniu. --- ## **👀 Podgląd na żywo** Podczas pracy wewnątrz zakładki Design, **podgląd na żywo** jest wyświetlany obok ustawień. Każda zmiana jest natychmiast odzwierciedlona w podglądzie - nie trzeba oszczędzać, aby zobaczyć jak rzeczy wyglądają. * **Podgląd pulpitu** - Pokazuje jak widget pojawia się na ekranach pulpitu. * **Podgląd mobilny** - Wyświetla widżet wewnątrz ramy o wielkości telefonu, dzięki czemu można zweryfikować czytelność na mniejszych urządzeniach. 💡 Podgląd wykorzystuje prawdziwe produkty upsell, tytuł i tekst przycisku, więc to, co widzisz jest bardzo zbliżone do tego, co klienci zobaczą na swoim sklepie. --- ## **🖼️ Kontekst** * **Co on robi?** Kontroluje wygląd tła upsell widget sekcji. * **Dostępne opcje:** * **Pojedynczy kolor** - Zastosuj jeden kolor tła. * **Gradient** - Zmieszać dwa kolory gładko. ### **🎨 Pojedynczy kolor** * Wybierz kolor za pomocą **Wybór koloru** lub ręcznie wprowadzić **Kod szesnastkowy**. ### **🌈 Gradient** * **Stopień nachylenia gradientu:** Steruje kierunkiem gradientu (0- 360 °). * **Wstępne i końcowe wybieranie kolorów:** Wybierz dwa kolory używane w gradiencie. 💡 Subtelny gradient może pomóc sekcji upsell wyróżniać się z reszty strony bez zderzenia z tematem. --- ## **📏 Odstęp** Ta sekcja kontroluje odstępy zarówno wewnątrz jak i na zewnątrz widget upsell. * **Wewnętrzna górna / dolna:** Dodaje wewnętrzny odstęp pomiędzy zawartością widżetu a krawędziami sekcji. * **Zewnętrzne górne / dolne:** Dodaje odstępy poza sekcją, aby oddzielić ją od otaczających elementów strony. Wszystkie wartości są ustawione w **piksele (px)**. 💡 Stosowanie **Na zewnątrz** odstępy do tworzenia przestrzeni oddychania między widżetem i elementów takich jak przycisk Dodaj do koszyka, i **Wewnątrz** Odstęp, aby zawartość nie dotykała krawędzi sekcji. --- ## **🔤 Typografia** Ta sekcja kontroluje jak wszystkie elementy tekstowe pojawiają się wewnątrz upsell widget. ### **🏷️ Tytuł upsell** * **Rozmiar tytułu:** Kontroluje wielkość pozycji sekcji upsell (np. _"Często kupowane razem"_). * **Upsell Kolor tytułu:** Zmienia kolor nagłówka sekcji. ℹ️ Sam tekst tytułu upsell jest edytowany w **Zawartość** Tab, nie tutaj. ### **📦 Nazwa produktu** * **Wielkość tytułu produktu:** Kontroluje wielkość każdej nazwy produktu wewnątrz widżetu. * **Kolor tytułu produktu:** Zmienia kolor tytułu produktu. ### **💰 Cena** * **Wielkość ceny:** Kontroluje rozmiar tekstu cenowego produktu. * **Kolor ceny:** Zmienia kolor ceny produktu. ### **➡️ Strzałka** * **Rozmiar strzałki:** Kontroluje rozmiar strzałek nawigacyjnych suwaka. * **Kolor strzałek:** Zmienia kolor strzałki. ℹ️ Strzałki nawigacyjne pojawiają się tylko wtedy, gdy widget zawiera **więcej niż jeden produkt** Prześlizgnąć się. --- ## **🔘 Przycisk** Ta sekcja dostosowuje przycisk upsell call- to- action (np. _"Dodaj do koszyka"_) dla każdego produktu. ### **🎨 Kolor przycisku** * Zmienia kolor tła przycisku. Granica przycisku automatycznie używa tego samego koloru. ### **🔤 Rozmiar i kolor przycisku** * Kontroluje rozmiar i kolor tekstu wewnątrz przycisku. ### **⭕ Promień narożny i styl przycisków** * **Promień rogu:** Ustawia jak pojawiają się zaokrąglone rogi guzików, w pikselach. * **Styl przycisku:** Szybko przełącz między _Kwadrat_, _Zaokrąglone_oraz _W pełni zaokrąglone_. ℹ️ Te dwa ustawienia pozostają automatycznie w synchronizacji: * Wybór **Styl przycisku** stosuje pasujący promień narożnika. * Wpisywanie **Promień narożnika** wartość uaktualnia styl - niskie wartości stają się _Kwadrat_, średnie wartości stają się _Zaokrąglone_i wysokie wartości stają się _W pełni zaokrąglone_. ### **💪 Masa czcionki** * Kontroluje, jak pogrubiony lub oświetlony jest tekst przycisku. * Wybierz **Opryszczka** aby śledzić istniejącą masę czcionki Twojego motywu lub wybrać odpowiednią wagę z **100** do **900** (śmiechu). ### **✍️ Styl czcionki** * Włączenie / wyłączenie między: * _Normalny_ * _Włoski_ * _Podkreślenie_ --- ## **💾 Zapisywanie i publikowanie Twojego projektu** Zmiany projektu nie są na żywo, dopóki nie zostaną zapisane. 1. Dokonaj zmian w **Projekt** tab - podgląd na żywo aktualizuje się natychmiast. 2. Kliknij **Zapisz** w pasku zapisu na górze strony. 3. Upewnij się, że upsell jest **Opublikowane** więc zaktualizowany projekt pojawia się na swoim sklepie. ⚠️ **Uwaga:** Wartości kolorów wprowadzone jako kody szesnastkowe są walidowane przy zapisie. Jeśli kod hex jest nieprawidłowy (na przykład brak `#` lub zawierające nieprawidłowe znaki), zapis zostanie zablokowany, a komunikat błędu podświetli pole, które wymaga naprawy. ℹ️ Jeśli Twój projekt jest zapisany i opublikowany, ale widżet sam nie jest widoczny w sklepie, przyczyna jest zwykle związana z osadzeniem aplikacji, umieszczeniem lub celowaniem - zobacz Upsell & Cross Sell Nie jest wyświetlanie na moim sklepie \[Naprawiono\]. --- ## **🛍️ Jak zmiany projektu odzwierciedlać na ulicy** Po zapisaniu opublikowanego ustawienia aplikacja automatycznie aktualizuje swój sklep. Widżet sklepowy czyta ustawienia Design i stosuje je wszędzie: * **Kontekst** → Wypełnia część widżetu jednym kolorem lub gradientem. * **Odstęp** → Stosuje wewnętrzne wyściełanie i marginesy zewnętrzne wokół widget. * **Typografia** → Styla tytuł upsell, tytuły produktów, ceny i strzałki nawigacyjne. * **Przycisk** → Stylizuje każdy produkt przycisk Dodaj do koszyka, w tym promień rogu, waga czcionki i styl czcionki. Ponieważ każdy typ konfiguracji (Strona produktu, Strona koszyka, Drawer koszyka, Custom Position) przechowuje swój własny projekt, zmiana jednego ustawienia nigdy nie wpływa na wygląd innych. --- ## **🚀 Wynik końcowy** Po skonfigurowaniu pomyślnie, **Projektowanie i stylizacja** ustawienia pomóc kupcom stworzyć bardziej wizualnie angażujące, profesjonalne, i konwersjonowane doświadczenie w zakupach. Z odpowiednią stylizacją na miejscu: ✅ Upsell widget czuje się dopasowany do marki sklepu ✅ Zalecenia produktów stają się bardziej zauważalne i angażujące ✅ Ceny i tytuły produktów pozostają czytelne zarówno na pulpicie, jak i w komórce ✅ Przyciski CTA stają się bardziej atrakcyjne wizualnie ✅ Każde miejsce może nosić swój własny wygląd i uczucie ✅ Klienci doświadczają bardziej polerowanego i wiarygodnego interfejsu Korzystanie z tych opcji projektowania i stylizacji skutecznie może znacznie poprawić zaangażowanie klientów, prezentacji sklepowej i ogólnego potencjału konwersji ✨