> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://supr-bundles-and-subscriptions.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Product Page Add-ons

| To access this page, go to [**Supr Bundles & Subscriptions > Design**](https://admin.shopify.com/apps/super-subscriptions/app/widget) and scroll to the **Add-on settings** card at the bottom of the page.

Widget add-ons are the extras around your subscription widget: a badge next to the product price, the add to cart button text, the delivery date picker and a few display rules. Each one is a row in the **Add-on settings** card. Switch a row on or off with its toggle, and click the row to open its settings.

Add-ons change the product page around the widget. They are not the add-on products you can attach to a bundle option, which are set on the offer.

### Table of contents

* [Subscription badge](#3-subscription-badge)
* [Subscription price details](#3-subscription-price-details)
* [Add to cart button text](#3-add-to-cart-button-text)
* [Subscription limit reached text](#3-subscription-limit-reached-text)
* [Plan group order](#3-plan-group-order)
* [Loyalty bonus](#3-loyalty-bonus)
* [Hide when single option](#3-hide-when-single-option)
* [Update product page prices](#3-update-product-page-prices)
* [Currency code on prices](#3-currency-code-on-prices)
* [Date picker](#3-date-picker)
* [Offer countdown](#3-offer-countdown)
* [Add to my subscription](#3-add-to-my-subscription)
* [Common questions](#3-common-questions)
* [Related guides](#3-related-guides)

### Subscription badge

|| Displays a small badge next to the product price whenever a subscription option is selected. This badge highlights the discount so shoppers immediately see the value in subscribing.

* **Badge label**
  Set the text that appears inside the badge. Use `{{ subscription_discount }}` to insert the discount, for example `SUBSCRIPTION • {{ subscription_discount }}`. If your badge label has no variable in it, the badge shows only the text you typed and no discount.

* **Percentage discount text**
  Customize how percentage based discounts are shown using `{{ subscription_discount_percentage }}`.

* **Amount off discount text**
  Customize fixed discount amounts with `{{ subscription_amount_off_discount }}`.

* **Fixed price discount text**
  Show a fixed subscription price using `{{ subscription_fixed_price_discount }}`.

* **Animation**
  Choose from **None**, **Pop**, or **Drop** to draw attention when the badge appears.

The badge label holds the wording, and the three discount texts control how the discount itself is written. Whichever one matches your subscription option's discount type is inserted where you put `{{ subscription_discount }}`. To remove the badge, switch the row off.

### Subscription price details

|| Shows the per delivery price and the unit price under the main product price. This helps customers understand the cost of a prepaid subscription or of products sold by weight or volume.

* **Per delivery price text (prepaid)**
  Label the cost of each delivery on a prepaid subscription option using `{{ per_delivery_price }}`, for example `{{ per_delivery_price }} / delivery`.

* **Unit price**
  Display the unit price with `{{ unit_price }}` and `{{ unit_price_measurement }}`. This uses the unit price you set on the product in Shopify.

* **Price per week or month**
  Choose **Per week** or **Per month** to add a line such as `$7.82 / week`, worked out from the price of each delivery and how often it is delivered. It helps customers compare options with different frequencies, and it follows the bundle option they pick. Word it with `{{ per_week_price }}` or `{{ per_month_price }}`. A month counts as 30.44 days.

* **Later orders price**
  When later orders cost something different from the first, for example after a [refill](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/a-beginners-guide-to-subscription-offers-1ey00x7/) or a loyalty discount change, a line such as `Then $5.00 from order 2` is added. Word it with `{{ renewal_price }}` and `{{ order_number }}`. The price is per unit, like the lines above, and it is the same later price Shopify shows at checkout.

These lines appear only when a subscription option is selected. The per item price printed inside the widget itself ("$3.50 each") is a different thing: it is switched on and off in **Elements > Price per unit** and worded in **Labels**, see [The Subscription Widget](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-131jh5z/#3-prices).

### Add to cart button text

|| Changes the add to cart button's label while a subscription is selected, so customers know they are starting a recurring order. It is on by default and reads **Add subscription to cart**.

* **Add subscription to cart button text**
  Enter any wording, such as "Subscribe now", to replace your theme's button text whenever a subscription option is selected.

You can also put the saving on the button, using any of these variables:

* `{{ subscription_savings_amount }}` the money the subscription saves
* `{{ subscription_discount_value }}` the discount itself, as a percentage or an amount
* `{{ subscription_full_amount }}` the price before the subscription discount
* `{{ subscription_discounted_amount }}` the price after it

For example, `Subscribe and save {{ subscription_savings_amount }}` shows as "Subscribe and save £5.00". The figures follow whatever the customer has selected, so they update when they change the quantity, the variant or the delivery frequency.

To keep your theme's own button text at all times, switch this add-on **off**. The button then says whatever your theme says, whether a subscription is selected or not.

### Subscription limit reached text

|| The wording shown when a shopper picks a subscription option that has reached a limit you set on it. Limits are set on the option itself, in the offer, under **Limit active subscriptions** (**Max per option** and **Max per product**).

* **Add to cart button text**
  Replaces the add to cart button text when a limited subscription is selected. The default is "Subscription limit reached".

* **Checkout validation message**
  The error shown at checkout if the customer still has the limited product in their cart.

### Plan group order

|| Sets the order in which subscriptions from different offers appear, when a product is in more than one offer.

Each offer's subscription options form one group on the product page, headed by the offer's **Subscription name**. Click the row, move the groups up and down with the arrows, then click **Save**. The top group is shown first. The same order is used everywhere Shopify lists them, including checkout.

To change the order of the options inside one offer, drag their rows in the offer instead. See [The order things appear in](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-131jh5z/#3-the-order-things-appear-in).

### Loyalty bonus

|| Shows the rewards of a loyalty program on the widget, so shoppers see what they earn by subscribing. It is off by default.

Switch it on with its toggle and click the row to set its wording and look. The rewards themselves come from the loyalty program attached to the subscription option. See [Loyalty programs](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/loyalty-programs-bun7bv/).

### Hide when single option

|| Hides the subscription widget whenever a shopper has only one way to buy, because there is nothing left for them to choose.

That covers a product with one subscription option and no one-time purchase row. On an offer with bundle options it is also judged on the bundle option the shopper has selected: while it leaves only one way to buy, because it is **One-time purchase only**, or **Subscription only** with a single delivery frequency, the widget steps aside and that way to buy is used. Pick a bundle option that offers more and the widget comes back.

It is off by default. Turn it on to let your bundle options carry the whole choice, see [One choice instead of two](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/bundle-types-quantity-breaks-buy-x-get-y-fixed-bundles-and-build-a-box-1p9zux1/#3-one-choice-instead-of-two). It is also the way to hide the widget on a subscription-only product that has a single delivery frequency.

### Update product page prices

|| Keeps your theme's own product price in step with what the shopper has chosen. When they pick a subscription option or a bundle deal, the large price at the top of your product page changes to what they will actually pay, with the original price crossed out beside it whenever the choice saves them money.

This is on by default. Turn it off to leave your theme's price alone: your subscription widget and your bundle options still show their own prices, only the theme's price stops changing.

Where your theme already knows how to display a sale, the app puts your theme into that state and fills in your theme's own price and crossed out price, so a subscription or bundle discount looks exactly like a markdown you set yourself, in your fonts and your colours. Where a theme has no sale styling of its own, the crossed out price is built from your theme's price so it still matches your type and colour, with a plain line through it.

| This is checked directly against Horizon, Dawn and the themes built on Dawn (Refresh, Craft, Sense, Ride, Taste, Studio, Crave, Colorblock, Publisher, Origin, Spotlight, Trade, Concept), the newer Shopify themes Ritual and Tinker, and Impulse, Empire, Motion, Turbo, Focal, Pipeline and Highlight. Other themes usually work too. If your product page price does not change, tell support which theme you use and we will add it.

| Because the theme's price follows the selected option, the price a shopper sees when the page opens is the price of whichever option is selected first. If a subscription option or a bundle pack is the default, the discounted or pack price shows at the top. To open on the regular price, click **Make default** on the **One-time purchase** row of the offer.

### Currency code on prices

|| Decides whether the prices in your subscription widget and your bundle options carry the currency code, for example **$24.00 USD** instead of **$24.00**.

* **Same as theme** (the default): the widget and the bundle options follow your theme's own currency code setting, so they match the rest of your store.
* **Show**: always print the currency code, whatever your theme does.
* **Hide**: never print it, even if your theme shows currency codes elsewhere.

The choice saves as soon as you pick it and applies to every price in the subscription widget and the bundle options, including the prices that update when a shopper changes the variant, the selected option or the quantity. Savings such as "Save $5.00" are written without the code either way. On **Same as theme** the preview on the Design page shows prices without the code, because it cannot read your theme's setting; your storefront still follows the theme.

### Date picker

|| Lets customers choose their delivery date from a calendar under the widget. Useful for local delivery or whenever you want customers to pick their first delivery date.

Switch it on with the toggle on the **Date picker** row, then click the row to set it up:

* **Date picker heading**
  The heading above the calendar field.

* **First delivery date label** and **Next delivery date label**
  The names of the dates added to the cart and checkout on a subscription.

* **Single delivery date label**
  Used for one-time and bundle purchases, which have no next order.

* **Available delivery days**
  Choose which days of the week customers can select.

* **Processing days before delivery**
  Add a buffer between order placement and the earliest available delivery date.

* **Maximum first order delivery date**
  Limit how far in the future customers can choose their first delivery (in days, weeks, or months).

* **Disabled delivery dates**
  Block out specific dates or date ranges such as holidays.

* **Order cutoff time**
  The last time customers can order for the earliest available delivery date, with its **Time zone**.

| What the date field looks like is not set here. Once the date picker is on, a **Delivery date** section appears in **Elements** on the [Design page](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-131jh5z/#3-elements), with its heading, field and border, so the field matches the widget it sits under.

### Offer countdown

**Offer countdown** shows how long is left on an offer, such as **Ends in 2d 4h**, on the product page under the offer title. It appears only for offers with an **End** date under **Offers > Schedule** (see [Scheduling an offer](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/a-beginners-guide-to-subscription-offers-1ey00x7/#3-publishing-and-drafts)), updates while the page is open, and disappears when the offer ends.

Click the row to change its **Countdown text**, where **{time}** prints the time left in days, hours and minutes in the shopper's language, and its **Text color** (the offer title's colour by default). The text is translated with your other labels under **Settings > Translations > Widgets**.

### Add to my subscription

**Add to my subscription** lets a customer who already subscribes add the product they are looking at to that subscription, straight from the product page, with no new checkout. The button appears under the subscription options only for customers who are signed in to your store and have an active subscription; nobody else sees it.

With more than one subscription, the customer picks which one from a list (**Subscription #1234, next order October 23**). The product is added to every order of that subscription, at its subscription price, and the customer gets the usual **Subscription updated** email.

It follows the same rules as adding products in the customer portal: it needs **Add products** on under **Settings > Customer portal**, and it is refused inside your **Lock changes before the next order** window. Click the row to reword the button and messages; they are translated with your other labels.

### Common questions

**The button changed to "Add subscription to cart". How do I keep my theme's "Add to cart"?**
Switch off **Add to cart button text** in **Add-on settings**, or type the wording you want in **Add subscription to cart button text**.

**The price at the top of my product page does not change when a subscription or bundle is selected.**
Check that **Update product page prices** is on. If it is and your theme's price still does not change, tell us which theme you use and we will add support for it.

**My product page shows a discounted price instead of the price I set.**
The theme's price follows the option selected when the page opens. Make the **One-time purchase** row the default on the offer, or switch off **Update product page prices**.

**Prices in the widget show "USD" (or do not show it).**
Change **Currency code on prices** to **Show** or **Hide**. If the widget shows a different currency from the rest of your store, message us with the product link.

**My product is subscription only with one frequency. Can I hide the widget?**
Yes. Switch on **Hide when single option**.

### Related guides

* [The Subscription Widget](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-131jh5z/)
* [What happened to the widget editor](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/what-happened-to-the-widget-editor-vxamcc/)
* [Store pickup and local delivery for subscriptions](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/store-pickup-and-local-delivery-for-subscriptions-ntmu38/)
* [What shoppers see in the cart and at checkout](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/what-shoppers-see-in-the-cart-and-at-checkout-uw6zhp/)