Skip to main content

Subscription Widget

Overview​

The subscription widget block allows users to view and select a product’s selling plan.

Creating and modifying selling plans​

To create, update, or remove a selling plan from a product, you must use a subscription app from the Shopify App Store. This Expansion Block works with any app that creates selling plans.

About selling plans​

Selling plans represent how products can be sold and purchased. For example, a product can be configured to enable it to be billed and delivered on a monthly basis at a 15% discount. Two common selling plan types include the "Subscribe and save" and "Prepaid" options. "Subscribe and save", also known as "pay per delivery", is a selling method where a customer pays for goods or services per delivery. "Prepaid" is a selling method where a customer makes a single payment upfront.

Adding the subscription widget to your theme​

Once a selling plan is created, navigate to your theme and add the subscription app block to your product page or a featured product section. If a selling plan has been assigned correctly to a product, the subscription widget will render all selling plans including one-time purchases.

Widget Customization​

Out of the box, default styles and layouts are applied to the subscription widget. You have the option to style the widget further by adjusting theme settings in Dawn, changing CSS variables, or creating metaobjects.

Metaobject Setup​

To gain control over naming conventions, layout, and messaging in the widget, you’ll need to create metaobjects. After the metaobject is set, you can create an entry for each subscription plan to change the language and configuration of each selling plan option.

Steps to configure the metaobject:​

  1. Create a metaobject called Subscription, then start adding the fields below.
  2. Add an integer field called Selling Plan (subscription.selling_plan)
  3. Add a single line text field called Title (subscription.title)
  4. Add a single line text field called Subtitle (subscription.subtitle)
  5. Add a rich text field called Description (subscription.description)
  6. Add a single line text field called Badge (subscription.badge)
  7. Add an integer field called Order (subscription.order)
  8. Add a single line text field called Frequency (subscription.frequency)