The Subscription Widget

To access this page, go to Supr Bundles & Subscriptions > Design


The Design page is where you control how your subscription and bundle widgets look on your product pages: the design, the colours, the corners and spacing, which parts are shown, the wording customers read, and your own CSS. Both widgets are designed together on this one page, so they match each other and your theme. That is the unified widget experience: one set of controls, both widgets, every design.


If the page says Your widgets are not live yet, click Enable widget first. See How to Enable the Subscription Widget in the Online Store.


Table of contents



What is the subscription widget?


The subscription widget sits above your add to cart button and shows the ways a product can be bought: the one-time purchase and your subscription options. Customers pick their delivery frequency, see any discount, and add the product to their cart. If your offer also has bundle options, the bundle widget appears with it on the same product page.


What the widgets offer, which options, which discounts and whether the one-time purchase row shows, is set on each offer in Offers. How the widgets look, and the shared wording they print, is set on this page.


How the page is laid out


  • The preview on the left, which follows you as you scroll.
  • One settings card on the right, with its sections in this order: Design, Colours, Shape, Spacing, Elements and Custom CSS.
  • Labels, a card of its own under the settings card, for the wording your customers read.
  • Add-on settings below both, for the extras around the widget, such as the badge next to the product price, the add to cart button text and the delivery date picker. See Product Page Add-ons.
  • Restore previous design, only on stores that styled their widgets before this page existed.
  • Want help tailoring this to your brand?, with a Chat with an expert button that opens a chat with our team.


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, and the delivery date field under them if you use one.


Use Preview product above it to preview with a real product's options and prices instead of sample data, and Preview variant 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. On a desktop screen the preview never grows taller than the window: its heading and footer stay put and the widgets scroll between them.


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


  1. Click Change to open Choose a design.
  2. Use the switch at the top to pick Subscription widget or Bundle widget. You can type in Search designs or filter by category.
  3. Click the design you want. The gallery closes and the preview shows it.
  4. Save with the save bar at the top of the page. Nothing changes on your store until you save.


Subscription designs, in the gallery's categories:


  • Conversion
    • Checkbox: a single checkbox to switch between one-time and subscription.
    • Aurora: flowing gradient borders with a shimmer effect. What a new store starts on.
    • Lure: the flagship design, with benefit highlights and a discount banner.
  • Classic
    • Classic+: a detailed layout with room for prepaid options and several choices. The price sits at the top and follows the option a customer has chosen, and each option keeps its own price with its discount tag beside it.
    • Dropdown+: all the detail in a compact dropdown. The price sits at the top and follows the option a customer has chosen, so the rows inside the dropdown stay a plain list of frequencies.
    • Panel+: a tabbed layout with a radio button on each option.
  • Minimalist
    • Classic: a simple layout for pay per order options with up to three choices.
    • Dropdown: the most compact way to show your options.
    • Panel: clean and simple panel buttons.
  • Aesthetic
    • Blobs: an animated style to grab attention.


Bundle layouts:


  • Panels: rows, each in its own bordered panel. What a new store starts on.
  • Cards: horizontal cards, good for comparing two or three options side by side.
  • List: vertical rows with a radio button on each option. The most compact.


Every design is styled from this page, in the sections below, so there is nothing to open and nothing to set twice. Only one subscription design and one bundle layout are live on your store at a time, and every offer uses them. 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.


Neon and the Custom designs are no longer offered in the gallery. A store that already runs one keeps it, and still sees its card. A Custom design is written in HTML and CSS rather than assembled from settings, so it keeps a Customise link that opens the code our team wrote for you. See What happened to the widget editor.


Once you have saved changes on this page, a Reset to default button appears in this section. It puts your colours, shape, spacing, elements, labels and Custom CSS back to what the app ships with, on every design, and keeps the design and bundle layout you publish. Like everything else here it only takes effect when you save.


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 Inherit from your theme swatch takes 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. This line only appears if your theme publishes colour schemes.
  • Main colour and Background, on themes that publish a colour palette instead of colour schemes, such as Horizon. See below.
  • One colour, and everything follows it: the ordinary colours, running round the colour wheel from blue through to pink and red, with the neutrals last 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.
  • Gradient: thirteen ready made blends, each drawn in its own colours, starting on Aurora and ending on the one neutral, Ink & silver. In between are Midnight, Blossom, Rose, Sunset, Sand, Ember, Mint, Forest, Ocean, Lagoon and Amethyst. Pick one and its 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.


