Dostosowywanie wyglądu poszczególnych elementów widżetu

Sekcja Styl widżetu dzieli widżet na stronie produktu na poszczególne elementy, dzięki czemu możesz stylizować każdy z nich osobno. Otwórz ją w edytorze zestawu, a znajdziesz zestaw paneli akordeonowych, po jednym dla każdego elementu, w których możesz kontrolować kolory, czcionki, obramowania, odstępy, odznaki i nie tylko.

Jak działa sekcja Styl widżetu

Otwórz kartę Styl zestawu i znajdź sekcję Styl widżetu. Kliknij nagłówek panelu, aby wyświetlić ustawienia danego elementu. Po najechaniu na nagłówek odpowiedni element zostanie wyróżniony w podglądzie. Niektóre panele pojawiają się tylko wtedy, gdy odpowiadająca im funkcja jest dostępna w zestawie.

Większość paneli zawiera te same podstawowe elementy: selektor koloru, rozmiar czcionki i selektor stylu czcionki. Panele służące do stylizowania pola, takie jak karta oferty lub odznaka, udostępniają również kolor tła, kolor obramowania, szerokość obramowania i promień zaokrąglenia. Zmiany są zapisywane razem z pozostałymi ustawieniami zestawu.

Panele, element po elemencie

Nagłówek

Steruje kolorem tekstu, rozmiarem czcionki i jej stylem w nagłówku widżetu. Wpisz tekst nagłówka wyżej na karcie Styl, aby wyświetlić opcję Wyrównanie nagłówka (Do lewej, Wyśrodkuj, Wyśrodkuj z linią przez środek lub Do prawej). Gdy wyrównanie jest ustawione na Wyśrodkuj z linią przez środek, w tym panelu pojawi się dodatkowe ustawienie koloru i grubości linii.

Karta oferty

To pole otaczające każdą ofertę, czyli poziom ilościowy. Jest to największy panel, ponieważ obejmuje trzy stany wizualne:

• Oferta niezaznaczona: kolor tła, kolor obramowania i szerokość obramowania dla stanu domyślnego.
• Najechanie na ofertę: te same trzy elementy sterujące, stosowane po najechaniu kursorem na kartę przez klienta.
• Wybrana oferta: te same trzy elementy sterujące dla aktualnie wybranej oferty.

Panel umożliwia także ustawienie wspólnych właściwości kart: promienia zaokrąglenia rogów, odstępu między kartami, poziomego i pionowego dopełnienia oraz opcji Radio, która pozwala wyświetlić lub ukryć przycisk radiowy. Animowany efekt tła ustawia się osobno za pomocą przełącznika Decoration wyżej, na karcie Style (Blobs, Rings, Hearts, Starburst, Percent, Stars, Clock lub Money), i pojawia się on tylko na wybranej ofercie. Kolory karty oferty wpływają także na wygląd przycisku radiowego.

Tytuł oferty i podtytuł oferty

Dwa osobne panele, każdy z ustawieniami koloru, rozmiaru czcionki i stylu czcionki dla wiersza tytułu oferty oraz wiersza jej podtytułu.

Etykieta rabatu

Umożliwia stylizowanie etykiety rabatu za pomocą koloru tekstu, koloru tła, rozmiaru czcionki i stylu czcionki. Pamiętaj, że te ustawienia wpływają także na dodatkowe plakietki prezentów.

Obraz oferty

Umożliwia ustawienie rozmiaru obrazu oferty, promienia zaokrąglenia rogów, koloru obramowania, szerokości obramowania oraz cienia (Brak, Mały, Średni lub Duży). Ustawia także sposób wyświetlania obrazu:

• Oryginalny: zachowuje naturalne proporcje obrazu.
• Kwadrat: przycina obraz do kwadratu.
• Kwadrat (góra): przycina obraz do kwadratu, zachowując jego górną część.
• Kwadrat (dopasuj): dopasowuje cały obraz do kwadratu bez przycinania.

Plakietka ilości

Umożliwia stylizowanie małej liczby wyświetlanej na obrazie oferty. Możesz ustawić jej kolor tekstu, kolor tła, promień zaokrąglenia rogów, rozmiar czcionki, styl czcionki oraz położenie (prawy górny róg, lewy górny róg, prawy dolny róg lub lewy dolny róg). Liczba jest wyświetlana na obrazie oferty, gdy włączona jest opcja „Pokaż plakietkę ilości”.

Etykieta wariantu

