Articles on: Widgets

Widget Editor

To access this page, go to Super Subscriptions > Design and click Customise on a design.


The widget editor is where you fine tune one design. Colours, roundness, border thickness and spacing for your whole store are set on the Design page, and so is what is shown or hidden and the wording customers read. Come here when you want to go further on a single design: per element styling, per element spacing, and the labels that only this design prints.


Settings are saved per design, so you can set up more than one and switch between them without losing anything.


Table of contents



Simple customization


Simple mode offers quick controls for matching the widget to your theme. The Design page's Colours and Shape sections set these for every design at once, so most stores never need to open them here.


  1. Choose Simple from the tabs at the top of the settings panel.
  2. Adjust basic options like Color scheme, Animation, Roundness, and Thickness.
  3. Use the color pickers to match your brand. Selecting Inherit from theme takes styles directly from your current theme.
  4. Click Save to update the preview.


Color scheme


The Color scheme control decides how colors are applied to the widget.


  • Inherit from theme: takes colors from your theme if the theme supports color schemes. The preview shows a black and white widget, but on your product page the widget matches your theme colors.
  • Color scheme options: pick one of your theme's color schemes. The preview updates to show it.
  • Custom: pick the background and text colors yourself.


Click Save after adjusting colors to refresh the preview.


Fonts


There is no font picker, because the widget takes its typefaces from your theme so it always matches the page it sits on. Most themes set two: a heading font and a body font, both under your theme's typography settings.


  • Titles use your theme's heading font: the bundle block title, each bundle bar's title, and the name of each purchase option.
  • Everything else uses your theme's body font: prices, descriptions, savings text, and the rest.


That is the same split your theme makes, so the widget reads as part of the product page rather than as a separate block. Themes that set only one font simply use it throughout. To change either face, change it in your theme's typography settings and the widget follows.


Font sizes and weights are yours to set per element under Advanced below, independently of the faces.


The admin preview cannot load your storefront's fonts, so it renders in the admin's own font. Open a product page in your store to see the real thing.


Advanced customization


Switch to Advanced for full control over fonts, spacing, and additional styling options.


  • Open each section (for example Base, Widget label, One-time purchase) to reveal more settings.
  • Options include custom font sizes, background colors, button styles, and layout spacing.
  • Toggling settings on or off immediately updates the live preview.


A design on Advanced keeps its own per element colors, so the custom text and background colors from the Design page's Colours section do not reach it. Roundness, thickness, and theme color schemes still apply. Switch the design back to Simple if you want your brand colors to take over.


Editing labels


  1. Click the Labels tab next to Design.
  2. Update text such as Widget label, One-time purchase, and the various Discount tag formats.
  3. Changes appear in the preview and are saved with the rest of the design. Use placeholders like {{ percentage_discount }} or {{ fixed_price }} where needed.


The labels most stores reword are on the Design page under Labels, where they apply to every design at once instead of only this one. Come here for the labels that belong to this design alone, and for the one-time purchase description and benefits.


Localize labels


Click the Localize button in the top right corner of the page to translate widget text for your other store languages. A modal opens where you can enter translations for each label. Saved translations automatically display when a customer views your store in that language.


Bundle widget layouts


The bundle widget is what shoppers see on a product page when your offer has bundle bars (quantity breaks, Buy X Get Y, fixed bundles, build-a-box). Its layouts live in the Designs gallery on the Design page: click Change on the bundle row to open it.


Choose the layout that suits your product page, then publish it from the gallery footer:


  • List: vertical rows with a radio button on each bar. The default, and the most compact.
  • Panels: the same vertical rows, but each bar is its own bordered panel with more space between bars.
  • Cards: horizontal cards with centered content, good for comparing two or three bars side by side.


Click Customise on the bundle row to change that layout's colors, borders, badges, prices, and labels, exactly like the subscription widget. Each layout keeps its own settings.


Whether bundle prices follow the selected subscription, and whether the bundle widget sits above or below the subscription widget, are set on the Design page under Show and hide.


Editing bundle labels


Click Customise on the bundle row, then open the Labels tab. This is where you reword the text the bundle prints by itself, in your store's own language. It is grouped into three parts:


  • Labels, the block title, the cart discount label, the per-unit price suffix, the savings chip, and the free gift and free shipping labels shown on a bar.
  • Build-a-box labels, everything a build-a-box bar prints around its choices: the 'Includes' heading, the heading above a set of choices, the pick prompts, the selection counter, and the message shown when a shopper has not picked enough.
  • Reward and free gift labels, the headings above Buy X Get Y rewards and chosen free gifts, plus the 'Free' price shown on each one.


Several of these labels use placeholders in curly brackets. Keep them in your wording and move them wherever the sentence needs them: {value} for the discount on a savings chip, {count} for how many items a shopper has picked, {min} and {max} for a set's limits, {remaining} for how many more are needed, and {pick} for the pick prompt inside the selection counter.


The selection counter is the small line above a build-a-box group's products. By default it reads {count} / {max} · {pick}, which a shopper sees as "0 / 2 · Pick 2". The whole line is one label, so you can reorder it, change the separator, or drop the pick prompt entirely.


Labels are saved per layout, so if you switch between List, Panels, and Cards, set the wording on the layout you publish. The block title, savings chips, per-unit suffix, free shipping and free gift lines can also be set once for every layout on the Design page under Labels. To translate this text for your other store languages, use Settings > Translations and pick the Bundles category. A translation there wins over what you set here.


Custom designs built by our team


The Designs gallery offers a Custom design under Advanced, for the subscription widget and the bundle widget alike. A custom design is written in HTML, CSS, and JavaScript rather than assembled from settings, so it can match a theme exactly or do something none of the built-in designs do.


Custom designs are built for you by our support team, so the card shows a Contact support button instead of a customizer. Message us with what you have in mind (a screenshot or a link to a design you like is ideal) and we will build it on your store. Once it is in place, the design appears in the gallery like any other and you can publish it whenever you are ready.


Publishing a design


On the Design page, click Change on the subscription or bundle row, pick the design you want, and publish it from the gallery footer. Only one subscription design and one bundle layout are live at a time, and the settings for the others are kept.


Example settings


  • Animation: choose between delightful animations to engage customers and inspire them to subscribe.
  • Roundness: control the roundness of the widget to match your theme design.
  • Thickness: set the border widths of widget sections to match your theme design.



Updated on: 08/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!