Storefront display (widget) options

The Subscription Herder storefront widget controls how your customers select subscription plans for your products. There are three options available:

• The standard widget follows the original Shopify recommendations for user experience around subscriptions in your store and is a compact and effective experience
• The flat widget gathers all subscription options into a single list and presents them together to customers providing more information at a glance
• The hidden widget can be used when your product has a single subscription option and purchasing a subscription is required

All widgets can hide the option for one-time purchases and for the hidden widget it's required that one-time purchases are disabled for relevant products. The following sections give more information on each type of widget.

Using the standard widget

The standard widget is the first widget released for Subscription Herder and follows Shopify's original recommendations for storefront subscriptions UI/UX. All text within the widget is customizable. Selecting a subscription is a two step process where customers first pick the plan group (or one-time purchase) and then select the relevant plan option. See the following screenshot for an example.

You may want to use the standard widget if you like the compact design and you want to have many subscription plan groups (like "Subscribe and save" above) available for different options. When expanding a subscription option all plan options are displayed at once.

Using the flat widget

The flat widget displays more information up-front about each subscription option. Further, subscription options can be displayed above the option for a one-time purchase and additional marketing text (like "Best Value") can be added to the first option of the widget. Selecting a subscription is a one step (or zero step if the first option is selected by default) process. If multiple subscription plan groups are associated to the product then the widget may be very long.

You may want to use the flat widget for a more streamlined experience when there are just a few subscription options for your products. Customers see everything up-front and subscriptions can be pre-selected reducing the time it takes for customers to buy new subscriptions.

Using the hidden widget

If you're offering a subscription box or other type of product that has just one subscription option and doesn't offer one-time purchase then you may want to use the hidden widget. This widget is simply hidden on the page so customers are not required to pick any subscription options before moving to checkout.

Mix and match different widgets across products

It's possible to use different widgets for different products by creating new product templates in the Shopify theme editor. Follow these steps:

1. From the theme editor (Online store > Themes > Customize for your theme of interest)
2. Use the droplist at the very top of the page to pick All products > Create template
3. Name your new template appropriately and install the widget of choice
4. Navigate to a product that should use the new template and change the Theme template to the new template in the Online Store section

Repeat the final step for any products that should use the same widget.

Advanced control with CSS

Both the standard and the flat widgets allow in-depth control over their presentation with customized CSS. Use the "Custom CSS" box under Advanced Settings in the Shopify theme editor after adding your widget of choice to write custom CSS rules. This is an advanced topic so please feel free to contact our support team for help!