Designing your own widget

The custom widget designer lets you write the HTML and CSS of your subscription widget, your bundle options and the box around them yourself, so the widget looks exactly like the rest of your product page. It is in beta: ask us in the chat to turn it on for your store.

Opening the designer

1. Go to Supr Bundles & Subscriptions > Design.
2. Click the Custom (Liquid) design. The first time, it opens the designer so you can make your design.

Click Save to keep your changes. Every change you save is kept under Versions, so you can always go back.

Using your design on your store

Once your design is saved, Custom (Liquid) can be chosen on the Design page like any other design, for the subscription widget, for the bundle widget, or both. Choose it and save the Design page. From then on, every save in the designer is live straight away on the widgets that use it.

The three tabs

• Subscription widget: the subscription options and the one-time purchase row.
• Bundle options: the bundle bar and each of its options, including build-a-box, fixed bundles, add-ons and free gifts.
• Layout: everything the app block shows, in one box: the offer title, the subscription widget, the bundle options, and an add to cart button and quantity of your own.

The Layout tab has one switch, Use this layout: on, your layout places the offer title, both widgets and your own add to cart on every product page. The other two tabs follow the Design page, as above.

Each tab has a Start from a template list. A template replaces only that tab's markup and stylesheet, so you can start your bundle options from one template and your subscription widget from another.

Importing a design from our support team

When our team builds a design for you, they send it as one block of text.

1. Open the designer and click Import design.
2. Paste the whole block and click Import. It replaces every template, stylesheet and label on all three tabs.
3. Check the preview, then click Save.
4. If your store does not use the design yet, choose Custom (Liquid) for the widget on the Design page.

A design can also bring your brand colour, roundness and spacing from the Design page. The designer lists them in a banner before you save, and saving keeps them with the design. They restyle your other widgets too; click Keep the Design page as it is to save the design without them.

How a template works

A template is ordinary HTML with Liquid strings in double braces, such as {{ selling_plan.name }} or {{ tier.price | money }}. Type {{ in the editor to see every string the part you are editing accepts, with what it prints; the Reference section lists them too. Anything else in double braces, and any Liquid tag other than a comment, is refused with the line it is on.

There are no conditions. To hide something that has no value, use CSS: an empty price or badge prints nothing, so :empty hides its element. The chosen subscription option has a checked radio (.sss-liquid-row:has(> input:checked)) and the chosen bundle option has the class .sss-bundle-block__tier--selected.

The app keeps the parts your store needs to work: the radios, the variant pickers, the quantity steppers, and the data the storefront reads to keep prices current and add the right items to the cart. Your markup goes around and inside them.

Subscription widget

• Wrapper: everything around the options, such as a heading or a trust row. Place the options with {{ sss.options }}. You can also place {{ sss.one_time }}, {{ sss.add_to_cart }} and {{ sss.quantity }}.
• Offer group: drawn once per offer. Show its options as rows with {{ sss.group.options }}, or make the whole offer one card with a select ({{ sss.plan_picker }}) or buttons ({{ sss.plan_picker_pills }}).
• Subscription option and One-time purchase: one row each.
• Benefit line, Free gift and Loyalty reward: what one benefit, gift or reward looks like, placed in an option with {{ sss.benefits }}, {{ sss.gifts }} and {{ sss.rewards }}.

Prices include savings, the price per day, per serving and per unit, the price after the first orders, and the billing line. To show a price per serving, add the Servings field under Product fields and fill it in on each variant.

Bundle options

• Bundle bar: everything around the options. Place them with {{ sss.tiers }}.
• Bundle option: one option, for example a pack size. It can show the option's title, badge, price, full price, price per unit and savings. Place the builder, a fixed bundle's products, add-ons, gifts and variant pickers where you want them with {{ sss.tier.builder }}, {{ sss.tier.products }}, {{ sss.tier.addons }}, {{ sss.tier.gifts }} and {{ sss.tier.variant_pickers }}. Anything you leave out follows your markup.
• Bundle product: what one product looks like in a fixed bundle, a build-a-box option and the add-ons: its image, title, price, vendor and sticker.

To show a sticker such as "Best seller" on a product, add the Bundle sticker field under Product fields, then fill it in on the product. Translate it with Shopify's Translate & Adapt. Stickers show for the first 20 bundle products on a page.

Turn on Show a builder one group at a time to show a build-a-box option's groups as tabs, one group open at a time. Each tab shows the group's name and subtitle, which you set on the group in Offers.

Labels and translations

Your own words go under Labels, and you print one with {{ sss.labels.name }}. A label used inside a subscription option can include that option's values, such as Billed {price} {billing_frequency}, so the whole sentence stays one label in every language. Translate your labels under Settings > Translations > Widgets.

A template's labels start in your store's language. When you save, every label you have not reworded is also translated into your store's other languages, unless you have already translated it yourself. Labels you write yourself are yours to translate.

Stylesheets

Each tab has its own stylesheet. Every rule is limited to the part it styles when you save, so your CSS cannot change the rest of your theme. The stylesheet cannot load scripts or reach outside the widget.

Previewing

The preview beside the editor draws your design as the storefront will. Choose one of the example products, or click Preview a product from your store to see it on one of yours. Your theme's own fonts and styles show only on your store. The preview does not run your JavaScript.

JavaScript

The JavaScript box at the bottom of the designer holds a script for your design. It runs once on every page where your design draws the subscription widget or the bundle options, after they are drawn. A page can show more than one widget, so find them all with document.querySelectorAll.

What the designer does not do

• A template cannot use the app's own class names or data attributes (such as purchase-option-* or data-tier-total); the editor tells you which one when it refuses.
• We support the designer itself. Building and maintaining your design's markup and CSS is up to you or your developer.

Updated on: 10/06/2026