The subscription widget is what shoppers use on your product page to choose between a one-time purchase and a subscription. You design it in the Widget design editor: pick a look, choose what shows, set colors, change the text, and check the result in a live preview before anything reaches your store.
Some looks, such as Elite and the Cards layout, depend on your Appstle plan. If a look isn't available on your plan, you'll see an upgrade prompt.
Before you start
At least one subscription plan with products in it. The widget shows only on products in a plan. See Create a subscription plan.
The Appstle Subscriptions app embed is turned on in your theme. To check, go to Online Store → Themes → Customize → App embeds in Shopify.
Open the Widget design editor
In the Appstle Subscription app, click Subscription Widget. The Widget design tab opens.
Check that the Subscription widget card shows On. If it shows Off, click Turn on, then click Save in the bar at the top of the page.
Under the preview, click Customize. The Widget design editor opens full screen.
Edit texts opens the editor with the All texts panel showing. To go straight to the Type or Settings step, click … and choose Change look or Widget settings.
What the editor steps do
The editor has a live preview on the right and six steps on the left.
Type: pick the look your widget starts from.
Content: choose what shoppers see on the widget.
Style: set colors, corners and text size.
Behavior: choose what's pre-selected, the order of the options, prepaid plans and prices.
Advanced: fine-tune each part of the widget. Most stores never need this.
Settings: control how the widget behaves on your store, and add your own CSS.
Click Next at the bottom of a step to move to the next one.
To jump to any text, color or setting, type in Search texts, colors and settings at the top of the editor, or press ⌘K (Ctrl+K on Windows).
Want us to style the widget for you? Click Chat with us at the bottom of any step.
Pick a look (Type)
Choose a Layout, then a look. Subscribe & save shows one-time purchase and a subscribe & save option with its frequencies. Cards makes every plan its own card, next to one-time purchase.
To start from a photo of a look you like, click Design with AI at the top of the step. See "Design your widget from a photo with AI" below.
Your current look has a Current look badge on the Widget design tab and a check mark in the editor. Edited means you've changed it from the look's defaults. To reset it, click Start over on the look in the editor.
Previous looks, at the bottom of the list, are earlier versions of Classic radio, Compact dropdown and Elite. They're marked Deprecated, but they still work on your store.
To switch layout without resetting your colors and sizes, open the other layout and pick Custom.
Picking a new look resets your design. Colors, sizes and toggles go back to that look's defaults. Your texts, settings and custom CSS stay. To go back, click Undo, or Discard if you haven't clicked Update yet.
Choose what shows (Content)
Turn parts of the widget on or off. Click a row to open its texts and options. Some rows appear only for some looks.
One-time purchase: let shoppers buy once as well as subscribe. By default, Free gift and Subscriber rewards show only while a subscription is selected. To show shoppers buying once what subscribing earns them, open the row and select Show subscriber rewards and free gifts while it is selected.
Frequencies shown as: show the delivery frequencies as a Dropdown, a List or Buttons. It doesn't show for looks in the Cards layout.
Title: the heading above the options.
Saving badge: how much the subscription saves.
Card badge: a badge like "Most popular" on one option.
Frequency badge: a badge like "Most popular" on one delivery frequency.
Free gift: the gift a subscription includes, with its picture.
Subscriber rewards: what subscribers earn over their orders.
Why subscribe?: a short list of reasons to subscribe, like saving on every order.
Subscription details: how the subscription works, with its discounts and terms.
Minimum quantity message: the message for plans that need a minimum quantity.
Set colors and text size (Style)
By default the widget follows your theme's fonts, text size and colors. Anything set to Theme keeps following your theme.
Brand color: colors the shopper's choice (the chosen option, its radio or frequency) and the badges.
Text color: the title, the options, the prices and the delivery frequency.
Corners: Square, Soft or Round.
Text size: Theme, Small, Medium or Large.
Every color: each part of the widget and its colors.
Choose what shoppers see first (Behavior)
Pre-select the subscription: shoppers arrive with the subscription already chosen instead of one-time purchase.
Subscription first: lists the subscription above one-time purchase.
Keep delivery frequencies open: shoppers still see the delivery frequencies while one-time purchase is selected.
Keep your plan order: lists the delivery frequencies in the order you set in your subscription plans. When it's off, they're sorted by price.
Prepaid plans in their own section: shows prepaid plans in a section of their own. It appears only for some looks.
Pre-select the prepaid option: shoppers arrive with the prepaid option already chosen. It works while prepaid plans have their own section. Only one option can be pre-selected, so this is greyed out while Pre-select the subscription is on.
Update prices with the quantity: the widget's prices follow the quantity picker, so 2 items show twice the price. It works with the Classic radio, Compact dropdown, Luminic and Elite looks on Shopify's free themes. If it doesn't work with your theme, contact support.
Compare-at price on one-time purchase: shows the original price crossed out beside the one-time price.
Compare-at price on the subscription: crosses out the product's compare-at price on the subscription instead of the one-time price. It applies only to products with a compare-at price, and prepaid plans aren't affected.
Fine-tune each part (Advanced)
Advanced has a section for each part of the widget, such as Title, Options, Selector, Badge, Price and Delivery frequency. Click the ? next to a section name to see what it controls. The part is outlined in the preview.
At the bottom of Advanced, click Turn off Widget Design to bring back your widget type's own look.
Set how it works on your store (Settings)
Show on product pages: shows the subscription options on your product pages. It's the same switch as the Subscription widget card on the Widget design tab. Turn it off to hide the widget everywhere for a while. Your settings are kept.
Show on sold-out products: shoppers can subscribe to a product while it's out of stock, and receive it once it's back.
Storefront analytics forwarding: sends widget events to the tracking tools already on your storefront. It depends on your Appstle plan. See Send subscription widget events to your tracking tools.
Send the fulfillment count: adds the number of deliveries each payment covers to the cart, as a hidden line item property. Turn it on only if an app or your fulfillment process reads it.
Don't add the plan to the page URL: stops the widget from adding the shopper's choice to the page URL. Turn it on only if your analytics count events twice when a subscription is picked.
Custom CSS: your own CSS for the widget. See "Add your own CSS" below.
Design your widget from a photo with AI
Describe the look you want, or show an AI chat a photo of a look you like, such as a site you love or your packaging. The AI designs your widget, and you see the result in the preview before anything is saved.
In the editor, click Design with AI. It's at the top of the Type step and at the bottom of the Style step. The Design with AI panel opens on the Style step.
Under 1. Describe the look, type the colors and style you want. If you're using a photo, you can leave it empty.
Click Copy prompt, or click one of the Open buttons next to it to copy the prompt and open that AI chat in one go. Paste the prompt into a new chat. To use a photo, attach it to the same message.
Copy the AI's whole answer, paste it under 3. Paste its answer, and click Apply to the preview.
Check the preview, then click Update to publish it.
A message lists the settings that changed. To go back to your previous design, click Undo in that message. Want something different? Tell the AI what to change, and paste its new answer.
If you see "There's no design in that answer", ask the AI to answer with the design in a JSON code block, as the prompt says, then paste its answer again.
Edit the widget's texts
In the editor, click Texts at the top right. The All texts panel opens.
Search for a text, or scroll to a group such as Purchase options or Delivery frequency.
Click a text, change it, and check the preview.
You can also switch the preview to Edit and click a part of the widget to change its text there.
Some texts include variables in double braces, such as {{selectedDiscountPercentage}}. The widget fills them in for each shopper, so keep them as they are. A broken variable, such as a missing brace, can stop the widget from showing. Open Debug logs to see which text to fix.
If your store has more than one language, each text has a field for every language.
If a language says "Not set up for this language yet", or a text you changed doesn't show on your store, open More actions on the Subscription Widget page, click Sync Labels, then click Sync. This sends all your widget texts to your store again.
Preview your changes
Preview and Edit: Preview shows the widget as shoppers see it. Edit lets you click any part of the widget to change it.
Previewing on: choose which product the preview uses. It starts with a product that's in a subscription plan.
Show photo: adds the product photo to the preview.
Store width: sets the width the preview uses for your product page.
The desktop and mobile buttons switch the preview size.
The bug icon opens Debug logs, which explain why the widget, or a part of it, might not show for shoppers.
These preview choices are for you only. They aren't published to your store. The preview also shows the widget when Subscription widget is Off, so check the card on the page too.
Publish your changes
Click Update at the top right of the editor.
Wait for the "Widget updated" message. The badge next to the look name changes from Unsaved changes to Saved, and your design, texts and settings go to your store. The editor stays open.
Nothing changes on your store until you click Update. If you close the editor first, your changes are discarded without a warning. To go back to the last saved version yourself, click Discard.
The Undo and Redo arrows step through your changes one at a time. The button next to them, for example 3 changes, lists what isn't on your store yet and lets you undo any one of them.
Show a different widget on chosen products
Use Product-specific widgets when some products need their own look, for example a coffee box that needs a different layout from your accessories.
On the Widget design tab, scroll to Product-specific widgets and click Add widget.
Enter a Name. Only you see it.
Under Products, choose the products.
Pick a look and set it up in the Type, Content, Style and Advanced steps.
Click Save.
A product uses only one widget. Products that already have another widget are hidden from the list. To move one to this widget, select Show products that have another widget, then add it.
Behavior and Settings stay the same for all products.
To remove a widget, click … on its row, then Delete widget. Its products go back to your default widget.
Add your own CSS
In the editor, open Settings, then the Custom CSS section, and add your CSS. It's meant for the subscription widget, and also works for other storefront changes related to subscriptions.
Your CSS always wins over the design. If a change in the editor doesn't show, your CSS may set the same property. The editor then shows "Your custom CSS also sets…" with an Open Custom CSS button.
Move the widget on your product page
Appstle usually places the widget for you, near your add-to-cart button. To put it somewhere else, or if your theme uses a custom product template and the widget doesn't show, add it to your product page as a block in Shopify's theme editor.
In Shopify, go to Online Store → Themes → Customize, then use the page menu at the top of the editor to open your product template, for example Default product.
In the Product information section, click the Add block that's in the same list as Variant picker and Buy buttons.
Open the Apps tab and select Subscription Widget.
Drag the Subscription Widget block to where you want the widget, for example just above Buy buttons.
Click Save, then preview a subscription product.
When the block is on the page, the widget appears where the block is. Products that aren't in a subscription plan show nothing there. The block only sets the spot: the widget's look still comes from the Widget design editor, and the Appstle Subscriptions app embed has to stay on.
The block changes only the template you add it to, so products on other templates keep the automatic spot. To go back to the automatic spot, or if the widget stops showing after you add the block, remove the block and click Save.
Other widget tabs
The Subscription Widget page has more tabs for other places the widget appears.
Watch the video guides
Each step in the editor has a Watch guide link to its video. You can also watch them here:
FAQs
Why don't shoppers see the widget?
Check these first:
The Subscription widget card on the Widget design tab shows On.
The product is in a subscription plan marked Active.
The Appstle Subscriptions app embed is on in your theme.
On a custom product template, the Subscription Widget block is on the page. Without it, Appstle may not find a spot for the widget. See "Move the widget on your product page" above.
The product isn't sold out, or Show on sold-out products is on.
The subscription options aren't hidden by their Who can see setting. An option shown only to tagged customers is hidden from guests and from customers without those tags.
Then click the bug icon in the editor to open Debug logs. They list what might stop the widget, or a part of it, from showing for the product you're previewing, such as an empty or broken text. A red number on the icon is how many problems they found. If they list no problems and the widget still doesn't show, click Copy for support and paste the result into a chat with us.
I picked a new look and lost my colors. Can I get them back?
Yes. Click Undo, or Discard if you haven't clicked Update yet.
Why does my look say Deprecated?
Your store uses an earlier version of Classic radio, Compact dropdown or Elite. It still works on your store. To move to the refreshed version, open Type, pick the look with the same name and a New badge, then click Update. This resets your colors and sizes to that look's defaults, so check the preview first.
What does "Update available" mean?
Widget Design has improved since you last clicked Update. The preview on the Widget design tab already shows the improved widget. Click Update on the card to bring it to your store, or click Customize to check it first.
Can I use a different look on one product?
Yes. Use Product-specific widgets, described above.
What does "Widget settings changed in another tab" mean?
The widget was saved in another tab, or by a teammate, while you were editing. Reload the page, then make your changes again.
Where are the More Labels and Customization tabs?
Their settings are now in the Widget design editor. Change texts under Texts, colors under Style, and everything else under Advanced and Settings.
Need help?
Email [email protected] or message us through the chat widget in the app. We're available 24×7×365.