ℹ️ 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 ✨

Aktualizowane na: 10/09/2026