Widget customization.

Daima's Widget Editor controls how your Subscribe & Save widget looks and behaves — layout, colors, text, savings format, social proof, the sticky add-to-cart bar, variant options and mobile settings. The preview updates as you edit, and every setting is free on every plan.

Last updated · November 7, 2026

Where to find it

From the Daima admin, click Widget Editor in the left nav. The page splits in two: a list of setting groups on the left, a live preview of your real widget on the right. Click a group to open it, change what you like, then click Back to return to the list. Your changes stay in the preview while you move between groups.

The Daima Widget Editor with the seven setting groups listed on the left, the Layout group circled, and the live preview on the right.
The Widget Editor: settings on the left, preview on the right.

Nothing reaches your store until you click Save (top right). Discard throws away everything you changed since the last save. The seven groups are:

  • Layout — widget style, corner style, pre-select Subscribe, sticky bar, variant options
  • Colors — Basic and Advanced
  • Text & labels — title, option labels, button label, badge, benefit lines
  • Plans & savings — how the discount and delivery frequencies are shown
  • Social proof — a subscriber-count line
  • Animation & mobile — animation, font, Add to Cart button, mobile sizes
  • Advanced — custom CSS and hiding theme elements

All widget settings are free. That includes Custom CSS, colors, layouts and the sticky bar. If an A/B test is running, a banner at the top of the editor reminds you that saving here also changes version A.

The live preview

The preview runs the same code as your storefront widget, so what you see is what shoppers get — including your Custom CSS. Three switches above it let you check every case:

  • Widget / Sticky bar — preview the widget, or the sticky add-to-cart bar
  • One-time / Subscribe — see the widget with either purchase option selected
  • Desktop / Mobile — see it at phone width, with the real mobile styles

The preview uses a sample product and a sample subscriber count, so social proof always has something to show while you design it.

Layout

Widget style

Three layouts. Each has a small drawing next to it in the editor so you can pick by look:

  • Tabs (default) — the original Daima widget: a One-time / Subscribe tab pair with the details below.
  • Cards — stacked option cards. The subscribe card opens to show the delivery frequency and your benefit lines.
  • Compact list — simple radio rows. The smallest footprint, good for crowded product pages.
The Layout settings in the Daima Widget Editor showing widget style choices of Tabs, Cards and Compact list with Cards circled, then corner style, Pre-select Subscribe and the sticky bar checkbox.

The settings on this page work in all three layouts, so switching layout never loses a setting.

Corner style

Six looks that change the corners and borders of the widget. The editor lists them as buttons:

  • Square — sharp corners. Editorial, premium.
  • Rounded (default) — soft edges. Friendly and conventional.
  • Pill — fully rounded shapes.
  • Card — elevated shadow with rounded edges, so it stands out from the page.
  • Minimal — no borders. Blends into the page. The most subtle option.
  • Bold — a heavier, more emphatic look.

Pre-select Subscribe

Off (the recommended setting): shoppers start on One-time purchase, as Shopify's guidelines ask. Turn it on and the widget opens with Subscribe already chosen. That usually gets more subscribers but can lower first-time purchases, and some regions restrict pre-selected subscriptions, so check the rules where you sell.

Stores that installed Daima before the layout update keep their existing behavior until they change it here.

Turn on Sticky add-to-cart bar under Layout. When a shopper scrolls past the widget, a slim bar stays on screen with the price, a quantity selector and an Add to cart button, so they never have to scroll back up.

The sticky add-to-cart bar shown at the top of a product page, with the price, a quantity box, an Add to cart button and the Options tab.
  • Where it sits. At the top of the screen, on phones and computers alike. If your theme has a header that stays on screen, the bar sits just under it.
  • Options tab. A small Options tab on the bar drops down a Purchase options panel with every choice: One-time or Subscribe, delivery frequency and, if you turned them on, variant options. The tab reads Hide options while the panel is open.
  • When it shows. Only after the widget has scrolled out of view. It hides again when the widget is back on screen, and it steps aside while your theme's cart drawer is open.
  • Product pages only. It appears on the main product widget, not in quick-view pop-ups.
  • Colors. Change them under Colors → Advanced → Sticky bar (Sticky bar background and Sticky bar text). Everything else follows the widget's colors.

