Eigen CSS

Voor opmaak die verder gaat dan de visuele editor bevat Sami Product Labels een ingebouwde CSS-editor. Je kunt ook de gelaagdheid van badges bepalen met z-index, tooltips bij hover toevoegen en alttekst voor afbeeldingsbadges instellen.

Eigen CSS toevoegen

1. Open de badge-editor

   Ga in Sami Product Labels naar Badges & Labels. Selecteer Create badge, of selecteer voor een bestaande badge het pictogram Edit badge/label in de kolom Actions.

2. Ga naar het tabblad Design

   Selecteer Design in de badge-editor. Dit tabblad is standaard geselecteerd wanneer de editor opent.

3. Scrol naar Advanced Settings

   Vouw Advanced settings uit onderaan het tabblad Design.

4. Schakel “Custom css” in

   Zet onder Advanced de optie Custom css aan.

5. Voeg een selector in en voeg je CSS toe

   De CSS-editor verschijnt met drie opties onder CSS reference:

   • .samita_productLabel-content geeft de hele badge opmaak.
   • .samita_productLabel-content-text geeft tekstbadges opmaak.
   • .samita_productLabel-content img geeft afbeeldingsbadges opmaak.

   Selecteer de gewenste optie. De app voegt een selector in de editor in die is afgebakend met de ID van de huidige badge, zoals .__content--94129. Behoud dat badgespecifieke deel van de selector en voeg binnen de accolades alleen de declaraties toe die je nodig hebt.

   /* 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;
   }

   

   Selecteer een klasse onder CSS reference om een badgespecifieke selector in de Custom CSS-editor in te voegen.

6. Bekijken en opslaan

   Controleer het live voorbeeld terwijl je bewerkt. Selecteer Save als het resultaat goed is en controleer daarna de badge op de relevante collectie- of productpagina in je webshop.

Opgepast

Eigen CSS wordt bij deze badge opgeslagen, maar de selectors bepalen nog steeds op welke elementen in je webshop de CSS van invloed kan zijn. Behoud de badgespecifieke selector die de app genereert. Een brede selector zoals .samita_productLabel-content alleen kan ook andere badges raken.

Z-index-beheer

Los een badge op die achter een overlay van de productafbeelding, een vaste koptekst of een andere badge verdwijnt.

1. Schakel in Advanced settings de optie Z-index in.
2. Voer een waarde van 1 tot 100 in. Hogere waarden plaatsen de badge voor elementen met een lagere z-index.

Stel een z-index-waarde in om de gelaagdheid van de badge te bepalen.

Opmerking

Z-index wordt ook beïnvloed door de stapelcontext die je thema aanmaakt. Als de badge door een hogere waarde niet naar voren komt, moet mogelijk de CSS van een bovenliggende container in het thema worden aangepast.

Tooltip bij hover

Voeg een tooltip toe die verschijnt wanneer klanten met de muisaanwijzer over je badge gaan. Handig om uit te leggen wat “New Arrival” of “Limited Edition” betekent zonder de productafbeelding te vullen.

1. Schakel in Advanced settings de optie Show tooltip on hover in.
2. Voer de tekst in die bij hover moet verschijnen.

Voeg tooltiptekst toe die wordt getoond wanneer klanten met de muisaanwijzer over de badge gaan.

Zet essentiële informatie niet alleen in de tooltip. Gebruikers van een touchscreen en klanten die met het toetsenbord navigeren, activeren mogelijk geen hoverstatus.

SEO-alttekst voor afbeeldingsbadges

Stel alttekst in zodat schermlezers de betekenis van een afbeeldingsbadge kunnen beschrijven. Beschrijvende alttekst kan ook helpen bij de SEO van afbeeldingen.

1. Schakel in Advanced settings de optie Seo alt text in.
2. Voer een beknopte beschrijving in van de boodschap van de badge, zoals “20% off sale badge” of “Free shipping label”. Vermijd het volstoppen met zoekwoorden en uitdrukkingen als “afbeelding van”.

Stel alttekst in voor toegankelijkheid en SEO.

Volgende stappen

• Badgestijl wijzigen: pas je badge aan met de opties van de visuele editor.
• Badgepositie wijzigen: plaats je badge op de juiste plek op de pagina.

Tip

Hulp nodig?

Loop je tijdens deze stappen ergens tegenaan? Neem dan contact met ons op via [email protected].