> ## 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). # 🎨 Darmowa wysyłka Upsell Bar - 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 wygląda bar Free Shipping Upsell i czuje się w całym sklepie. Od kolorów i odstępów do typografii, animacji, przycisków i kart upsell - prawie każdy aspekt wizualny można dostosować do marki. Dostarczyliśmy szeroki zakres ustawień, więc można albo: * Szybkie uruchamianie przy użyciu gotowych szablonów * Lub głęboko dostosować każdy szczegół idealnie dopasować swój sklep Większość ustawień związanych z kolorem obejmuje: * Wybór kolorów * Wejście kodu szesnastkowego To ułatwia wybór wizualny lub dokładne kolory marki. # **⚠️ Zanim zaczniesz** Konfigurowanie ustawień projektu: → Otwórz istniejącą konfigurację Free Shipping Upsell → Albo najpierw utworzyć nowy zestaw Następnie: * Dla **Na podstawie miejsca** przepływ pracy → Otwórz **Projekt** tab * Dla **W oparciu o cele** przepływ pracy → Otwórz zakładkę umieszczenia, którą chcesz dostosować ℹ️ Ustawienia stylizacji są dostępne w różny sposób w zależności od stosowanego typu przepływu pracy. --- ## **🎨 Szablon** * **Co on robi?** Pozwala na natychmiastowe zastosowanie wstępnie zrobionego stylu wizualnego do swojego baru Free Shipping Upsell. * **Jak stosować:** Wybierz spośród dostępnych szablonów, aby szybko kickstart swój projekt bez ręcznego dostosowywania każdego ustawienia. --- ## **👀 Widoczność** * **Co on robi?** Kontroluje, gdzie pojawi się bar Free Shipping Upsell. * **Opcje:** * _Komputer stacjonarny i mobilny_ - Widoczne na wszystkich urządzeniach. * _Tylko pulpit_ * _Tylko mobilne_ --- ## **📏 Szerokość paska** * **Co on robi?** Kontroluje szerokość poziomą paska Free Shipping. * **Jak stosować:** Zwiększenie lub zmniejszenie procentu szerokości w zależności od tego, jak kompaktowa lub szeroka ma się pojawić sekcja. --- ## **🖼️ Styl tła** * **Co on robi?** Zmienia wygląd tła Free Shipping Upsell Bar. * **Dostępne opcje:** * **Pojedynczy kolor** - Zastosuj jeden kolor tła. * **Gradient** - Zmieszać dwa kolory gładko. * **Wzory** - Zastosuj dekoracyjne wzory tła. ### **🎨 Pojedynczy kolor** * Wybierz kolor za pomocą **Wybór koloru** lub ręcznie wprowadzić **Kod szesnastkowy**. ### **🌈 Gradient** * **Stopień gradientu kątowego:** Steruje kierunkiem działania gradientu. * **Wybór kolorów 1 i 2:** Wybierz dwa kolory używane w gradiencie. ### **✨ Wzory** * Włącza **Wybierz wzór** opcja, gdzie można wybrać z różnych built- w wzorcach tła. --- ## **📐 Granice i narożniki** * **Promień graniczny (px):** Steruje jak zaokrąglone rogi sekcji pojawiają się. * **Rozmiar graniczny (px):** Dostosuje grubość granicy. * **Kolor graniczny:** Zmienia kolor granicy za pomocą znacznika kolorów lub wejścia szesnastkowego. --- ## **📏 Odstęp** Ta sekcja pomaga kontrolować odstępy zarówno wewnątrz jak i na zewnątrz baru Free Shipping Upsell. * **Na zewnątrz góry / dołu:** Dodaje odstępy poza sekcją, aby oddzielić ją od otaczających elementów. * **Wewnątrz góry / dołu:** Dodaje wewnętrzny odstęp pomiędzy zawartością a krawędziami sekcji. Oto co oznacza odstęp zewnętrzny / wewnętrzny: --- ## **🎆 Dodaj animację fajerwerków** * **Co on robi?** Dodaje subtelny efekt animacji fajerwerków po osiągnięciu celów. * **Opcje:** * Pokaż fajerwerki **każde osiągnięcie celu**. * Pokaż fajerwerki **tylko w końcowym celu**. --- ## **🔤 Typografia** Ta sekcja kontroluje, jak wszystkie elementy tekstowe pojawiają się w całym pasku Free Shipping Upsell. ### **📝 Konfiguracja wiadomości** * **Rozmiar wiadomości:** Dostosuje rozmiar głównego tekstu wiadomości. * **Kolor wiadomości:** Zmienia kolor wiadomości powyżej paska postępu. ### **🎉 Kolor wiadomości** * Zmienia kolor wiadomości sukcesu wyświetlanej po osiągnięciu celu. ### **🔠 Czcionka** * Wybierz spośród dostępnych czcionek lub wybierz **Użyj czcionki motywu** dopasowanie motywu sklepu automatycznie. ### **💪 Masa czcionki** * Kontroluje, jak śmiały lub jasny pojawia się tekst. * Możesz również wybrać **Opryszczka** aby śledzić istniejącą masę czcionki Twojego motywu. ### **💰 Stylizacja tekstu ceny** Dostosuj jak cena pojawia się w wiadomości. * **Rozmiar:** Kontroluje wielkość czcionki podświetlonej ceny. * **Kolor:** Zmienia kolor tekstu cenowego. ### **✨ Animacja tekstu ceny** * Dodaje efekty animacji do tekstu cenowego, aby pomóc mu bardziej się wyróżniać. --- ## **📊 Pasek postępu** Sekcja ta pozwala dostosować wygląd i zachowanie paska postępu. ### **👁️ Pokaż pasek postępu** * Włącza lub wyłącza widoczność paska postępu. ### **🎨 Kolor tła** * Zmienia kolor tła niewypełnionego paska postępu. ### **🟩 Wypełnij kolor** * Kontroluje kolor wypełnionej sekcji postępu. ### **🎯 Znacznik celów wielokrotnych** Wybierz sposób wyświetlania wielu bramek w pasku postępu. * **Pokaż tylko jeden cel na raz** - Resetuje bar po osiągnięciu celu, aby skupić się na następnym. * **Pokaż wszystkie cele jednocześnie** - Wyświetla wszystkie kamienie milowe w jednym barze. Przykład: ### **📦 Styl paska** * Wybierz z dostępnych stylów wizualnych dla paska postępu. ### **📐 Szerokość** * Kontroluje szerokość paska postępu. ### **⭕ Promień rogu** * Dostosuje jak zaokrąglone narożniki pasków postępu pojawiają się. ### **📏 Wysokość** * Kontroluje grubość / wysokość pręta postępu. ### **Przestrzeń powyżej / poniżej** * Reguluje odstępy powyżej i poniżej paska postępu. --- ## **🔘 Projekt przycisku** Ta sekcja dostosowuje przycisk CTA pokazany obok wiadomości Free Shipping. **Notatka:** Niniejsza sekcja ma zastosowanie tylko wtedy, gdy **Przycisk** jest wybrany jako **Zaproszenie do rodzaju działania** w zakładce Goal. ### **🎨 Kolor przycisku** * Zmienia kolor tła przycisku CTA. ### **🔤 Rozmiar i kolor przycisku** * Kontroluje rozmiar tekstu i kolor wewnątrz przycisku. ### **⭕ Promień rogu** * Reguluje jak zaokrąglone są narożniki guzików. ### **📦 Styl przycisku** * Szybkie przełączanie stylów takich jak: * _Kwadrat_ * _Zaokrąglone_ * _W pełni zaokrąglone_ ### **💪 Masa czcionki** * Kontroluje grubość tekstu przycisku. ### **✍️ Styl czcionki** * Włączenie / wyłączenie między: * _Normalny_ * _Włoski_ * _Podkreślenie_ ### **✨ Styl animacji przycisku** * Dodaje ciągły efekt animacji do przycisku. ### **🖱️ Efekty przyciskowe** * Dodaje efekty interaktywne, gdy użytkownicy unoszą się na przycisku. --- ## **🛍️ Projekt upsell** Sekcja ta dostosowuje wygląd sekcji upsell. **Notatka:** Niniejsza sekcja ma zastosowanie tylko w przypadku opcji upsell innej niż **Brak upsella** jest wybrany w zakładce Upsell / Placement. ### **🔤 Typografia** #### **🏷️ Tytuł upsell** * **Rozmiar tytułu:** Kontroluje wielkość pozycji Upsell. * **Kolor tytułu:** Zmienia kolor nagłówka Upsell. #### **📦 Nazwa produktu** * **Rozmiar tytułu produktu:** Kontroluje wielkość nazwy produktu. * **Kolor tytułu produktu:** Zmienia kolor tytułu produktu. #### **💰 Stylizacja cen** * **Wielkość ceny:** Kontroluje rozmiar tekstu cenowego produktu. * **Kolor ceny:** Zmienia kolor ceny produktu. #### **➡️ Styling strzałek** * **Rozmiar strzałki:** Kontroluje rozmiar strzałek nawigacyjnych. * **Kolor strzałki:** Zmienia kolor strzałki. ### **🔘 Dodaj do koszyka przycisk Styling** * **Kolor przycisku:** Zmienia kolor tła przycisku. * **Rozmiar i kolor przycisku tekstu:** Kontroluje wygląd tekstu. * **Promień rogu:** Reguluje okrągłość przycisku. * **Styl przycisku:** Wybierz z dostępnych stylów przycisków. * **Masa czcionki:** Kontroluje grubość tekstu. * **Styl czcionki:** Przełączanie pomiędzy różnymi stylami tekstu. --- ## **💻 CSS (dla deweloperów)** 💡**Zaawansowana funkcja**: Jeśli chcesz dodać całkowicie unikalną stylizację, która nie jest dostępna w standardowych ustawieniach, możesz wkleić swój własny CSS bezpośrednio do edytora. * **Klasy docelowe:** * Cały pojemnik na odznaki: **`.futureblink-free-shipping`** * Wiadomość o postępach: **`.futureblink-free-shipping .futureblink-message`** * Ikona nad paskiem Progress: **`.futureblink-free-shipping .futureblink-icon`** * Przycisk akcji: **`.futureblink-free-shipping .futureblink-cta-button`** * Kliknij **Zastosuj** aby natychmiast przetestować swój styl. '⚠️ Uwaga: Jeśli style nie są stosowane po kliknięciu Zastosuj, uprzejmie spróbuj ponownie dodając **`!important`** do każdej deklaracji. --- ## **🎯 Ustawienia ikon** Dodaj ikonę wyświetlaną nad paskiem postępu. ### **🖼️ Wybierz / Usuń ikonę** * Otwórz budynek w bibliotece ikon, aby wybrać ikonę. * Usuń aktualnie wybraną ikonę w każdej chwili. ### **📤 Wyślij ikonę** * Wyślij własną ikonę dla pełnej elastyczności. ### **📏 Rozmiar ikon i kolor** * Dostosuj rozmiar ikon i zmień jego kolor. --- ## **🚀 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: ✅ Bar Free Shipping wydaje się bardziej zgodny z marką sklepu ✅ Ważne wiadomości stają się bardziej zauważalne i wciągające ✅ Śledzenie postępu wydaje się czystsze i łatwiejsze do zrozumienia ✅ Przyciski CTA stają się bardziej atrakcyjne wizualnie ✅ Upsell sekcje mieszają się bardziej naturalnie w sklepach ✅ Klienci doświadczają bardziej polerowanego i interaktywnego interfejsu ✅ Kupcy zyskują lepszą kontrolę nad ogólnym wyglądem i doświadczeniem użytkowników Korzystanie z tych opcji projektowania i stylizacji skutecznie może znacznie poprawić zaangażowanie klientów, prezentacji sklepowej i ogólnego potencjału konwersji ✨