If your theme publishes a colour palette rather than colour schemes, there is no pair to inherit, so you pick one yourself from two rows drawn in the theme's own colours:


  • Main colour is what your widgets are drawn in: the option a customer has chosen, the borders, the radios and the badges. Your wording follows it, so there is nothing extra to set.
  • Background is the card behind it.


A colour cannot be both, so picking one the other row is already using swaps the two. Reversing a light on dark pair is one click rather than three.


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.


A gradient reaches everything on the widget that is meant to catch the eye, not only its outline. On the option a customer has chosen it draws the option name and the price. On every option, chosen or not, it draws the badges, the savings chips, and the free gift and free shipping lines. The gift and free shipping lines drift slowly, which catches the eye without pulling it off the price. Your discount badge takes the blend on every design, because the badge on a subscription option and the badge on a bundle option are the same object; give the badge a colour of your own on its row in Elements and it keeps that instead.


A free gift or free shipping line is outlined in your colour while its option is unchosen, and fills with it once a customer picks that option. That holds on a plain colour as well as on a gradient, so a row of options shows one solid block of colour, on the option the shopper has actually chosen, and the rest read as offers waiting to be taken.


Whatever blend you land on, the text printed on it is picked to stay readable. The single option stays out of it: it is the plain one-at-full-price row rather than a deal, so it keeps an ordinary outline and its price in your usual colour.


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


Turning off Aurora's shimmer. Aurora animates only while it has a blend to draw. Pick a plain colour under One colour, and everything follows it and Aurora draws flat, with no shimmer. To keep the gradient but lose the motion, pick another design, or ask us in chat.


A very light colour turns the widget round. A cream, a pale grey or an off white cannot be seen on the white card the designs ship with. So the card darkens instead, to a deep shade of your own colour, and your borders, radios and text keep the colour at full strength on top of it. Pick a Background of your own and that is used instead, and going back to an ordinary colour puts the white card back.


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.


While your widgets follow your theme's own colours, an option a customer has not chosen is outlined in that ink stepped back, and the one they have chosen is the only solid outline in the list. Lure draws its discount banner as a band of that same stepped back ink rather than a solid slab.


The name and the price on the chosen option are not painted in your colour. They are picked to read against whatever that option is filled with. Set them yourself on the Offer name, Option name and Price rows if you want something else.


If your theme's colours do not come through the way you expect, pick a colour yourself under One colour, and everything follows it rather than inheriting from the theme. Some themes do not pass their colours on to apps.


If you styled a design element by element before this page existed, saving here replaces those colours, the same way it replaces the spacing and roundness you had set. That is undoable: Restoring your previous design below explains how to get that styling back.


Shape


  • Roundness sets how rounded the corners are.
  • Border thickness sets the width of the borders.


On a design that draws a gradient border, the thickness sets that border too, so the gradient and the flat borders beside it come out the same weight. The option a customer has chosen, and the one under their pointer, are marked by their colour at that same weight rather than a heavier ring of their own. Roundness carries inside a bundle option as well: the free gift, free shipping and add-on rows are rounded to match.


Spacing


Spacing has three parts:


  • Inside each option: Padding top and Padding bottom set the space above and below the content of every subscription option and bundle option. Leave the bottom alone and it follows the top. Horizontal padding sets both sides.
  • Between the widgets: Gap is the space between the bundle widget, the subscription widget and the delivery date field, for when the pieces sit too close together or too far apart.
  • Around the widget: Space above and Space below the whole thing. Use them when your theme puts the widget too close to the add to cart button or the price.


All of it applies to your subscription and bundle widgets at the same time, and to the delivery date field under them.


Because one control sets a value everywhere, saving here replaces spacing and roundness you may have set on individual parts of a design before this page existed. That is undoable: see Restoring your previous design.


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 your published design cannot honour is not shown at all.


  • Both widgets: Offer title, Discount badge, Discount badge on each option (on Classic+ only) and Message badge.
  • Subscription options: Heading, then the surface (Background, Border, Radio), then the text on it: Offer name, Section heading, Option name, Description, Delivery frequency, Price, Crossed out price, Price per unit, Benefits, Benefit icon, Benefits heading and Information tooltip.
  • Bundle options: Heading, Background, Border, Radio, Title, Price, Crossed out price and Price per unit.
  • Delivery date: Heading, Field and Border, the styling of the date field under the widgets. This section only appears once the Date picker is switched on in Add-on settings. See Product Page Add-ons.
  • Page layout: Bundle on top, whether the bundle widget sits above the subscription widget, and Sync bundle prices, whether bundle prices follow the per delivery price of the selected subscription. Both are on by default.


