Subscription Widget

The Subscription Widget app block adds purchase options to your product pages. Customers choose between a one-time purchase and your Awtomic subscription plans, and pick a delivery frequency. Their choice is added to the cart with the product.

You add the block to your theme in the Shopify theme editor. You control how it looks and behaves in Awtomic under Tools → Widget Configurations.

Before you begin

• Install Awtomic and assign at least one Awtomic subscription plan to your products. See Setting up subscription plans and Assigning subscription plans to products.
• Use a theme that supports app blocks (an Online Store 2.0 theme).
• If your theme still has the older Awtomic plan selector installed, remove it when you switch to this block so customers don't see two sets of purchase options. See Subscription widget local installation.

1. Add the block to your theme

1. In Shopify admin, go to Online Store → Themes and click Customize on the theme you want to update.
2. Open the product template, for example Products → Default product. Repeat these steps for each product template that sells subscription products.
3. In the product information section, click Add block and select Awtomic's Subscription Widget from the Apps list.
4. Drag the block above the quantity selector and Add to cart button.
5. Click Save.

📘

Keep the block in the product section

Place the Subscription Widget in the same section as the product's variant picker and Add to cart button. The widget adds the selected plan to that section's product form. In another section, customers' subscription choices are not added to the cart.

On product templates, the block uses the product being viewed. On other pages, such as a landing page with a featured product section, choose the product in the block's Product setting.

In the theme editor, the block shows a placeholder when the product has no Awtomic subscription plans. On your storefront, the widget stays hidden on those products.

2. Customize the widget in Awtomic

The widget works without any setup in Awtomic, using the built-in look. To change its look or behavior, create a widget configuration.

📘

If you don't see Widget Configurations under Tools, contact [email protected] to confirm the feature is available for your store.

1. In Awtomic, go to Tools → Widget Configurations.
2. Click Create widget.
3. Configure the widget using the tabs described below. The Preview on the right updates as you edit. Your theme's fonts and styles can make the storefront look slightly different.
4. Click Save in the save bar.

The first widget you create becomes your Default widget and applies to every product page, unless a mapping assigns a different widget. See step 3 below.

General

Preferences

Styles

Styles are grouped into collapsible sections. Enter sizes as numbers; they are applied in pixels.

Custom CSS

Add CSS to style the widget further. It is applied after the widget's own styles. Start selectors with .awtomic-sw, for example:

.awtomic-sw .awtomic-sw__option {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.awtomic-sw .awtomic-sw__option--selected {
  border-color: #1f5f3f;
}

Manage widgets

From the Widget Configurations list you can:

• Edit a widget.
• Duplicate a widget to create a copy named "(Copy)" that you can change separately.
• Set as default to make a widget the default for your store.
• Delete a widget. Mappings that use it are removed too. You can't delete your only widget. If you delete the default widget, another widget becomes the default.

3. Use different widgets for different themes or templates

Mappings let you show a different widget on a specific theme or on specific product templates. For example, a wine club product template could get its own design.

1. In Tools → Widget Configurations, click Widget Mappings.
2. Click Add mapping.
3. Choose the Theme, or Any theme.
4. Under Product Templates, select one or more product templates. Leave it empty to use the widget for every product template on that theme.
5. Choose the Widget, then save.

Each theme and template combination can be mapped only once.

When a product page loads, the widget uses the first match in this order:

1. A mapping for the current theme (or Any theme) that includes the product's template.
2. A mapping for the current theme (or Any theme) with no templates selected.
3. Your Default widget.

Mappings only choose which widget configuration applies. You still need to add the Subscription Widget block to each theme and product template in the theme editor.

What customers see

• A One-time purchase option, followed by one option for each Awtomic subscription plan group on the product. Each subscription option shows its price, and, when the plan has a discount, the original price with a strikethrough and a Save badge.
• A frequency selector inside the selected subscription option. When a group has only one frequency, it shows as text.
• The plan description, if the plan has one, below the selected subscription option.
• On subscription-only products, there's no one-time option and the first subscription option is selected.
• When the customer changes variant, the options and prices update for that variant. Options for sold-out variants can't be selected.
• The selected plan is added to the page URL as selling_plan, so shared links open with the same plan selected. You can also link to a product page with ?selling_plan=<plan ID> to preselect a plan.

Plans used only at checkout, such as Card Vaulting and allocation plans, never appear in the widget.

Build-a-Box products

On Build-a-Box products, the widget replaces the Add to cart button with Customize my box and hides the Buy it now button. Customize my box opens the box builder with the selected variant and plan. Shuffle bundles keep the standard Add to cart button.

Works with other Awtomic blocks

• Product Price shows the price of the option selected in the widget.
• Gift form appears when a customer selects a giftable prepaid plan.

Test your setup

1. Open a product with Awtomic subscription plans in your storefront or theme preview.
2. Confirm the purchase options appear with the expected default selection.
3. Select a subscription option, choose a frequency and add the product to the cart.
4. In the cart, confirm the item shows the subscription and frequency you selected.
5. Change the variant and confirm the options and prices update.
6. Open a product without subscription plans and confirm the widget doesn't appear.

Troubleshooting

Contact [email protected] if you need help.