Custom CSS

Użyj pola Custom CSS, gdy kontrolki wyglądu nie wystarczają.

Ustawienia wyglądu każdego typu odliczania kończą się polem Custom CSS (Developer Zone). Wszystko, co tam wpiszesz, jest stosowane do danego odliczania w Twoim sklepie, ponad ustawieniami wprowadzonymi za pomocą kontrolek wizualnych.

Pole Custom CSS Developer Zone na dole ustawień wyglądu

Pole Custom CSS na końcu ustawień wyglądu.

Kiedy to naprawdę się przydaje

Precyzyjne ustawienie położenia – korekta marginesów odliczania, aby poprawnie wyglądało w motywie z nietypowymi odstępami.
Poprawki responsywne – zapytanie media dla punktu przerwania, którego nie obejmują ustawienia mobilne.
Dopasowanie szczegółu motywu – konkretny promień zaokrąglenia lub cień używany w całym motywie, którego kontrolki nie potrafią dokładnie odtworzyć.
Ukrywanie elementu – usunięcie części odliczania, której nie można wyłączyć w inny sposób.

Jak go pisać

Pole przyjmuje zwykły CSS – selektory i reguły, bez znacznika <style>:

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

Kontener samego odliczania ma klasę samita-countdown, a każde wyświetlone odliczanie otrzymuje identyfikator zbudowany na podstawie jego ID. Aby wskazać coś bardziej szczegółowego, sprawdź wyświetlone odliczanie w narzędziach deweloperskich przeglądarki i użyj znalezionych tam klas.

Ogranicz zakres

CSS w tym polu nie jest automatycznie ograniczony do odliczania. Selektor taki jak img { ... } obejmie każdy obraz na stronie.

Zawsze dodawaj przedrostek do reguł, aby dotyczyły tylko odliczania:

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

Przetestuj na prawdziwej stronie

Podgląd w kreatorze nie odtwarza Twojego motywu, więc CSS, który wyrównuje element w podglądzie, może nie wyrównać go na stronie produktu. Zapisz, otwórz prawdziwą stronę i sprawdź – na komputerze i na telefonie.

Jeśli wolisz nie pisać CSS

Pomoc techniczna może pomóc w dopasowaniach specyficznych dla motywu. Obok pola Custom CSS aplikacja ma przycisk Chat now!, opisany jako „Chat with us to customize countdown in your theme.” Możesz też skontaktować się z pomocą techniczną, podając link do strony i opis tego, co chcesz zmienić.

Następne kroki

Czy to było pomocne?