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

Aktualizowane na: 15/09/2026