Jak dopasować widżet do kolorów motywu

Bundlex pozwala dopasować widżet zestawu do wyglądu sklepu w kilku kliknięciach. Panel ustawień wstępnych kolorów widżetu odczytuje schematy kolorów motywu Shopify i sugeruje gotowe kombinacje kolorów, dzięki czemu oferty wyglądają jak naturalna część strony, a nie dodany element.

Gdzie znaleźć ustawienia wstępne kolorów

Otwórz zestaw w edytorze i przejdź do karty Styl. Panel ustawień wstępnych kolorów widżetu znajduje się nad szczegółowymi ustawieniami Styl widżetu. Użyj ustawień wstępnych, aby ustawić wszystko jednocześnie, a następnie, jeśli chcesz, dopracuj kolory poszczególnych elementów w sekcji Styl widżetu poniżej.

Wybierz kolor główny

Wiersz Kolor główny stanowi punkt wyjścia dla całej palety. Możesz ustawić go na cztery sposoby:

• Sugerowane próbki - kolorowe próbki są pobierane bezpośrednio ze schematów kolorów motywu Shopify, na przykład kolorów przycisków, tekstu i tła. Kliknij jedną z nich, aby ją zastosować.
• Kolory domyślne - ciemnoszara próbka znajdująca się za próbkami motywu przywraca domyślne czarno-białe kolory widżetu.
• Kolor niestandardowy - kliknij próbkę z ikoną plusa, aby otworzyć selektor kolorów i wybrać dowolną wartość w formacie hex. Po wpisaniu wartości hex naciśnij Enter i sprawdź, czy podgląd się zmienił.
• Losowy kolor - kliknij próbkę odświeżania, aby wylosować kolor, jeśli chcesz po prostu poznać dostępne opcje.

Niezależnie od wyboru Bundlex natychmiast przebudowuje pozostałe kolory widżetu wokół niego i stosuje wynik w podglądzie na żywo.

Wybierz kolor akcentu, czyli kolor dodatkowy

Kolor dodatkowy to akcent używany w odznakach, aktywnych stanach i wyróżnieniach. Bundlex automatycznie go generuje, aby harmonizował z kolorem głównym, i oferuje kilka opcji harmonii w postaci próbek, które możesz kolejno wybierać.

Jeśli wolisz samodzielnie ustawić akcent, masz te same dwie opcje nadpisania co w wierszu koloru głównego:

• Niestandardowy kolor akcentu - próbka z plusem otwiera selektor umożliwiający wpisanie dokładnej wartości hex.
• Losowy kolor harmonii - próbka odświeżania wybiera z koła kolorów kontrastujący kolor, który nadal pasuje do koloru głównego.

Przełącznik przezroczystości ofert

Obok koloru głównego znajdziesz przełącznik Transparentne, który steruje tłem niezaznaczonych kart ofert:

• Wyłączone - tła niezaznaczonych ofert mają jednolity kolor, czyli jasny odcień wybranych kolorów, jeśli pochodzą one z ustawienia wstępnego, dzięki czemu każdy poziom wygląda jak osobna karta.
• Włączone - tła niezaznaczonych ofert pozostają przezroczyste, zapewniając czystszy, bardziej płaski wygląd, który wtapia się w stronę.

Przełączenie tej opcji zmienia wyłącznie przezroczystość tła niezaznaczonej oferty. Tła zaznaczenia i najechania, kolory tekstu, odznaki i obramowania pozostają bez zmian. Wyłączenie opcji ponownie nadaje tłu pełną nieprzezroczystość. Próbki klikane przy włączonej opcji stosują przezroczystą wersję danego ustawienia wstępnego.

Sugestia „Zastosuj promień zaokrąglenia”

Bundlex może pobierać z motywu nie tylko kolory. Jeśli wykryje, że promień zaokrąglenia rogów motywu różni się od bieżących zaokrągleń widżetu, pojawi się baner Zastosuj promień zaokrąglenia z komunikatem „Dopasuj zaokrąglenia widżetu do motywu”.

1. Kliknij Zastosuj na banerze, aby zastosować promień zaokrąglenia motywu do kart ofert, obrazów ofert i obrazów cross-sell widżetu.
2. Możesz też zamknąć sugestię za pomocą ikony zamknięcia, jeśli wolisz zachować bieżące zaokrąglenia.

Sugestia może się nie pojawić, ponieważ nie wykryto różnicy, motyw nie udostępnia użytecznego promienia zaokrąglenia lub sugestia została zamknięta. Nadal możesz samodzielnie ustawić zaokrąglenia w sekcji Styl widżetu.

Dopracuj poszczególne elementy

Po wybraniu palety rozwiń element w sekcji Styl widżetu. Karta oferty pozwala osobno dostosować jej promień zaokrąglenia, odstępy oraz stany zaznaczenia, najechania i braku zaznaczenia. W tym przykładzie ustawiliśmy promień karty na 8 pikseli. Najpierw zastosuj ustawienia wstępne, a następnie wprowadź te końcowe korekty, ponieważ wybranie innego ustawienia wstępnego może zastąpić indywidualne wybory kolorów.

Zapisz i sprawdź sklep

Kliknij Zapisz. Przetestuj aktywną zniżkę na stronie docelowego produktu. Wybierz każdą ofertę, sprawdź kontrast tekstu i odznaki, wybierz warianty i użyj opcji Dodaj do koszyka. Sprawdź stronę na komputerze i urządzeniu mobilnym, ponieważ podgląd edytora nie może pokazać każdego tła motywu ani każdego rozmiaru ekranu.

Nasz przykład zachowuje te same zasady rabatów ilościowych: dwa produkty Ivory Small mają sumę częściową $43.20 po rabacie 10%. Styl zmienia sposób prezentacji, ale nie zmienia obliczania zniżki. W ramach końcowego sprawdzenia skontroluj koszyk i kasę.

Jak generowane są sugestie

Bundlex odczytuje ustawienia kolorów motywu i na ich podstawie tworzy dopasowane odcienie. Sugestie oparte na motywie są powtarzalne przy tych samych ustawieniach motywu. Elementy Losowy kolor i Losowy kolor harmonii celowo generują nowe propozycje.

Wskazówki

• Ustawienia wstępne to szybki punkt wyjścia. Po zastosowaniu jednego z nich nadal możesz dostosować kolor dowolnego pojedynczego elementu w sekcji Styl widżetu.
• Jeśli nie pojawiają się sugerowane próbki, Bundlex nie mógł odczytać wartości kolorów z aktywnego motywu. Nadal możesz korzystać z opcji niestandardowych i losowych.
• Użyj podglądu na żywo, aby sprawdzić kontrast, szczególnie przy włączonym przełączniku Transparentne, tak aby odznaki i tekst pozostały czytelne na tle strony.