Widget customization.

Daima's Widget Editor controls every visual aspect of your Subscribe & Save widget — layout, colors, typography, savings format, social proof, and mobile overrides. The preview panel updates in real time as you edit.

Last updated · April 27, 2026

Where to find it

From the Daima admin, click Widget Editor in the left nav. The page splits in two: settings on the left, a live widget preview on the right. Every change you make updates the preview instantly. Click Save to publish the change to your live storefront widget.

Layout style

Four layout styles, each with a different visual treatment:

  • Square — Sharp corners. Brutalist, editorial, premium feel.
  • Rounded — Soft edges. Conventional, friendly, modern DTC feel.
  • Card — Elevated shadow with rounded edges. Stands out from the surrounding theme.
  • Minimal — No borders. Inherits the page's background. Most subtle option.

Colors

Five color settings drive the widget's palette:

  • Accent color — Primary brand color used for the active tab indicator, savings badges, the Add to Cart button background, and the selected option's border.
  • Background color — The widget container's surface color.
  • Text color — Primary text color for labels and prices.
  • Selected border color — Border color around the currently-selected option (Subscribe & Save vs One-time).
  • (Inherited from theme) — Colors not set here fall through to your Shopify theme's typography and color tokens.

Typography

Three controls for the widget's text:

  • Font size — Extra Small (12px), Small (14px), Medium (16px, default), Large (18px), Extra Large (20px)
  • Font weight — Normal (400), Medium (500), Bold (700)
  • Font family — inherits from your Shopify theme. The widget never imports its own font, so it always feels native to the page.

Labels & copy

  • Subscribe label — Text on the subscribe option's tab. Default: "Subscribe & Save".
  • One-time label — Text on the one-time-purchase option's tab. Default: "One-time purchase".
  • Badge text — Text on the small "Best Value" badge. Default: "BEST VALUE". Set to empty to hide the badge.
  • Show badge — Toggle to hide the badge entirely.

Savings format

How the discount is presented to customers. Four formats:

  • Extra 10% OFF — Most aggressive framing. Reads as a coupon stacking on top of your normal price.
  • Save 10% — Conventional discount framing. Familiar, less promotional.
  • $2.90 off — Dollar-amount savings. Concrete, useful for high-priced products where percentage feels abstract.
  • Hide savings label — No savings copy at all. Useful for premium brands that don't want to compete on price.

Social proof

The widget can display a small social-proof line — e.g., "Join 412 subscribers" — to nudge customers toward the subscribe option.

  • Style — Four phrasings: "Join X subscribers" / "X subscribers" / "X new subscribers this month" / "Over X people subscribe"
  • Scope — "This product only" (count just this product's subscribers) or "Entire store" (count all subscribers across your store)
  • Icon — People icon, Checkmark, or None
  • Position — Above the tabs, below the savings line, or below the trust line

Daima generates real subscriber counts. The numbers shown in social proof come from your actual Shopify subscription contracts — not fabricated. If you have 12 subscribers on a product, the widget shows "12". If you have 1,247 across your store, it shows that. The counts refresh on every dashboard load.

Mobile overrides

Some merchants want a more compact widget on mobile screens. Daima ships independent mobile overrides:

  • Mobile font size — "Same as desktop" (default), or specify 11–14px
  • Mobile padding — "Default" (matches desktop), Compact (8px), Normal (12px), Roomy (16px), or Spacious (20px)

When set, these only apply on screens narrower than 768px. Desktop view is unaffected.

Animation style

How the widget appears when the product page loads:

  • Fade in (default) — Subtle opacity transition
  • Slide up — Slides up from below the Add to Cart area
  • Pop — Scale-in with a slight bounce
  • None — No animation, instant render

Daima respects prefers-reduced-motion automatically — visitors who've enabled the OS-level reduce-motion setting will see no animation regardless of this setting.

Custom CSS injection

For tweaks that go beyond the editor's controls, Daima Pro includes a Custom CSS section in the Widget Editor. Anything you write there is scoped to the widget container (use .daima-widget as your selector base) and injected into your storefront after the default styles, so your overrides win the cascade.

See Custom CSS injection for details — it's a Pro feature with its own dedicated doc.

How the widget plays with your theme

The widget is delivered as a Theme App Block, which means it lives inside your theme as a regular section block, not an iframe or popup. It inherits font-family, base colors, and any CSS variables your theme has defined — unless you override those in the Widget Editor.

Tested compatibility: Dawn, Refresh, Sense, Spotlight, Crave, and most modern custom themes. Older themes that don't support app blocks (pre-2022 Online Store 1.0 themes) will need a theme upgrade to use Daima.