Articles on: Widgets

The Subscription Widget

To access this page, go to Super Subscriptions > Design


The Design page is where you control how your subscription and bundle widgets look on your product pages. Both widgets are designed together on this one page, so they match each other and match your theme.


Table of contents



What is the subscription widget?


The subscription widget replaces the regular add-to-cart area with the bars a customer can choose from. Customers pick their preferred frequency, see any discounts, and add the subscription to their cart. If your offer also has bundle bars, the bundle widget appears alongside it on the same product page.


The preview


The preview sits beside the controls and follows you as you scroll, so you can see what you are changing while you change it. It shows your product page the way a shopper sees it, with the bundle and subscription widgets stacked in the order they really render.


Use the product selector above it to preview with a real product's bars and prices instead of sample data, and the variant selector to check a product whose variants are priced differently.


Every change appears in the preview before you save, so you can try a few things and discard them.


Colors and spacing can still differ slightly in your live theme, because the preview runs in the Shopify admin rather than in your storefront. Open a product page in your store to see the final result.


Design


This section shows the subscription design and the bundle layout that are live right now, each with a thumbnail. Click Change to open the gallery, which you can search and filter by category, then pick the one you want and publish it from the footer.


Subscription designs:


  • Lure: the flagship design, with benefit highlights and a discount banner.
  • Checkbox: a single checkbox to switch between one-time and subscription.
  • Aurora: flowing gradient borders with a shimmer effect.
  • Classic+: a detailed layout with room for prepaid bars and several choices.
  • Dropdown+: all the detail in a compact dropdown.
  • Panel+: a tabbed layout with a radio button on each option.
  • Classic: a simple layout for pay per order bars with up to three choices.
  • Dropdown: the most compact way to show your bars.
  • Panel: clean and simple panel buttons.
  • Neon: a retro neon sign look with glowing borders.
  • Blobs: a unique animated style to grab attention.
  • Custom: written in code by our team to match your theme exactly.


Bundle layouts:


  • List: vertical rows with a radio button on each bar. The default, and the most compact.
  • Panels: the same rows, each in its own bordered panel.
  • Cards: horizontal cards, good for comparing two or three bars side by side.
  • Custom: written in code by our team.


Click Customise on either row to fine tune that one design on its own page. Only one subscription design and one bundle layout are live at a time, and the settings for the others are kept, so switching back and forth costs you nothing.


Switching design never affects your offers, your prices, or your subscribers.


Colours


One decision, written to every design at once, so if you switch design later your store keeps its look. Each kind of answer sits on its own line under a small heading:


  • From your theme, first: the dashed swatch inherits everything from your theme, followed by your theme's own colour schemes, shown as swatches in their own colours. Picking a scheme takes its background and text. The schemes only appear if your theme publishes any; if it does not, the line is just the dashed swatch.
  • One colour, and everything follows it: the ordinary colours, red, orange, green, blue and the rest, and your own at the end. Picking one sets your primary colour, and everything the widgets draw follows it: the option a customer has chosen, the borders, the radio buttons and the savings badges. The text on a badge is picked for you so it stays readable whatever colour you choose. For most stores this is the whole job.
  • Or a gradient: six ready made blends, Aurora, Sunset, Ocean, Forest, Rose and Ember, each drawn in its own colours. Pick one and the three stops appear below it, Base, Second and Third, so you can adjust them. This line only appears while a design that can draw a gradient is published; on the others there would be nothing for it to do.
  • Custom, last, which opens two fields: Primary and Text. Use it when your text colour needs to be something particular as well. Leave Primary empty and it follows your text colour.


They are alternatives, not layers, because they answer the same question. A gradient is a colour like any other: its Base stop is what the rest of the widget takes, so the chosen option, the borders and the badges all follow it. Choosing a plain colour instead draws those designs flat, and picking a theme scheme takes that scheme's pair and derives the colour from its text.


Set this first, then use Elements below only for the parts you want to differ from it.


Your primary colour outlines the option a customer has chosen rather than flooding it. On the Checkbox design in particular, the ticked option keeps its own background and takes the colour on its border and its tick, because that option is the whole widget rather than one row in a list.


The savings chip on a bundle bar comes out a shade lighter than the badge beside it, so "Save 15%" reads as a note on the bar rather than competing with a badge you wrote yourself.


A design you have set to Advanced styling keeps its own per element colours, so a custom text colour will not reach it. The section tells you which designs those are. Roundness, thickness and theme colour schemes still apply. Switch the design back to Simple in its own editor if you want your brand colours to take over.


Shape and spacing


Shape sets the corner roundness and the border thickness.


Spacing sets the padding inside each option and each bundle bar, and the gap above and below the whole widget. Use the gap when your theme puts the widget too close to the add to cart button or the price.


Both apply to your subscription and bundle widgets at the same time.


Elements


