Dodawanie niestandardowego CSS do widżetu

Bundlex udostępnia pełny edytor wizualny stylu widżetu, ale czasami trzeba zmienić szczegół, którego edytor nie udostępnia, albo nadpisać ustawienie wymuszane przez motyw. Niestandardowy CSS jest właśnie takim rozwiązaniem dla zaawansowanych użytkowników. W tym artykule opisujemy dwa miejsca, w których można go dodać, oraz sposób niezawodnego kierowania reguł do widżetu.

Dwa miejsca dodawania niestandardowego CSS

Dostępne są dwa osobne pola niestandardowego CSS, które różnią się zakresem działania.

Pole niestandardowego CSS zestawu

Każdy zestaw ma własną sekcję Niestandardowy CSS, dostępną na karcie Styl. Wklejony tutaj CSS jest zapisywany razem z tym konkretnym zestawem, dlatego to właściwy wybór, gdy zmiana ma dotyczyć tylko miejsca, w którym wyświetlany jest dany zestaw.

1. Otwórz zestaw w panelu administracyjnym Bundlex.
2. Otwórz kartę Styl i rozwiń sekcję Niestandardowy CSS, ostatnią pozycję w sekcji Styl widżetu.
3. Wklej reguły do edytora kodu. Pole podpowiada format za pomocą symbolu zastępczego: .bx-widget-container {margin-bottom: 10px;}.
4. Zapisz zestaw.

Pole niestandardowego CSS osadzania aplikacji

Osadzanie aplikacji Bundlex, czyli rozszerzenie aplikacji motywu włączane w edytorze motywu Shopify w sekcji Osadzania aplikacji, również ma pole Niestandardowy CSS, widoczne po włączeniu opcji Pokaż ustawienia zaawansowane. CSS dodany tutaj działa wszędzie tam, gdzie renderowane jest osadzanie, dlatego używaj go do zmian obejmujących cały motyw, które powinny obowiązywać na każdej stronie produktu z widżetem.

1. W panelu administracyjnym Shopify otwórz Sklep online i kliknij Edytuj motyw.
2. Otwórz Osadzenia aplikacji i znajdź Bundlex Bundles.
3. Włącz opcję Pokaż ustawienia zaawansowane i wklej reguły do pola Niestandardowy CSS.
4. Zapisz motyw.

Ogólna zasada: korzystaj z pola zestawu w przypadku zmian dotyczących pojedynczego zestawu, a z pola osadzania aplikacji w przypadku zmian, które mają obowiązywać wszędzie tam, gdzie wyświetlany jest widżet.

Kierowanie reguł do widżetu

Kod HTML Bundlex korzysta z klas bx-. Są one przydatnymi celami w aktualnym widżecie:

• .bx-widget-container - kontener widżetu.
• .bx-widget - zawartość widżetu.
• .bx-offer-wrap - kontener oferty.
• .bx-offer - karta oferty wewnątrz tego kontenera.
• .bx-active .bx-offer - karta wybranej oferty; klasa aktywna znajduje się na jej kontenerze.
• .bx-offer-title oraz .bx-offer-subtitle - tekst oferty.
• .bx-original-price oraz .bx-discounted-price - tekst ceny pierwotnej i obniżonej.

Ogranicz reguły do kontenera widżetu. Na przykład:

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

Sprawdź element na stronie produktu przed rozpoczęciem stylizacji. Kod HTML zależy od włączonych funkcji, a selektor skopiowany ze starszej wersji widżetu może już nie pasować.

Nadpisywanie stylów motywu za pomocą !important

Najpierw skorzystaj z wbudowanych ustawień. W przypadku szerokości widżetu wypróbuj Styl > Styl widżetu > Kontener > Maksymalna szerokość > Pełna szerokość (100%). Jeśli reguła motywu nadal nadpisuje wynik, sprawdź element, którego dotyczy problem, i użyj !important tylko przy deklaracjach, które tego wymagają. Na przykład:

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

Ten przykład wypełnia dostępny kontener nadrzędny, ale nie może poszerzyć wąskiej kolumny motywu. Jeśli reguła nie działa, sprawdź, czy selektor pasuje do wyrenderowanego elementu, arkusz stylów jest załadowany, a deklaracja jest prawidłowa. Następnie sprawdź, która konkurencyjna reguła ma pierwszeństwo. Bardziej szczegółowy selektor może wystarczyć bez !important.

Kiedy poprosić pomoc techniczną o pomoc

Oba pola niestandardowego CSS informują, że w razie potrzeby możesz skontaktować się z pomocą techniczną Bundlex, i jest to rzeczywiście dostępna opcja. Jeśli nie możesz ustalić właściwego selektora albo niestandardowy motyw nadpisuje Twoje reguły w sposób, którego !important nie rozwiązuje, wyślij do pomocy technicznej link do strony produktu oraz opis oczekiwanej zmiany. Pomoc techniczna może przekazać Ci przetestowany selektor do wklejenia.

To samo dotyczy pól selektorów wyświetlanych po włączeniu opcji Pokaż ustawienia zaawansowane w osadzaniu aplikacji, czyli niestandardowego umiejscowienia, przycisku dodawania do koszyka, formularza produktu oraz bloków ilości lub wariantów. Są to również selektory CSS, a pomoc techniczna może pomóc je uzupełnić w przypadku niestandardowych motywów, które nie są wykrywane automatycznie.

CSS nie zmienia zasad naliczania rabatów, ale może ukryć ceny, opcje lub przyciski i uniemożliwić klientom korzystanie z widżetu. Po zastosowaniu reguły przetestuj wszystkie stany ofert, warianty oraz przycisk Dodaj do koszyka na komputerach i urządzeniach mobilnych.