Inside Subscription options and Bundle options, a small heading Only on this design marks the rows that belong to the design you have published and to no other. The list changes with the design you publish. For example:


  • Delivery dropdown, on the designs that show a select for the delivery frequency (Dropdown, Dropdown+, Lure and Checkbox): its fill, the text and caret in it, and that text's size and weight.
  • Thick edge and Hide description until chosen, on Aurora.
  • Thick edge on the bundle options, on the layouts that can draw it.


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 and they swap over straight away.


Border and Background each carry two colours: the ordinary one first, then the one for the option a customer has chosen. Left on default, the chosen one follows your primary colour, which is what most stores want.


The bundle Title row's second colour, the one for a chosen option, only appears where there is a filled option for it to sit on. Your bundle options mark the chosen one with a subtle highlight, and Panels says which option is chosen with the strength of its border. If you would rather the chosen option was filled outright, message support and we will set it for you.


Offer name and Option name are two rows, not one. On the designs that print both, the offer name is the line above a set of choices, "Subscribe and save", and the option name is a choice within it, "Delivery every month". On the designs that print a flat list of options there is no offer name, so only the option name row does anything.


Benefits is one row for both benefit lists: the ticks under a subscription option, and the ticks under the one-time purchase row. Its colour, size and weight apply to both. The row also carries a Gap field for the space between the lines; leave it alone and it follows your padding. What each benefit says is set where you wrote it, on the offer's options.


Benefit icon is a row of its own on the two designs that draw a tick, Lure and Checkbox. The first colour is the tick and its outline, the second is the disc behind it, which stays see-through until you give it a colour. Aurora draws its tick out of the design's own gradient, so it follows Colours instead.


Two things are not set here because they belong to the offer rather than to your design. Whether the one-time purchase row shows, and which option is selected first, are set on each offer: see How to remove the one-time purchase option for a product. And the product image on a bundle option is the image you upload to that option.


Headings and the offer title


A product page can carry an offer title and up to three section headings.


Offer title is a row in Both widgets. It prints your offer's name once at the very top, above the bundle options, the subscription options and the delivery date. It is the Offer name you gave the offer on the Offers page, so rename the offer and the page follows. It is off until you turn it on, and its colour, size and weight are set on the row.


Each section has its own Heading row, with its own switch, colour, size, weight and layout: Subscription options > Heading, Bundle options > Heading and Delivery date > Heading. The layouts are:


  • Centred with lines, the heading in the middle with a rule running out to each side. What a new store starts on.
  • Centred, the heading in the middle with no rules.
  • Plain, the heading on its own at the start of the row.


What each heading says is set in a different place:


  • Subscription heading: the Section title field in Labels. It starts as {{subscription_name}}, which prints the offer's Subscription name, the name you set on the offer above its subscription options (translated with the offer). Type your own words instead ("Never run out!"), or mix the two ("{{subscription_name}}, cancel anytime"). Left empty, the field works as {{subscription_name}}.
  • Bundle heading: the Bundle name field on the offer, above its bundle options. Leave it empty and the heading reads "Bundle & Save". To show no bundle heading at all, switch off Bundle options > Heading in Elements.
  • Delivery date heading: Date picker heading, in Add-on settings > Date picker.


All of these are text a shopper reads, so all are translatable. Offer names, subscription names and bundle names are translated in Settings > Translations under Offers; the widget labels under Widgets.


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 colour on the option a customer has chosen, as a second swatch, on the parts that look different once chosen.
  • Its text size, in pixels.
  • Its text weight, from thin through to black.


What differs from row to row 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.


Two fields belong to none of those columns, so they sit on a line of their own under them: a Gap, for an element made of more than one line, and a Price layout. The benefits list has the first, and the crossed out price has both.


On a narrow screen the controls drop to their own line under the name. 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.


Badges


There are two badges, and they are two rows in Both widgets because each one is set once for both widgets:


  • The Discount badge is worked out from your discount, and reads "-20%" on a subscription option and "Save 20%" on a bundle option.
  • The Message badge is the one you write yourself on a bundle option, in its Badge field, such as "Most popular".


Each carries its own shape, background colour, text colour, text size and text weight. The discount badge's colours start on default, which follows your primary colour; pick a colour on the row to set your own.


