Custom CSS

For styling that goes beyond the visual editor, Sami Product Labels includes a built-in CSS editor. You can also control badge layering with z-index, add hover tooltips, and set alt text for image badges.

How to add custom CSS

1. Open the badge editor

   From Sami Product Labels, go to Badges & Labels. Select Create badge, or select the Edit badge/label icon in the Actions column for an existing badge.

2. Go to the Design tab

   Select Design in the badge editor. This tab is selected by default when the editor opens.

3. Scroll to Advanced Settings

   Expand Advanced settings near the bottom of the Design tab.

4. Enable “Custom css”

   Under Advanced, turn on Custom css.

5. Insert a selector and add your CSS

   The CSS editor appears with three options under CSS reference:

   • .samita_productLabel-content styles the entire badge.
   • .samita_productLabel-content-text styles text badges.
   • .samita_productLabel-content img styles image badges.

   Select the option you need. The app inserts a selector scoped with the current badge ID, such as .__content--94129, into the editor. Keep that badge-specific part of the selector, then add only the declarations you need inside the braces.

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

   

   Select a class under CSS reference to insert a badge-scoped selector into the Custom CSS editor.

6. Preview and save

   Check the live preview while you edit. When the result looks correct, select Save, then verify the badge on the relevant collection or product page in your storefront.

Caution

Custom CSS is saved with this badge, but its selectors still determine which storefront elements it can affect. Keep the badge-scoped selector generated by the app. A broad selector such as .samita_productLabel-content on its own can also match other badges.

Z-index control

Fix a badge that’s hidden behind a product image overlay, sticky header, or another badge.

1. In Advanced settings, enable Z-index.
2. Enter a value from 1 to 100. Higher values place the badge in front of elements with lower z-index values.

Set a z-index value to control badge layering.

Note

Z-index is also affected by the stacking context created by your theme. If raising the badge value does not bring it forward, a parent container in the theme may need its own CSS adjustment.

Tooltip on hover

Add a tooltip that appears when customers hover over your badge — useful for explaining what “New Arrival” or “Limited Edition” means without cluttering the product image.

1. In Advanced settings, enable Show tooltip on hover.
2. Enter the tooltip text that should appear on hover.

Add tooltip text that displays when customers hover over the badge.

Do not put essential information only in the tooltip. Touchscreen users and customers navigating with a keyboard may not trigger a hover state.

SEO alt text for image badges

Set alt text so screen readers can describe the meaning of an image badge. Descriptive alt text can also support image SEO.

1. In Advanced settings, enable Seo alt text.
2. Enter a concise description of the message conveyed by the badge, such as “20% off sale badge” or “Free shipping label”. Avoid keyword stuffing and phrases such as “image of.”

Set alt text for accessibility and SEO.

Next steps

• Change badge style — Customize your badge using the visual editor controls.
• Change badge position — Place your badge at the right location on the page.

Tip

Need support?

If you run into any difficulty while following these steps, contact us at [email protected].