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

# How to Enable the Subscription Widget in the Online Store

| To access this page, go to [**Supr Bundles & Subscriptions > Design**](https://admin.shopify.com/apps/super-subscriptions/app/widget)

The widget is what your customers use to pick a subscription or a bundle on your product pages. One widget shows both: your subscription options and your bundle options. To turn it on, click **Enable widget** on the **Design** page and then click **Save** in your theme editor. There is no code, embed code or snippet to paste.

### Table of contents

* [Video walkthrough](#3-video-walkthrough)
* [Step-by-step instructions](#3-step-by-step-instructions)
* [Where the widget appears](#3-where-the-widget-appears)
* [Choosing an exact position](#3-choosing-an-exact-position)
* [Showing the widget on other pages](#3-showing-the-widget-on-other-pages)
* [Quick add and quick view popups](#3-quick-add-and-quick-view-popups)
* [PageFly and other page builders](#3-pagefly-and-other-page-builders)
* [Setting up on an unpublished theme](#3-setting-up-on-an-unpublished-theme)
* [Troubleshooting](#3-troubleshooting)
* [Common questions](#3-common-questions)
* [Related guides](#3-related-guides)

### Video walkthrough

If you would rather watch than read, this video shows the app embed being switched on in the theme editor. That switch is what **Enable widget** turns on for you.

${frame}[](https://www.youtube.com/embed/UpHcV7CoYVg)

### Step-by-step instructions

1. In your Shopify admin, open **Supr Bundles & Subscriptions** and go to **Design**.
2. If the widget is not on yet, you see a **Your widgets are not live yet** banner. Click **Enable widget** (in the banner or at the top of the page).
3. In the window that opens, click **Enable**. Your theme editor opens in a new tab with **Supr Bundle & Subscriptions** switched on under **App embeds**.
![Enable button](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/screenshot-2025-07-12-at-19571_gm3jkw.png =757xauto)
4. In the theme editor, click **Save** in the top right corner. The editor shows a **One more step** reminder until you do. If you close the editor without saving, the widget stays off.
![Theme editor save button](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/5c6ce361-b562-467d-bf5c-f57834_bnt2do.png)
5. Go back to the app tab. You see **Widget enabled** once the app has found the saved switch. If it says **Widget not enabled**, click **Enable** again and make sure you click **Save** this time.

You can also start from **Home**: the setup guide step **Widget enabled** (or **Subscription widget enabled** / **Bundle widget enabled**, depending on what you sell) has the same **Enable widget** button. Once the widget is on, that button changes to **Customize widget** and takes you to **Design**.

|| Prefer to do it by hand? In your Shopify admin go to **Online Store > Themes**, click **Customize** on your live theme, open **App embeds** (the icon at the bottom of the left sidebar), turn on **Supr Bundle & Subscriptions** and click **Save**. In older versions of the app this switch was called **Subscriptions (1.0 themes only)**.

### Where the widget appears

There is nothing to drag or position. The widget places itself on your product pages, directly above the add to cart button, and it works the same way on every theme, including older (vintage) themes.

* It appears on every product page whose product is in a **Published** offer, whichever product template the product uses.
* Your bundle options sit right next to the subscription options. Whether the bundle options are above or below them is set on **Design > Elements > Page layout > Bundle on top**.
* The space above and below the widget is set on **Design > Spacing > Around the widget**.
* The widget has no add to cart button of its own. It uses your theme's add to cart button, so your product page needs the theme's **Buy buttons** block.

### Choosing an exact position

If you want the widget somewhere else on the product page, for example under the price or under a reviews line, add the **Subscriptions + Bundles** block where you want it:

1. Go to **Online Store > Themes** and click **Customize**.
2. Open a product page using the template selector at the top of the editor (for example **Products > Default product**).
3. In the product information section, click **Add block**, then **Apps**, then **Subscriptions + Bundles**.
4. Drag the block to where you want the widget and click **Save**.

Keep the app embed on. Wherever a **Subscriptions + Bundles** block is on the page, the embed's copy removes itself, so you never get two widgets from this.

|| A block belongs to the template, not to one product. Moving it moves the widget on every product that uses that template. If your products use more than one product template, repeat this on each template where you want the new position. Templates without a block keep the automatic position above add to cart.

### Showing the widget on other pages

You can also sell from a page that is not the product's own page, such as a landing page, a collection page, your home page or a blog post. The complete widget appears there, with the same bundle options, subscription options and design you set up on the **Design** page.

1. In your theme editor, open the page you want.
2. Add a section that shows one product. Most themes call it **Featured product**.
3. In that section, click **Add block**, then **Apps**, then **Subscriptions + Bundles**.
4. Click the block and set its **Product**. Away from a product page the block cannot tell which product you mean, so it needs to be told. Until you do, the theme editor shows **Nothing to show yet: this block has no product selected**.
5. Keep the section's own **Buy buttons** block. The widget uses that add to cart button.
6. Click **Save**.

|| You can place more than one on the same page. Each keeps its own options and prices, and each product's add to cart button carries the choice the shopper made for that product.

The app embed on its own only shows the widget on product pages. For any other page, use the block as above.

Another option for a button, a banner or an email is a quick subscribe link: **Grow > Quick subscribe links** builds a link that goes straight to checkout with the product and the subscription already chosen. See [Creating Subscription Invitations (Quick subscribe links)](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/creating-subscription-invitations-quick-subscribe-links-tuhx5q/).

### Quick add and quick view popups

Many themes have a **Quick add** or **Quick view** button on product cards in collections and on the home page. Whether the widget shows there depends on the theme:

* **Themes whose popup loads the full product form** (for example Dawn with standard quick add): the widget and bundle options show inside the popup when the **Subscriptions + Bundles** block is in your product template. Add it as described in [Choosing an exact position](#3-choosing-an-exact-position).
* **Horizon and the themes built on it**: for a product with a subscription, the quick add button opens the product page instead of a popup, and the widget is there as usual.
* **Other themes**: if the popup shows no widget or a broken one, turn quick add off in the theme editor (it is usually a setting on the collection or product grid section) so shoppers go to the product page, or contact support and we will check your theme.

### PageFly and other page builders

There is no widget ID, shortcode or embed code, and pasting code into a Custom Code or HTML element will not work. The widget is a Shopify app block, and Shopify only lets app blocks be added through the theme editor. Page builders support this with their own app block element.

**On a PageFly product page**, you do not need to do anything. With the app embed enabled (see the steps above), the widget places itself above the add to cart button, just like on a theme product page.

**On a PageFly landing page:**

1. In the PageFly editor, open your page and drag the **App blocks** element (under Shopify elements) to where you want the widget. PageFly allows one App blocks element per page, and it needs an Online Store 2.0 theme.
2. Follow PageFly's prompt to open the theme editor, then click **Add block**, **Apps**, **Subscriptions + Bundles**.
3. Click the block and set its **Product** to the product your offer targets.
4. Make sure the page also has PageFly's add to cart button for that same product, then save and publish.

PageFly's own guide to this element: [How to use the App blocks element](https://help.pagefly.io/page-structure-and-elements/shopify-elements/custom-content/how-to-use-shopify-app-block-element-with-pagefly-section).

**GemPages, Shogun and other builders** work the same way: product pages get the widget from the app embed, and other pages need the builder's element for Shopify app blocks with **Subscriptions + Bundles** added to it. If your builder does not list the block, contact support.

|| Once your page is live, add the product to the cart with a subscription selected and check the cart shows it. If it does not, send us the page link and we will place the widget for you.

### Setting up on an unpublished theme

**Enable widget** always opens your live (published) theme. To set up and test on a different theme first:

1. Go to **Online Store > Themes**, find the theme and click **Customize** (or **Edit theme**).
2. Open **App embeds**, turn on **Supr Bundle & Subscriptions** and click **Save**.
3. Preview that theme and open a product that is in one of your offers.

The widget only appears on themes where it is switched on, so your live theme is unchanged until you switch it on there too. Your offers are shared by every theme: once the widget is on in your live theme, every **Published** offer shows there.

### Troubleshooting

|| If the widget does not appear after saving, confirm that the theme editor saved successfully. You can click **Enable widget** again to retry.

If you still do not see the widget on your product pages, work through [The subscription widget is not displayed in my store](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-is-not-displayed-in-my-store-1w34x11/). If it shows up twice or in the wrong place, see [The subscription widget appears twice or at the bottom of the page](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-smaa7r/).

### Common questions

**Is there an embed code or Liquid snippet I need to add to my theme?**
No. **Design > Enable widget** switches the widget on in your theme, and you click **Save** in the theme editor. Nothing needs to be pasted.

**I clicked Enable widget but nothing changed on my store. Why?**
Almost always the theme editor was closed without clicking **Save**. Click **Enable widget** again and click **Save** at the top right of the theme editor.

**Do I need the app embed and the app block?**
You need the app embed. The **Subscriptions + Bundles** block is optional: add it only to choose an exact position or to show the widget on a page that is not a product page. Using both never shows the widget twice.

**The theme editor says the app block could not be added. What do I do?**
Use the app embed instead: **Design > Enable widget**, then **Save**. The embed does not need a place in your product section, so it works on themes whose product section does not accept app blocks.

**Do I have to add the widget to each product?**
No. The widget shows on every product that is in a Published offer. You choose products on the offer, under **Applies to**, not in the theme.

**Can I show the widget on my home page or a landing page?**
Yes. Add a **Featured product** section, add the **Subscriptions + Bundles** block to it and set its **Product**. See [Showing the widget on other pages](#3-showing-the-widget-on-other-pages).

**Can customers choose a subscription on the cart page?**
No. There is no picker on the cart page. Customers choose on the product page, or on any page where you placed the block. On Shopify Plus, the Checkout Subscription Picker lets them switch at checkout instead, see [Switching to a subscription at checkout](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/what-shoppers-see-in-the-cart-and-at-checkout-uw6zhp/#3-switching-to-a-subscription-at-checkout-shopify-plus).

**How do I move the widget above the add to cart button?**
With the app embed on, that is where it goes on its own. If it sits somewhere else, see [The subscription widget appears twice or at the bottom of the page](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-smaa7r/).

### Related guides

* [[Video Guide] How to enable APP EMBED](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/video-guide-how-to-enable-app-embed-sfsmt1/)
* [The Subscription Widget](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-131jh5z/)
* [The subscription widget is not displayed in my store](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-is-not-displayed-in-my-store-1w34x11/)
* [The subscription widget appears twice or at the bottom of the page](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-smaa7r/)
* [Creating Subscription Invitations (Quick subscribe links)](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/creating-subscription-invitations-quick-subscribe-links-tuhx5q/)
* [What happened to the widget editor](https://supr-bundles-and-subscriptions.crisp.help/en-us/article/what-happened-to-the-widget-editor-vxamcc/)