There are four shapes:


  • Bubble, a rounded pill sitting beside the title.
  • Tag, a luggage tag with a point on its leading edge.
  • Floating, the pill lifted clear of the row with a soft shadow under it.
  • Tape, a strip stuck to the row's top edge. What a new store starts on for the discount badge.


Floating and Tape leave the row, so those are the two that ask where along it they should sit: Start, Centre or End.


Classic+ prints the discount badge twice: once on the header above its options, and once on each option under it. The second one has a row of its own, Discount badge on each option. Switch it off to leave the header's badge on its own, or give it its own colours, size, weight and shape (Bubble or Tag). Dropdown+ prints one badge only, on the header.


To hide the discount badge, switch off its row. What the badge says ("Save 20%", "20% off") is set in Labels.


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


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.


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 as it is. For each widget you can turn off:


  • Price, the amount on each subscription option or bundle option.
  • Crossed out price, the full price struck through beside the discounted one.
  • Price per unit, the per item price such as "$3.50 each". It starts off on the subscription widget and on for the bundle options.


Upsize prompt (bundle options, off unless you turn it on) adds a link under the quantity breaks such as "Add 1 more to save 15%" while a shopper has a smaller pack chosen and a bigger one saves more. Clicking it picks the bigger pack. It shows only on plain quantity breaks, not on a build-a-box, a fixed bundle, Buy X Get Y or an option with a free gift, and its wording is the Upsize prompt field in Labels.


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. To show only the per unit price, switch off Price and switch on Price per unit.


All three carry a colour, a size and a weight. The subscription Price row also carries the second swatch, for the price on the option a customer has chosen.


The subscription Crossed out price row carries two more fields, on a line under its size and weight:


  • Price layout: Side by side keeps both prices on one line. Stacked puts the crossed out price on its own line above the current one.
  • Gap, the space between the two prices, in pixels.


Each design keeps its own answers, so setting them on the design you publish leaves the others as they were.


Classic+ and Dropdown+ print one price at the top of the widget, and it follows the option a customer has chosen. Turning the price off hides that one too.


Price per unit is only offered on designs that print one. The wording around it, "/ each" or "{{unit_price}} / {{unit_name}}", is set in Labels. The unit price your theme shows under the product price (per 100 g and so on) is a separate add-on, Subscription price details, in Product Page Add-ons.


The order things appear in


  • Which widget comes first: Elements > Page layout > Bundle on top. On by default; switch it off to put the subscription widget above the bundle options.
  • The order of the subscription options: open the offer in Offers and drag the options by their handle in Subscription options, then save the offer. The storefront shows them in that order.
  • The one-time purchase row: on the offer, use the up and down arrows on the One-time purchase row to put it at the top or the bottom of the list.
  • The order of the bundle options: drag them in Bundle options on the offer. The single option's row moves to the top or the bottom the same way as the one-time row.
  • Which option is selected when the page loads: click Make default on that row in the offer. See Setting the default option.
  • A product in more than one offer: each offer's subscription is its own group in the widget. Set the order of the groups in Add-on settings > Plan group order. That order is also used at checkout.


Labels