This section is one row per part of the widget, listed in the order you read the product page. A row applies to every design that has that part, so hiding the heading hides it on all of them, and a row a design cannot honour is not shown at all.


  • Both widgets: the widget heading, and the savings badge.
  • Bundle bars and Subscription options: each starts with the surface, the background, the background when selected, the border and the radio, then the text on it, the title or option name, the description, the delivery frequency, the price, the crossed out price, the price per unit and the rest.
  • Page layout: whether the bundle widget sits above the subscription widget, and whether bundle prices follow the selected subscription.


The two widget sections are listed in the order the widgets stack on your product page, so whichever one a shopper sees first is the one you reach first. Flip Bundle on top in Page layout and they swap over straight away.


Two things are not set here because they belong to the offer rather than to your design. Whether a product can be bought once without subscribing is set on the offer, see How to remove the one-time purchase option for a product. And the product image on a bundle bar is the image you upload to that bar, so a bar shows one whenever it has one; the size and corner radius of the image are set in the bundle layout's own editor.


Reading an element row


A row is one line. The element's name on the left with its switch beside it, then, in columns to the right:


  • Its colour, as a swatch you click to open the colour picker.
  • Its text size, in pixels.
  • Its text weight, from thin through to black.


Every piece of text has all three, whatever design you are on, down to the per unit price and the wording inside the information tooltip. What differs is the switch: the option name, the backgrounds and the borders cannot be hidden, so those rows have no switch, and the backgrounds and borders are a colour only, having no text to size.


A missing control leaves its column empty rather than shifting the rest along, so everything stays in line all the way down. On a narrow screen the controls drop to their own line under the name and fill the width.


Styling only appears while the element is switched on, and a change is written to every design that has the element, so switching design later keeps your styling. Hover a row's name to see what it covers.


The savings badge takes its colour from your primary colour in the Colours section rather than from its own row, so there is only ever one place to set it. Its size and weight are set on the row.


Default and custom colours


Every colour on an element row starts at default, and default means your primary colour wherever the primary drives that part: the border, the radio, the background when selected. Set it once in Colours and all of them follow it.


You can tell the two apart by the swatch. A dashed outline means the colour is still following your palette; a solid one means you have set it yourself. A chequered swatch means the text has no colour of its own at all and takes the colour of the text around it, until you pick one. Hover it to see which, and what the colour is.


Click the swatch and pick a colour and that one part steps out, keeping your colour whatever the primary is. To put it back, click the swatch again and choose Use default: the part rejoins and takes the current primary colour, not the one it happened to have before.


Parts the primary does not drive, such as the option name or the crossed out price, read default as the colour the design ships with. On a design that draws a gradient, the border reads default as the gradient rather than as a flat colour.


Changing your colour in Colours carries through to every part that is still on default, including on designs you are not currently using. Going back to the dashed Inherit from your theme swatch hands those parts back to the colours their design ships with.


Prices


Prices have their own rows inside Elements, and the two widgets are kept separate so you can change one and leave the other exactly as it is. For each widget you can turn off:


  • The price itself, the amount on each option or bundle bar.
  • The crossed out price, the full price struck through beside the discounted one.
  • The price per unit, the per item price such as "$3.50 each".


The usual reason to turn a price off is that your theme already prints it above the widget and you would rather not say it twice.


All three carry a colour, a size and a weight, which is the quickest way to make the subscription price stand out against the crossed out one.


Price per unit is only available on designs that print one, so the row appears for those designs and is hidden for the rest. On the bundle widget, a bundle that has its own compare-at price turned off stays hidden whatever you set here.


Labels


This is where you reword the text your customers read, without opening a design to do it. It sits below the preview and the settings, in a card of its own. Each field applies to every design of that widget, so your wording carries across when you try a different design.


For the subscription widget: the heading, the one-time purchase option, the subscription options heading, the price prefix ("from"), the benefits heading, the tooltip title, the discount badges, the price per unit, and the prepaid line.


For the bundle widget: the heading, the savings badges, the price per unit suffix, and the free shipping and free gift lines.


Some fields use placeholders in curly brackets, and the field tells you what each one stands for. Keep them in your wording and move them wherever the sentence needs them.


Leave a field empty to go back to the built-in wording.


These fields set the text in your store's own language. To translate it for your other languages, use Settings > Translations. A translation there wins over what you type here.


Saving your changes


Nothing on this page saves as you go. Change as much as you like, watch it all in the preview, then use the save bar at the top of the page to save the lot in one go, or discard it and start again.


Tips and best practices


  • Set your colour, shape and spacing first, then pick a design. They carry across every design, so trying designs costs you nothing.
  • Leave element colours on their default unless you have a reason. The fewer exceptions you make, the better a new design will look when you try one, and the less there is to redo when your colour changes.
  • Preview with a real product so you see your own prices and discounts.
  • If a design shows a dropdown you do not want, switching to Classic or Panel is the quickest way to remove it.



Updated on: 08/13/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!