Custom CSS injection.

For tweaks that go beyond the Widget Editor's controls, you can add your own CSS that overrides Daima's default widget styles. Free on every plan. Scope it to the widget and it won't touch the rest of your theme.

Last updated · November 7, 2026

Where to find it

1. In the Daima admin, open Widget Editor from the left nav.
2. Click Advanced in the list of setting groups.
3. Type your CSS in the Custom CSS box.
4. Check the live preview, then click Save.

Your CSS is added after Daima's own styles, so your rules win when they target the same thing. The preview runs the same code as your storefront, so it shows your CSS as you type.

The scoping convention

Always start your selectors with .daima-widget. That class wraps the whole widget. Nesting your selectors under it keeps your CSS from touching the rest of your theme. Daima can't enforce this for you, so a rule without the .daima-widget prefix can leak into your theme.

Examples of correctly-scoped overrides:

.daima-widget {
  font-family: 'Custom Brand Font', sans-serif;
}

.daima-widget .daima-btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.daima-widget .daima-badge {
  background: linear-gradient(90deg, #ff6b35, #ffa500);
}

Class names you can target

These are the stable class names on the widget. They work in all three layouts (Tabs, Cards and Compact list):

• .daima-widget — the whole widget
• .daima-custom-title — the optional title above the benefits
• .daima-badge — the small badge (for example "MOST POPULAR")
• .daima-tab and .daima-tab-active — the One-time and Subscribe tabs (Tabs layout)
• .daima-card and .daima-card-selected — the option cards (Cards layout)
• .daima-list-row and .daima-list-row-selected — the option rows (Compact list layout)
• .daima-benefits and .daima-benefit — the benefit bullets
• .daima-frequency-select — the delivery frequency dropdown
• .daima-savings — the savings pill
• .daima-btn-primary — the Add to Cart button
• .daima-social-proof — the subscriber-count line
• .daima-loyalty — the loyalty line
• .daima-gift-section — the "Send as a gift" area

Your browser's "Inspect" tool shows the rest. Class names that start with daima- are Daima's; names without that prefix belong to your theme.

Changing colors with variables

Every color in the widget is a CSS variable named --daima-c-<name>, for example --daima-c-button_bg (button background) or --daima-c-badge_bg (badge background). The names match the colors listed under Colors → Advanced in the editor. In most cases it's simpler to set the color there. If you do use CSS, one thing to know: the widget sets these variables on .daima-widget itself, and that beats a plain rule on .daima-widget. Two ways to override:

/* Set the variable on the element that uses it */
.daima-widget .daima-btn-primary {
  --daima-c-button_bg: #123456;
}

/* Or change it for the whole widget with !important */
.daima-widget {
  --daima-c-button_bg: #123456 !important;
}

Overriding the older --daima-accent variable no longer recolors the button or the badge. Use --daima-c-button_bg and --daima-c-badge_bg instead.

What NOT to do

• Don't leave out the .daima-widget scope. Writing .btn { ... } instead of .daima-widget .btn { ... } can restyle your whole theme.
• Don't reach for !important by default. Daima's own styles don't use it, so your rules win without it. The one exception is the color-variable case above.
• Don't redo what the editor already does. Colors, font size, button radius, corner style and layout all have controls. Use those and keep CSS for things the editor doesn't offer, such as gradients or small typography tweaks.
• Don't use url(), @import or data:. See the next section — the widget refuses CSS that contains them.

When Daima ignores your CSS

To protect your shoppers, the widget checks your CSS before using it. If it finds anything on the blocked list, it ignores all of your custom CSS, not just the offending line. The preview and your storefront then look as if the box were empty. The blocked list:

• url(...) — so background images and image-based cursors aren't possible. Use gradients or colors instead.
• @import and @charset
• data: addresses
• javascript:, expression(...), behavior: and similar
• HTML such as <script> or <iframe>, and on...= event attributes

The CSS box also has a size limit: anything over 20,000 characters is ignored the same way. If your styling suddenly disappears after an edit, look for one of the items above.

Common use cases

Brand-specific micro-typography

Spacing and line-height tweaks specific to your brand voice:

.daima-widget .daima-custom-title {
  letter-spacing: -0.025em;
  line-height: 1.15;
}

A lift on the button

A small movement on hover. (For the hover color, use the Button hover color under Colors → Advanced.)

.daima-widget .daima-btn-primary {
  transition: transform 200ms ease;
}
.daima-widget .daima-btn-primary:hover {
  transform: translateY(-2px);
}

Mobile-only overrides

Tweaks that apply only on small screens, beyond the editor's mobile font-size and padding controls:

@media (max-width: 480px) {
  .daima-widget .daima-benefits {
    font-size: 12px;
    line-height: 1.4;
  }
}

Testing your CSS

Your loop: edit the CSS, watch the live preview, click Save when it looks right, then reload a product page on your store to check it. Use the Desktop / Mobile switch above the preview to see phone width. Check at least one product page on a real phone after publishing — the preview is accurate but a phone is the final word.

Limitations

• The widget only. Custom CSS styles the product-page widget. It doesn't reach the sticky add-to-cart bar, the customer portal, the checkout upsell or any other Daima surface. The sticky bar's colors have their own controls under Colors → Advanced → Sticky bar.
• CSS only. There is no JavaScript box. If you need to change behavior rather than appearance, email support@daima.app.
• Not part of A/B tests. Both versions of an A/B test always use the same Custom CSS, so you can't test one CSS against another.