Niestandardowy CSS

Poradnik Wszystkie plany 2 min czytania

Użyj pola Arkusz stylów / CSS, gdy ustawienia, czcionki i kolory nie wystarczają — do specjalnego efektu po najechaniu, rozmiaru czcionki jednego elementu lub drobnej poprawki szablonu. CSS jest zapisywany razem z menu i dodawany do sklepu po publikacji.

Notatka

Niestandardowy CSS wymaga podstawowej znajomości CSS. Jeśli wolisz nie pisać kodu, skontaktuj się z nami — bezpłatnie pomagamy w drobnych zmianach stylu.

Dodawanie niestandardowego CSS

1. Otwórz kartę Zaawansowane

   W edytorze menu kliknij ikonę Zaawansowane (</>) na lewym pasku bocznym (1).

   

   Otwórz kartę Zaawansowane (1) i wpisz CSS w polu Arkusz stylów / CSS (2).

2. Dodaj swój CSS

   Wpisz lub wklej CSS w polu Arkusz stylów / CSS (2), zastępując tekst zastępczy //enter css custom here.

3. Zapisz i opublikuj

   Kliknij Zapisz, a potem Opublikuj. Wymuś odświeżenie sklepu, aby zobaczyć efekt.

Wskazywanie właściwych elementów

CSS jest dodawany do strony bez zmian i nie ogranicza się do tego menu, więc zawężaj selektory:

• Wszystkie menu — zacznij od .gm-menu.
• Jedno menu — zacznij od .gm-menu-<ID>. Aby znaleźć ID, kliknij menu w sklepie prawym przyciskiem myszy i wybierz Zbadaj.
• Jeden element — nadaj mu Dodatkową nazwę klasy w sekcji Zaawansowane ustawień elementu (zobacz Edytowanie elementu menu), a potem użyj tej klasy.

Na przykład, aby element z dodatkową nazwą klasy sale-item był pogrubiony i czerwony:

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

Karta Zaawansowane zawiera też Dostępność na rynkach, która ogranicza menu do wybranych rynków — zobacz Menu według rynku.

Rozwiązywanie problemów

Mój CSS nie działa

• Sprawdź, czy po zapisaniu kliknięto Opublikuj.
• Własne style aplikacji często używają !important, więc Twoja reguła też może tego potrzebować.
• Poszukaj literówek, np. brakującego } — jeden błąd może wyłączyć wszystkie reguły po nim.

Powiązane strony

• Dostosowywanie kolorów menuUstaw kolory paska menu, podmenu, zakładek, etykiet produktów i przycisku dodawania do koszyka.
• Dostosowywanie czcionek menuWybierz rodzinę, grubość i rozmiar czcionki dla każdej części menu.
• Edytowanie elementu menuZmień tytuł, link, ikonę, kolory, plakietkę, podmenu i widoczność elementu albo go zduplikuj, przenieś lub usuń.

Czy to było pomocne?

Zgłoś problem