Własny CSS

Do stylizacji wykraczającej poza edytor wizualny Sami Product Labels zawiera wbudowany edytor CSS. Możesz też kontrolować warstwy plakietek za pomocą z-index, dodawać podpowiedzi po najechaniu kursorem i ustawiać tekst alternatywny dla plakietek z obrazem.

Jak dodać własny CSS

1. Otwórz edytor plakietek

   W aplikacji Sami Product Labels przejdź do Badges & Labels. Wybierz Create badge albo ikonę Edit badge/label w kolumnie Actions istniejącej plakietki.

2. Przejdź na kartę Design

   Wybierz Design w edytorze plakietek. Ta karta jest domyślnie wybrana po otwarciu edytora.

3. Przewiń do Advanced Settings

   Rozwiń Advanced settings w dolnej części karty Design.

4. Włącz „Custom css”

   W sekcji Advanced włącz Custom css.

5. Wstaw selektor i dodaj swój CSS

   Pojawi się edytor CSS z trzema opcjami w CSS reference:

   • .samita_productLabel-content stylizuje całą plakietkę.
   • .samita_productLabel-content-text stylizuje plakietki tekstowe.
   • .samita_productLabel-content img stylizuje plakietki z obrazem.

   Wybierz potrzebną opcję. Aplikacja wstawi do edytora selektor ograniczony do ID bieżącej plakietki, na przykład .__content--94129. Zachowaj tę część selektora specyficzną dla plakietki, a następnie dodaj w nawiasach klamrowych tylko potrzebne deklaracje.

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   Wybierz klasę w CSS reference, aby wstawić do edytora Custom CSS selektor ograniczony do plakietki.

6. Podgląd i zapis

   Sprawdzaj podgląd na żywo podczas edycji. Gdy wynik wygląda dobrze, wybierz Save, a następnie zweryfikuj plakietkę na odpowiedniej stronie kolekcji lub produktu w sklepie.

Uwaga

Własny CSS jest zapisywany razem z tą plakietką, ale jego selektory nadal określają, na które elementy sklepu może wpływać. Zachowaj selektor ograniczony do plakietki, wygenerowany przez aplikację. Szeroki selektor, taki jak sam .samita_productLabel-content, może pasować także do innych plakietek.

Kontrola z-index

Napraw plakietkę, która jest ukryta za nakładką obrazu produktu, przyklejonym nagłówkiem lub inną plakietką.

1. W Advanced settings włącz Z-index.
2. Wpisz wartość od 1 do 100. Wyższe wartości umieszczają plakietkę przed elementami o niższych wartościach z-index.

Ustaw wartość z-index, aby kontrolować warstwy plakietek.

Notatka

Na z-index wpływa też kontekst stosu tworzony przez Twój motyw. Jeśli zwiększenie wartości plakietki nie wysuwa jej na wierzch, element nadrzędny w motywie może wymagać własnej korekty CSS.

Podpowiedź po najechaniu kursorem

Dodaj podpowiedź, która pojawia się, gdy klienci najeżdżają kursorem na plakietkę – przydatne, by wyjaśnić, co oznacza „New Arrival” lub „Limited Edition”, bez zaśmiecania obrazu produktu.

1. W Advanced settings włącz Show tooltip on hover.
2. Wpisz tekst podpowiedzi, który ma się pojawiać po najechaniu kursorem.

Dodaj tekst podpowiedzi wyświetlany, gdy klienci najeżdżają kursorem na plakietkę.

Nie umieszczaj najważniejszych informacji wyłącznie w podpowiedzi. Użytkownicy ekranów dotykowych i klienci nawigujący klawiaturą mogą nie wywołać stanu najechania.

Tekst alternatywny SEO dla plakietek z obrazem

Ustaw tekst alternatywny, aby czytniki ekranu mogły opisać znaczenie plakietki z obrazem. Opisowy tekst alternatywny może też wspierać SEO obrazów.

1. W Advanced settings włącz Seo alt text.
2. Wpisz zwięzły opis komunikatu przekazywanego przez plakietkę, na przykład „20% off sale badge” lub „Free shipping label”. Unikaj upychania słów kluczowych i fraz takich jak „obraz przedstawiający”.

Ustaw tekst alternatywny dla dostępności i SEO.

Następne kroki

• Zmiana stylu plakietki – dostosuj plakietkę za pomocą ustawień edytora wizualnego.
• Zmiana pozycji plakietki – umieść plakietkę we właściwym miejscu na stronie.

Wskazówka

Potrzebujesz pomocy?

Jeśli napotkasz trudności podczas wykonywania tych kroków, napisz do nas na adres [email protected].