The bar clicks the widget's own Add to Cart button, so it needs Show Add to Cart button turned on under Animation & mobile. The editor warns you if it's off. Use the Sticky bar switch above the preview to see the bar. If your theme already has its own sticky add-to-cart bar, check a product page on a phone after turning this on, so two bars don't stack.

New installs have the sticky bar on. Stores that installed earlier keep it off until they turn it on.

Variant options in the widget

For products with options like size, color or grind, turn on Show variant options in the widget under Layout. Shoppers then pick their options inside the widget, styled to match it, and the same choices appear in the sticky bar's Options panel. Your theme still updates the product photo and price as usual.

  • Options with a few short values show as buttons; longer lists show as dropdowns.
  • Combinations that are out of stock are crossed out. If the chosen combination is sold out, the Add to cart button reads Sold out.
  • Daima hides your theme's own variant picker automatically so shoppers don't see two. If you still see it, open Advanced and add its CSS selector (for example .product-form__input) to Hide theme elements. Separate several selectors with commas.
  • Products with no real options (just a single "Default Title" variant) never show the picker.

Colors

Open Colors and choose Basic or Advanced.

The Colors settings in the Daima Widget Editor on the Basic tab, with five color fields, the Accent Color field circled, and the Readable check underneath.

Basic

Five colors drive the whole widget. Type a hex code (like #1a2b3c or #abc) or click the swatch to pick one:

  • Accent Color — the main brand color: active tab, badges, selection highlights and the Add to Cart button.
  • Background Color — the widget's surface.
  • Text Color — labels and prices.
  • Badge Text Color — text on savings badges.
  • Button Text Color — text on the Add to Cart button.

A readability check sits under the boxes. It shows Readable when every combination passes the 4.5:1 contrast guideline, and lists the combinations that may be hard to read when one doesn't. It's a heads-up, not a block — you can still save. A half-typed hex code does block Save until you fix it.

Advanced

Every element has its own color. Each starts on Auto and follows your basic colors, so you change only the ones you want. Click Reset beside a color to return it to Auto. The groups are:

  • Backgrounds — widget, option, selected option, frequency picker
  • Borders — option, selected option, divider lines
  • Text — title, option labels, secondary text, price, crossed-out price
  • Savings — badge background, badge text, inline savings text
  • Selection — radio dot or selected tab, selected frequency pill background and text
  • Button — background, text, hover
  • Benefits & social proof — benefit icon, benefit text, social proof text and icon
  • Sticky bar — background and text

Text & labels

  • Custom title (above benefits) — a heading such as "Why Subscribe?". Leave blank to hide.
  • Subscribe option label — default "Subscribe & Save".
  • One-time option label — default "One-time purchase".
  • Subscribe button label — the text on the add to cart button while Subscribe is selected (up to 60 characters). Leave blank for the default.
  • Show badge and Badge text — the small badge on the subscribe option. Default text "MOST POPULAR".
  • Benefit 1, 2 and 3 — the bullet lines in the subscribe panel. Defaults: "Never run out", "Save up to {{discount}} on every order", "Skip or cancel anytime". Type {{discount}} to insert the plan's discount automatically. Leave a line blank to hide it.

Plans & savings

Show savings amount

Turn the discount display on or off. When it's on, the next two controls appear.

Savings label format

  • Extra 10% OFF — the most promotional framing. Reads like a coupon on top of your price.
  • Save 10% — the conventional discount wording.
  • $2.90 off — a dollar amount. Concrete, and helpful on higher-priced products.
  • Hide savings label — no savings copy at all.

Savings badge placement

  • Everywhere (tabs, plans, total) — the discount repeats on the tabs, each plan option and the total row.
  • Tab and total only — the plan list stays quiet.
  • Tab only — one badge, once. The calmest read.

Frequency selector style

How shoppers pick a delivery schedule: a Dropdown, or Visible plan rows (radio) showing each plan's name and savings side by side. With two or three plans, visible rows let shoppers compare without opening a menu; with many plans, the dropdown stays tidier.

Social proof

The widget can show a small line such as "Join 412 subscribers" to nudge shoppers toward subscribing. Tick Show subscriber count on widget, then choose:

  • Display style — "Join X subscribers", "X subscribers", "X new subscribers this month" or "Over X people subscribe"
  • Count scope — This product only or Entire store
  • Minimum threshold — don't show the line until this many subscribers exist (1 to 500), so a new store never shows "Join 2 subscribers"
  • Icon — People icon, Checkmark or None
  • Position — Above tabs, Below savings or Below trust line

The numbers are real. Counts come from your actual subscriptions — never made up. If you have 12 subscribers on a product, the widget shows 12.

Animation & mobile

  • Animation style — how the widget appears: Fade in (default), Slide up, Pop or None. Visitors whose device is set to reduce motion never see animation, whatever you choose.
  • Font Size — Extra Small (12px), Small (14px, default), Medium (16px), Large (18px) or Extra Large (20px).
  • Font Weight — Normal, Medium (default) or Bold. The font family always comes from your theme, so the widget feels native.
  • Show Add to Cart button — the widget's own button. Keep it on if you use the sticky bar.
  • Button border radius — Square (0px), Slightly rounded (4px), Rounded (8px, default) or Pill (50px).
  • Mobile font size — Same as desktop (default), or 11px to 14px.
  • Mobile padding — Default, Compact (8px), Normal (12px), Roomy (16px) or Spacious (20px).

The two mobile settings apply on screens 480px wide and narrower, which covers phones. Desktop is unaffected. Leave them on default and the widget scales down on its own.

Advanced

Custom CSS lets you change anything the editor doesn't expose. It's free and scoped to the widget; see Custom CSS injection.

Hide theme elements takes the CSS selectors of parts of your product page the widget should hide, such as a variant picker your theme keeps showing. Separate several with commas (up to 500 characters; the characters { } < > ; aren't allowed). The editor shows an error and blocks Save if the box has a problem.

Custom CSS and Hide theme elements are the two settings that aren't part of A/B tests: both versions always share them.

Gifts and loyalty in the widget

Two parts of the widget appear only when you've switched the matching feature on. Neither has controls in the Widget Editor.

  • Send as a gift. With Gift Subscriptions enabled (a Pro feature), the widget shows a Send as a gift checkbox. Ticking it opens fields for the recipient's name and email, a gift message (if you allow one), the gift duration and an optional delivery date. These fields never get in the way of your theme's own Add to cart button.
  • Loyalty line. With a loyalty program on (a Pro feature) and Product page widget (teaser and member line) ticked in the program's settings, shoppers see a short line with the program's tier badges. Visitors see a teaser that invites them to join; signed-in members see their tier.

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 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.

Products with variants. The widget follows the shopper's variant selection and re-prices itself automatically, whichever way your theme handles variants — whether it re-renders the product section from the server (Dawn, Prestige, Horizon) or updates the page with JavaScript alone, as many custom themes do. Switching variants costs no extra network requests, so it stays instant.

Building a custom theme? Two things keep the widget happy. Keep the variant id in a <input name="id"> inside the product form — the Shopify standard — so the widget can read the current selection. And avoid reusing the widget block's own attributes: everything Daima puts on its block is namespaced data-daima-* precisely so it can never collide with a theme that queries generic names like [data-product-price]. If your theme writes into an element it found by a generic attribute, make sure that query resolves to your element and not to an app block.