Nav update: the Storefront primary-nav item has been renamed to Storefront & Portal. The hub now contains two cards (Subscription widget, Customer portal) for easier discovery. Old Storefront sub-paths still work.
Overview
Adding Subi widgets to different sections of your store increases subscription visibility and improves customer conversion. Widgets can be placed on your homepage, landing pages, featured product sections, collections, and quick view modals. To do this, you need to enable the corresponding settings in the Subi panel and add the Subi widget as an app block to your theme.
Prefer not to edit your theme? We can add the widget to these sections for you in most themes. Open the chat in the Subi app and tell us which page and section you want it on (for example, a featured product on your homepage). We’ll ask for collaborator access to your store, then let you know once the widget’s in place, or explain what’s possible if your theme or another app’s block gets in the way.
Display Subscription Widget on Homepage and Other Pages
To display a subscription product on your homepage or landing pages:
Enable the Display subscription widget on home page and other pages setting in the Subi panel.
Add the desired product to your page.
Add the Subi widget block to the product section.
Heads Up: You must be using an Online Store 2.0 theme to add the Subi widget block. If your theme is customized, please follow this article.
Setup guide (for Online Store 2.0 Themes)
Setup guide (for Online Store 2.0 Themes)
If you are using Online Store 2.0 themes, follow these steps to add the featured product section:
From Shopify Admin, go to Online Store > Themes.
Click Customize next to your live theme.
Open the template of the page you want to edit.
From the left menu, open Sections.
Click + Add section and select Featured product section.
Click the section to edit the blocks within it.
Add a product that has a selling plan on Subi.
Optional: Drag the ⋮⋮ icon to rearrange sections.
To add the Subi widget:
Click + Add Block inside the featured product section.
Search for the Subi widget block and add it.
Optional: Drag the ⋮⋮ icon to rearrange the widget on the product form.
Save your theme.
In your Subi panel, go to the Widget tab.
Find and enable the setting labeled "Display subscription widget on home page and other pages".
Find and enable the setting labeled "Display subscription widget on home page and other pages".
If the product has a Subi selling plan, the widget will appear in the featured product section.
This will allow your selected products to show the Subi subscription widget on your homepage and landing pages once the widget block is added to your theme.
Display Subscription Widget on Collection & Quick View
To allow customers to subscribe directly from collections or quick view modals:
Steps to Enable:
In your Shopify Admin, go to:
Subi Subscriptions > Storefront & PortalOn the Subscribe & save widget card, click Customize widgets.
In the widget settings, locate the option:
Display subscription widget on collection & quick view
Enable this setting.
💡 Note:
The Subi widget will appear automatically in quick view modals if:
The product has a Subi selling plan, and
You're using an Online Store 2.0 theme.
The quick view modal only appears for products with variants.
If the product has a Subi selling plan and you are using an Online Store 2.0 theme, the Subi widget will automatically appear in the quick view modal of your collections.
Note: The quick view modal is only shown when the product has variants; otherwise, it will not appear.
Display Membership Section on Other Pages
The Membership section lets you showcase your membership plan directly on your storefront. This section makes it easy for customers to learn about the benefits of joining and to subscribe with one click.
Setup Guide
If you are using Online Store 2.0 themes, follow these steps to add the featured product section:
From Shopify Admin, go to Online Store > Themes.
Click Customize next to your live theme.
Open the template of the page you want to edit.
Click +Add Section and from Apps select Subi Membership Section.
Select the created membership product in Product field
Let Customers Switch Cart Items to a Subscription on the Cart Page
Can customers turn an item that is already in their cart into a subscription? Yes. Add the Cart subscription upgrade block to your cart page, and customers can pick a delivery schedule for each eligible item before they check out.
This block is useful when you keep your theme's own cart drawer (for example, because another app adds a delivery date picker to it) and do not use Subi's cart drawer.
What your customers see
A box titled Make it a subscription listing each eligible item in the cart, with its image, name, variant and quantity.
A Purchase Options menu on each item with your Subi delivery schedules and One Time Purchase. One Time Purchase is not offered for a product that can only be bought as a subscription.
When a customer picks a schedule, the cart page reloads once, so your theme's item prices and cart total show the subscription price.
If you chose upsell products, a You may also like section under the items, with each product's image, name, price and an Add button. Add puts one unit of the product in the cart as a one-time purchase, and the cart page reloads once. When no item in the cart can be switched to a subscription, the block shows this upsell section alone.
A Save up to N% badge beside the title when at least one of the offered plans has a percentage discount. N is the largest discount among those plans, for example Save up to 15% when your plans offer 10% and 15%.
Which cart items are listed
The block lists an item when its product has a Subi subscription or membership plan and the item is either a one-time purchase or on one of those plans. It does not list:
Items added through a Build a box, a Fixed bundle or a Volume discount offer. Their prices are set by those offers, so they are never changed from the cart page.
Products that have no Subi plan, and items on another app's plan.
Items another app ties to other items in the cart, for example a product whose paid options a product options app adds as separate cart items. Changing the schedule of one of them alone would separate it from its options.
When no item in the cart qualifies and you chose no upsell products, the block does not show at all.
Setup guide
From Shopify Admin, go to Online Store > Themes.
Click Customize next to your live theme.
From the page selector at the top, open the Cart template.
Add the block in one of two places:
Inside your theme's cart section: click Add block in that section and choose Cart subscription upgrade. Not every theme allows app blocks here.
As its own section: click Add section, open Apps and choose Cart subscription upgrade. This works on every Online Store 2.0 theme.
Click Save.
In the theme editor the block shows a sample preview, not your real cart. Open your store's cart page to see it working.
You can also start from Subi: in the Subi app, open Growth, click Set up on the Cart page block card, then click Open theme editor. The theme editor opens on your cart template with the block ready to add. The block has no on/off switch in Subi: it shows wherever you add it in the theme editor, and you hide it by removing it there.
Heads Up: The Subi app embed must be turned on in your theme. If the theme editor shows the notice "This block needs Subi's current storefront widget", contact our support team to update your store's widget; until then, the block shows nothing on your storefront.
Can the block go inside my theme's cart drawer?
No. Shopify does not let apps add blocks inside a theme's cart drawer. The cart page block is how Subi lets customers switch cart items to a subscription when you keep your theme's own drawer.
Changing the block's colors, texts and upsell products
How do I change what the cart page block says or how it looks? In the Subi app, open Growth and click Set up on the Cart page block card. The page has three tabs, and a live preview of the block beside them for desktop and mobile:
Appearance: the block's colors, such as text, background, border and the Add button. These are separate from your Subi cart drawer colors.
Content: every text the block shows, including the title, the line under it, the Purchase Options label, the One Time Purchase option, the savings badge, the messages shown while an item updates or when it cannot be updated, and the upsell section title, Add button and the message shown when a product cannot be added. In the savings badge, keep {N} where the percentage should appear. Each text can be up to 200 characters.
Upsell: up to 10 products to show under the block. This list is separate from your Subi cart drawer's upsell list. With no products chosen, the block shows no upsell section.
Click Save to apply your changes to the block on your store. Until you save, the block uses its default colors and English texts and shows no upsell products.
The block's texts are translated the same way as your Subi cart drawer's texts. The block has no text settings in the theme editor.
Need Help?
Feel free to contact our support team. We're here for you anytime:
Live Chat: Message us from within the Subi app or your Shopify Admin.
Email: Reach us at support@subi.co.
Want a hand with this? Book a free 30-minute setup call with our team.