Switch from the old subscription widget

The old subscription widget is being retired. Move your store to the Subscription Widget app block, which you add to your theme and style in Awtomic under Tools → Widget Configurations.

Which widget does your store use?

Before you begin

These settings don't carry over from the old widget. Set them up again in Tools → Widget Configurations:

• Styling. Restyle the widget on the Styles and Custom CSS tabs.
• Custom text and translations. Text you changed in your theme's language editor (the awtomatic.plan_selector keys) isn't copied. Enter it on the Texts tab. If you sell in more than one language, create a widget for each language and map it to that language's product templates.
• Which option is selected by default. Set Default Selected Option on the Preferences tab.

The old widget could also appear on collection pages and quick-add pop-ups. The Subscription Widget is built for product pages.

1. Set up your widget

1. In Awtomic, go to Tools → Widget Configurations and click Create widget.
2. Match your old widget's text and styling, then click Save. The first widget you create becomes your Default widget.

See Subscription Widget for every setting.

2. Add the block to your product templates

1. In Awtomic, go to Launch and find Add the subscription widget to your theme.
2. Click Add next to each template, then click Save in the theme editor.
3. Add the Gift form block if you sell gift subscriptions, and the Product Price block if you want the product price to update for subscriptions.

Full steps are in Add the subscription widget to your theme.

📘

Customers see both widgets until step 4

Once the block is on your live theme, product pages show the old and new widgets together. Do steps 2–4 in one sitting.

3. Test a product page

1. Open a product with Awtomic subscription plans on your storefront.
2. Select a subscription option and a delivery frequency.
3. Add the product to the cart and confirm the cart shows the delivery frequency.

4. Turn off the old widget

1. In Awtomic, go to Launch.
2. Under Old subscription widget, click Disable.
3. Reload a product page. Only the Subscription Widget should appear.

To turn the old widget back on while you fix something, click Make public.

Remove the old code from your theme

If the old widget was installed in your theme code, the Disable button doesn't remove it. Remove the code once the Subscription Widget works. This needs someone comfortable editing theme code, or contact [email protected] and we'll do it for you.

1. In Shopify admin, go to Online Store → Themes and click Duplicate on your live theme. Make every change below on the copy.
2. On the copy, add the Subscription Widget block to your product templates as in step 2.
3. Remove each place the old plan selector is rendered: {% render 'awtomic-plan-selector' %} in product sections and product card snippets, such as main-product.liquid and product-item.liquid. Remove the whole block between the {% comment %} Awtomic Subscriptions {% endcomment %} markers.
4. In layout/theme.liquid, remove the renders of awtomic-imports and awtomic-translations.
5. Delete the awtomic-plan-selector, awtomic-imports and awtomic-translations snippet files.
6. Search the theme code for the names you deleted to confirm nothing still refers to them.
7. Preview the copy on product pages, collection pages and the cart, then click Publish.

📘

Keep awtomic-theme-custom

If your theme has an awtomic-theme-custom snippet, leave it in place. It holds customizations made for your store.

Custom code that used the old widget

The old widget's JavaScript, including window.bundleapp, the bundleapp:ready event, onInit, initializeForms and setThemeConfigs, stops working when you turn it off. Update any code that depends on it first.

The Subscription Widget fires an event on document whenever a customer changes the purchase option or frequency:

document.addEventListener('awtomic:sellingplan:change', (event) => {
  const { productId, variantId, sellingPlanId } = event.detail;
  // sellingPlanId is null when one-time purchase is selected
});

The event detail also includes the selected price (formattedPrice, formattedCompareAtPrice) and discount (discountValue, discountType).

Get help

We can switch your store with you, including removing a local install. Contact [email protected] with your store name and which setup you have.