This is where you reword the text your customers read, in your store's main language. It sits under the settings card, 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, and the card only lists the fields your published design actually prints.


  • Subscription widget: Section title (accepts {{subscription_name}} for the offer's Subscription name), One-time purchase row, Discount badge, percentage, Discount badge, amount off, Discount badge, fixed price, Subscription options heading, Prepaid line, Discount banner, Information tooltip title, Option row (the line printed for each frequency in the list), Price per unit, and the frequency suffixes Every day through Every N years ("/ month", "/ {{n}} weeks").
  • Bundle widget: Savings chip, percentage, Savings chip, tiered box, Savings chip, amount, Per unit suffix ("/each"), Free shipping row, Single option, Free gift row and Upsize prompt ("Add {remaining} more to save {value}%").
  • Build-a-box: everything a build-a-box option prints around its choices, such as the 'Includes' heading, Choices heading, Pick prompt, Selection counter and Minimum not met ("Please pick at least {min} items").
  • Rewards and free gifts: the headings above Buy X Get Y rewards and free gifts, and the word Free printed as their price.


Some fields use placeholders in curly brackets, and each field tells you what its placeholders stand 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.


Some wording is not in Labels, because it belongs to one offer or to an add-on:


  • Subscription option names, descriptions and benefits: on each subscription option in Offers (Option name, Description, Benefits). Option names have no bulk edit, so change them offer by offer; store-wide wording such as the frequency suffixes is edited once here.
  • The one-time row's name, description and benefits: on the offer's One-time purchase row. Leave its Name empty and the row uses One-time purchase row from Labels.
  • Bundle option titles, subtitles and badges, and the Bundle name heading: on the offer.
  • The add to cart button text, the badge next to the product price, and the delivery date wording: in Add-on settings, see Product Page Add-ons.


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


Custom CSS


The last section of the settings card, under Elements, for anything the controls above do not reach. CSS written here applies to both widgets on your product page, and the preview shows what it does before you save.


It belongs to your store rather than to one design, so changing design keeps it. If you wrote CSS in the old per-design editor, that CSS still applies on top.


Leave this empty unless you know the selectors you are after. CSS written here is not checked, so a broken rule can hide part of your widget on your product pages. If you want a change the controls do not cover, such as centring the widget, ask us in chat and we will write it for you.


The widgets cannot take your own HTML. The layout comes from the design you publish, and everything you can change is on this page.


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. After saving, reload a product page in your store to see the result.


This page writes one value across every design at once. If you styled your widgets on the old per-design editor, your first save here is the moment your store moves to the unified widget experience: a Your widgets are improving message asks before that first save, and we take a copy of how your widgets looked beforehand.


Restoring your previous design


This section is for stores that styled their widgets on the old per-design editor, before this page replaced it. If you installed Supr Bundles & Subscriptions after that, there is no previous design to go back to and no Restore previous design card on your page.


Before your store moves to the unified widget experience, we save a copy of how its widgets look. That copy does not expire, and the card names the date it was taken.


From then on, a Restore previous design card sits near the bottom of this page. Use it and your widgets go back exactly as they were just before you moved across. You can restyle afterwards and restore again.


Restoring replaces everything you have changed on this page since that copy was taken. It does not affect your offers, your prices or your subscribers.


What happened to the widget editor explains where each of the old editor's controls moved to.


The Powered by Supr line


Some stores see a small Powered by Supr line under the subscription widget, or inside its information tooltip. Whether it shows depends on your plan: it is removed automatically on paid plans, and there is no switch for it on the Design page. The plans are listed on our pricing page and on Billing in the app.


After you change plan, open the app once and then reload your product page, and the line is gone. If it still shows, message us in chat and we will check it for you.


The same line can appear at the foot of the subscription emails we send for you, and it follows the same rule.


Getting help with your design


The Want help tailoring this to your brand? card at the bottom of the page has a Chat with an expert button. Our team can help you pick a design, match your theme's colours and fonts, adjust spacing on mobile, or write Custom CSS for a change the controls do not cover. Tell us what you want the widget to look like, a screenshot helps, and we will set it up with you.


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.
  • 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.
  • For options side by side rather than stacked, use Panel or Panel+ for subscriptions and the Cards bundle layout.


Common questions


How do I change the colours to match my brand?
Pick your colour in Colours, then change individual parts in Elements only where they should differ. Save with the save bar and reload a product page.


A setting I changed does not show on my store. Why?
Check that you saved, then reload the product page. If it still does not show, your theme's own CSS is probably overriding the widget there. Message us in chat with the product link and we will fix it without touching your theme.


Can different offers use different designs?
No. One subscription design and one bundle layout are live per store, and every offer uses them. The styling of the others is kept, so switching costs nothing.


How do I hide the price, the crossed out price or the discount badge?
Switch off Price, Crossed out price or Price per unit in Elements, separately for the subscription options and the bundle options. The discount badge has its own row in Both widgets.


How do I put the subscription widget above the bundle options?
Switch off Elements > Page layout > Bundle on top and save.


How do I change "Subscribe & Save", "One-time purchase", "Save 15%" or "/each"?
In the Labels card. The heading above the subscription options is Section title, which prints the offer's Subscription name wherever it says {{subscription_name}} (its starting value), and the bundle heading is the offer's Bundle name. See How to Change/Translate Main Language Texts.


The open delivery dropdown looks different on Windows and on a Mac. Can I style it?
The closed dropdown is styled in Elements > Delivery dropdown. The open list is drawn by the shopper's browser and operating system, so it cannot be restyled. Choose Classic or Panel if you would rather have no dropdown.


Can I add my own HTML, or copy a design I saw on another site?
The widgets take no HTML of their own. Pick the closest design here and style it, then use Chat with an expert and our team will help you get as close as possible.


How do I remove the Powered by Supr line?
It is removed automatically on paid plans. See The Powered by Supr line.



Updated on: 10/03/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!