Custom CSS injection.

For tweaks that go beyond the Widget Editor's controls, Pro merchants can inject custom CSS that overrides Daima's default widget styles. Scoped to the widget container only — won't affect the rest of your theme.

Last updated · April 27, 2026

Where to find it

Open Widget Editor in the admin nav and scroll to the Custom CSS section near the bottom. You'll see a code textarea labeled "Custom CSS." Anything you type here is saved to your shop's widget settings and injected into the storefront after the default styles, so your overrides win the cascade.

The scoping convention

Always use .daima-widget as the base selector. This class wraps the entire widget container; nesting your selectors under it ensures your CSS only affects the widget — never your product page, theme, or other surfaces.

Examples of correctly-scoped overrides:

.daima-widget {
  border: 2px solid var(--my-brand-color);
  font-family: 'Custom Brand Font', sans-serif;
}

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

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

What NOT to do

• Don't omit the .daima-widget scope. Writing .cta-button { ... } instead of .daima-widget .cta-button { ... } will leak your styles into the rest of your theme. Daima can't enforce scoping at write-time, so this is on you.
• Don't use !important liberally. Daima's default styles don't use !important, so your overrides win the cascade naturally. Adding !important makes future debugging harder.
• Don't override layout tokens that the editor controls. If you can change something via the editor (color, font size, button radius), use the editor — your future self will thank you. Reserve custom CSS for things the editor doesn't expose (custom gradients, animations, brand-specific micro-typography).
• Don't use @import for external stylesheets or fonts. Daima injects your CSS as a single inline block; @import rules fire async and load slowly. Use the Widget Editor's typography settings and rely on your theme's font-loading instead.

Common use cases

Brand-specific micro-typography

Tracking and leading tweaks specific to your brand voice that aren't exposed in the editor:

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

Conditional hover states

Custom hover behavior on the CTA button (the editor doesn't expose hover states):

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

Mobile-only overrides

Tweaks that only apply on small screens, beyond what the mobile font-size and padding controls cover:

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

Testing your CSS

The Widget Editor's preview panel updates in real time as you type. So your iteration loop is: edit CSS in the textarea → see the preview update → save when it looks right → reload your live storefront product page to verify.

Test on at least one product page on a real device after publishing — the preview is accurate but doesn't always render mobile breakpoints exactly the way a phone will.

Limitations

• Widget container only. Custom CSS doesn't reach the customer portal, the checkout upsell extension, or any other Daima surface. Each surface has its own styling lifecycle.
• No JavaScript. Daima's custom CSS field is CSS-only. If you need to modify behavior (not just appearance), reach out to [email protected] — some custom JS hooks are available on a case-by-case basis for high-effort edge cases.
• Resets on plan downgrade. If you downgrade from Pro to Free, your custom CSS is preserved in the database but stops being injected (since it's a Pro feature). Re-upgrade to Pro and it picks back up automatically.