Dodaj własny CSS

Ustawienia stylu aplikacji obejmują większość tego, czego potrzebują sklepy. Gdy to nie wystarcza – konkretny promień zaokrąglenia obramowania czy poprawka, która ma działać tylko na urządzeniach mobilnych – możesz dodać własny CSS.

Uwaga

To jedyna naprawdę techniczna strona w tej dokumentacji. Jeśli nie czujesz się swobodnie z CSS, opisz, czego chcesz, na [email protected]. Zespół zwykle potrafi dostarczyć gotowy fragment kodu, a CSS, którego nie napiszesz, to CSS, który nie może się zepsuć po aktualizacji motywu.

Zacznij od wbudowanych ustawień

Prawie każda zmiana wyglądu, do której ludzie sięgają po CSS, jest już ustawieniem w Quote settings > Customize. Sprawdź je, zanim cokolwiek napiszesz.

Gdzie	Co możesz ustawić
Button & widget > Style	Button type (Filled / Outline / Text link), Size (Medium / Large / Full width), Text color, Background color i Font size.
Quote form > Style	Gotowy styl oraz Match theme styling if possible.
Quote form > Customize text	Font style.
Quote form > Customize form color	Title bar color, Title bar background, Color, Background color, Border color i Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color i Background color – tylko te dwa ustawienia przyjmuje pływający widżet.

Większość zmian wyglądu to już ustawienia – zacznij od nich.

Notatka

Match theme styling if possible samo wykonuje sporą część pracy: „Theme styling applies on your storefront and is not shown in this preview.” Włącz je i obejrzyj działający sklep, zanim uznasz, że formularz potrzebuje CSS. Zobacz Match your theme style.

Uwaga

Jednego zadania nigdy nie należy powierzać CSS: ukrywania ceny lub przycisku zakupu. Advanced settings > Hide price ma do tego odpowiednie ustawienia, w tym Hide Add To Cart button i Hide Buy Now button. Reguła CSS zostawia cenę na stronie, gdzie może mignąć, zanim załaduje się arkusz stylów – zobacz Hide Add to Cart and Buy now.

Gdzie przechowywać CSS

Gdziekolwiek trzymasz własny CSS, trzymaj go w miejscu, w którym da się go odnaleźć i cofnąć. CSS w Twoim motywie ma przydatny efekt uboczny: jest wersjonowany razem z motywem, więc zduplikowanie motywu przed edycją daje Ci coś, do czego można wrócić.

Notatka

Przejdź przez wbudowane ustawienia powyżej, zanim cokolwiek napiszesz. Jeśli nie wiesz, czy zmiana należy do ustawienia, czy do CSS, najpierw zapytaj [email protected] – oszczędzisz sobie utrzymywania reguły, której nigdy nie potrzebowałeś.

Jak znaleźć, co wskazać

Kliknij element w sklepie prawym przyciskiem myszy i wybierz Inspect. Pokaże to nazwy klas, do których możesz pisać reguły.

Zbadaj przycisk wyceny w swoim sklepie, aby znaleźć, co wskazać.

Dwie rzeczy warto wiedzieć, zanim zaczniesz:

• Przycisk wyceny wyświetla się z ustawionym przez Ciebie Button text, w miejscu wybranym w Button position – sprawdź więc Product page button position, zanim zaczniesz go szukać.
• Pływający widżet wyceny z etykietą Quote (n) znajduje się w kontenerze z klasą grfq-quote-widget-container.

Notatka

Nie możesz znaleźć przycisku na stronie kolekcji, żeby go zbadać? Najedź kursorem na kartę produktu. W nowoczesnych motywach aplikacja podpina go do własnej kontrolki szybkiego dodawania motywu, więc ma zerową przezroczystość, dopóki karta nie zostanie najechana, a potem pojawia się jako mała ikona, a nie przycisk z etykietą. To zachowanie motywu, a nie brakujący styl – zobacz Quote button on collection pages.

Kilka praktycznych zasad

Zasada	Dlaczego
Zmieniaj jedną rzecz naraz	Gdy coś się zepsuje, będziesz wiedzieć, która reguła za to odpowiada.
Testuj na urządzeniach mobilnych	Większość próśb o wycenę pochodzi z telefonów, a poprawka tylko pod desktop często się tam psuje.
Trzymaj kopię gdzie indziej	Wklej CSS także do notatki, aby w razie potrzeby móc go przywrócić.
Unikaj !important, gdzie się da	Dziś wygrywa, a każdą przyszłą zmianę utrudnia.
Komentuj każdą regułę	Za pół roku niewyjaśniony blok CSS to coś, czego nikt nie ośmieli się usunąć.

Po zmianie motywu

Zacznij od osadzenia aplikacji w nowym motywie. Jest ono włączone w Twoim motywie, a dopóki nie zostanie włączone, nic z tego, co robi aplikacja, nie pojawia się w sklepie – zobacz Enable the app in your theme.

Następnie sprawdź swój CSS. Jest napisany pod kod HTML Twojego motywu, więc po zmianie motywu lub dużej jego aktualizacji sprawdź przycisk wyceny, formularz wyceny i pływający widżet – reguły mogą wymagać poprawek.

Następne kroki

• Change button text and colors – ustawienia przycisku, od których warto zacząć
• Match your theme style – pozwól formularzowi automatycznie podążać za motywem
• Contact support – poproś o fragment kodu