Ustawia kolor, rozmiar czcionki i styl czcionki tytułów opcji wariantów (na przykład Rozmiar lub Kolor) oraz numerów ich wierszy.

Lista rozwijana

W przypadku list rozwijanych wariantów użyj osobnego panelu Dropdown, aby dostosować tekst, tło, obramowanie, zaokrąglenie rogów i dopełnienie.

Plakietka oferty

Plakietka to wyróżnienie (na przykład „Najpopularniejsza”) wyświetlane na ofercie. Oprócz standardowych ustawień koloru tekstu, koloru tła, rozmiaru czcionki i stylu czcionki panel oferuje selektor kształtu plakietki z wieloma ustawieniami wstępnymi:

• Domyślny, Zagięty, Pigułka
• Strzałka w prawo, Strzałka w lewo
• Kwadrat
• Baner, Baner zaokrąglony
• Wstęga narożna, Wstęga boczna, Alternatywna wstęga boczna, Zaokrąglona wstęga boczna

Cena

Panel Cena obejmuje trzy style tekstu, każdy z własnym kolorem, rozmiarem czcionki i stylem czcionki:

• Cena główna: aktualna cena sprzedaży.
• Cena porównawcza: przekreślona cena „przed”.
• Tekst ceny za sztukę: tekst ceny jednostkowej.

Zestaw

Zestawy produktów mają także panel Bundle do ustawiania tekstu tytułu produktu, obramowania między elementami zestawu oraz znaku plusa między produktami.

Korzyści

Umożliwia stylizowanie listy korzyści. Możesz tu ustawić wspólny rozmiar czcionki i styl czcionki, a także osobne ustawienia koloru tekstu i koloru ikony, aby ikony i tekst mogły mieć różne kolory.

Prezent i upselle

Umożliwia stylizowanie bloku darmowego prezentu w dwóch stanach, z których każdy ma własny kolor tła, kolor tytułu, rozmiar czcionki i styl czcionki:

• Prezent wybranej oferty: blok prezentu na wybranej ofercie.
• Prezent niewybranej oferty: blok prezentu na pozostałych ofertach.

Trzecia grupa, Obraz prezentu, umożliwia ustawienie szerokości obrazu prezentu i promienia zaokrąglenia rogów.

Obrazy prezentów i wyskakujących okienek Mix & match

Otwórz Style > Modal style > Gift modal i znajdź opcję Image fit. Dostęp do tych ustawień możesz także uzyskać przez Customize modal style obok selektora prezentu lub Mix & match. Wybierz Original, aby zachować pełne proporcje zdjęcia, lub Square dla jednolitych miniatur. Ustawienie jest wspólne dla wyskakujących okien wyboru prezentu i puli zestawu w ramach tego rabatu, natomiast obrazy w głównym widżecie korzystają z osobnych ustawień obrazu oferty.

Stopka

Ustawia kolor, rozmiar czcionki i styl czcionki tekstu stopki widżetu.

Kontener i maksymalna szerokość

Panel Kontener kontroluje ogólną szerokość widżetu za pomocą ustawienia Maksymalna szerokość:

• Domyślna Shopify (44rem): ogranicza widżet do 44rem w dostępnej przestrzeni.
• Pełna szerokość (100%): pozwala widżetowi rozciągnąć się na szerokość kontenera.
• Niestandardowa: wyświetla pole Szerokość, w którym wpisujesz wartość w pikselach.

Panel zawiera także ustawienie Kolor alertu, używane dla tekstu alertu o niskim stanie magazynowym.

Użyj tutaj ustawień Margines górny i Margines dolny, aby dostosować odstęp wokół widżetu tego rabatu przed dodaniem niestandardowego CSS.

Pełna szerokość wypełnia kontener nadrzędny widżetu. Nie może poszerzyć wąskiej kolumny informacji o produkcie w motywie.

Wskazówki dotyczące edycji

• Podczas pracy obserwuj podgląd na żywo. Ponieważ najechanie kursorem na nagłówek panelu wyróżnia odpowiadający mu element, możesz upewnić się, że edytujesz właściwą część, zanim zmienisz wartość.
• Stylizuj wspólnie trzy stany karty oferty (niewybrana, po najechaniu i wybrana), aby wybrany stan wyraźnie wyróżniał się na tle pozostałych.
• Jeśli potrzebujesz stylów, których nie udostępniają panele, panel Custom CSS na dole sekcji pozwala dodać CSS nadpisujący style widżetu.