Make a selection

New - Express Add-Ons Widget

Laurel
Laurel
  • Updated

Bold Subscriptions’ Express Add-Ons widget can be added to your product pages to offer a convenient way for your customers to add additional products to their existing subscription while shopping on your storefront.

This article describes how the Express Add-Ons widget works on your storefront and walks you through the setup process.

Note: This feature is compatible with Online Store 2.0 themes only.

 

 

Video Walkthrough

 

 

Functionality

When the Express Add-Ons widget is added to your product page, your existing subscribers can quickly add additional products to their existing subscriptions either as a one-time purchase or a recurring order, depending on how you offer the product on your store. For example, if the product is available for one-time purchase only, customers can add the product to their upcoming subscription order as a one-time purchase only. If the product is available for both subscription and one-time purchase, customers have the choice to add the product as a subscription or a one-time order.

If a customer has more than one existing subscription, a dropdown menu appears in the widget which they can use to select the subscription they want to add the product to.

Once a product is added to their subscription, it appears in the subscription customer portal.

Example

This example shows a customer adding a product to their existing monthly subscription as a one-time order.

Express Add-Ons

 

 

Features

The Express Add-Ons widget is customizable. You can change the widget title, colors, button styles, position, and display options in the widget block settings.

The following display options can be enabled or disabled in the widget settings:

  • Display a confirmation step before a product is added.
  • Display the widget to non-logged customers (non-logged in users are directed to the login page.)
  • Display the widget while the page is loading.
  • Display the widget to customers without active subscriptions.

The Express Add-Ons widget can be added to the product templates of your choice.

 

 

Important considerations

Customers must be logged in to their account before they can add a product to their upcoming subscription. By default, the Express Add-Ons widget is visible to all users but directs non-logged-in customers to the login page. This setting is enabled by default, but can be adjusted to your preference.

When products are added to existing prepaid subscriptions, please consider the following:

  • When a product is added as a one-time purchase, the customer is charged for that product when the next subscription order generates.
  • When a product is added as a recurring order, the customers is charged for that product each time an order generates.
  • Products that are added to in the middle of a prepaid cycle do not incur shipping charges until the prepaid subscription renews.

The Express Add-Ons widget allows customers to add products to their upcoming order regardless of available inventory. Our team is working to update this functionality to match your Shopify inventory settings in the near future.

 

 

Setup

Step 1: Add the Express Add-ons widget block to your product template

You can add the Express Add-ons widget block to your theme from the Bold Subscriptions admin or the Shopify admin. Based on your preference, please follow the relevant instructions below.

 

Option 1 - Add the Express Add-ons widget from the Bold Subscriptions admin

  1. From the Subscriptions admin, navigate to Settings  > General settings.
  2. In the Express Add-ons Widget section, click Click here.

    Note: This automatically opens your theme customizer and adds the Express Add-ons widget to your default product template.

    Express Add-ons Widget section

  3. Optional: Change the product template by selecting the template dropdown menu at the top of the page, select Products, then select the product template you’d like to use.
    Select a product template
  4. Optional: Change the position the widget appears on the page by dragging and dropping the Express Add-ons app block to a location of your choice in the left menu.
  5. Click Save.

 

Option 2 - Add the Express Add-ons widget from the Shopify admin

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Next to your chosen theme, click the Customize button.
  3. From the template dropdown menu at the top of the page, select Products, then select the product template you’d like to use.
    Select a product template
  4. In the left menu, navigate to Template > Product information, then click Add block.
  5. Click apps, then click on Express Add-ons to add the widget.
    Express Add-ons widget block
  6. Optional: Change the position the widget appears on the page by dragging and dropping the Express Add-ons app block to a location of your choice in the left menu.
  7. Click Save.

 

Step 2: Customize the Express Add-Ons widget settings

Alert: To ensure the correct product from each respective product page is available to your customers, please do not use the Select product or Product Change button in the settings. Selecting a specific product from here will only allow your customers to add that specific product.

  1. Click on the Express Add-ons widget block to access the settings.

    Note: If your screen is wider than 1600 px, then the settings appear on the right side of your screen. If your screen is smaller than 1600 px, then they appear on the left side.

  2. Enable or disable the following display settings as desired:
    1. Display while loading - This displays a “Checking for subscriptions” message in the widget while the page is loading. This message can be customized in the Language settings below.
    2. Display when the customer is not logged in - This displays an “Add to your next subscription order” button in the widget. When customers are not logged in, this button directs them to the login page. This message can be customized in the Language settings below.
    3. Display when the customer has no active subscriptions - This displays an “Add to your next subscription order” button when customers are not logged in. Clicking the button directs them to the storefront login page. Once logged in, the widget displays a “No subscriptions to add to” message. This message can be customized in the Language settings below.
    4. Show confirmation dialog before adding product to subscription - This provides a confirmation step before the product is added to the subscription.
  3. Under Language settings, adjust the following text as desired:
    1. Loading text
    2. Logged out text
    3. No subscriptions text
  4. Under Style settings, adjust the following settings as desired:
    1. Widget Title
    2. Widget Background Color
    3. Widget Text Color
    4. Widget Border Radius
    5. Widget Border Color
    6. Widget Border Thickness
    7. Widget Padding
    8. Button class names - By default, this field is populated to match your theme class names so the buttons in the widget match the style of your theme. If you prefer to use the button style settings (below) to change the button appearance, then you must remove the text from this area.

      Note: This only affects the Button style settings (shown in steps i - n below).

    9. Button Background Color
    10. Button Text Color
    11. Button Border Color
    12. Button Border radius
    13. Button Border Thickness
    14. Button Padding
    15. Dropdown Border radius
    16. Dropdown Border Color
    17. Dropdown Border Thickness
    18. Additional CSS - This can be used to define (or override) css styles for all widget elements.
  5. Click Save.