Select your platform

Customize the Subscription Widget in Subscriptions for Shopify Checkout

Laurel
Laurel
  • Updated

This help article will guide you through some common text, color, or placement changes that are available to you depending on the Shopify theme you are using.

The product price within the app is unable to dynamically adjust on the product page to reflect the subscription discount if the user selects the subscribe button on the widget. If the subscription button is selected, the discounted price will be shown next to each delivery frequency instead.

This article is relevant to Subscriptions for Shopify Checkout. If you have Subscriptions V1 on your store, then please visit Configure the Display Settings in Bold Subscriptions V1. If you are unsure of which version you have, please visit Identify Your Version of Bold Subscriptions.

 

 

Customize the Subscription widget app block

The Subscription widget app block is only compatible with Shopify's Online Store 2.0 themes. Please visit Installation Guide for Subscriptions for Shopify Checkout for more information on how you can install the widget via this method.

Access the style settings

To access the Subscription widget app block style settings, please follow the steps below.

  1. From your Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Next to your chosen theme, click Customize.
  3. From the drop-down menu at the top of the page, select the product template.

    Product template

  4. Select the Subscriptions widget.

    Note: You'll need to preview a subscription product in order to see the customizations as you make them. You can change this from the top of left menu of the theme settings.

  5. Make your desired changes in the settings using the instructions below.
  6. Click Save in the top right-hand corner of the page.

Default to subscribe

Checking the Default to subscribe checkbox ensures the Subscribe and Save option is preselected automatically when your customer lands on the product page.

 Example

Default to subscribe.png

Change the widget colors

 Alert

If you’ve previously installed Bold Subscriptions using the automatic installation, you'll need to remove the line of code that includes bsub.scss from your theme.liquid file to allow the app block settings full control of your styling options. To access the theme files from within Shopify, navigate to Online Store > Themes, then select the ellipsis next to your desired theme and click Edit code.

You can customize the colors of your subscription widget using the color picker in the Style Settings of the Subscriptions widget. To update a color, click on the color you want to change and select another color, or enter a hex code.

The Primary Color section updates the Subscribe and Save section as well as the Delivery Frequency checkbox.

 Example

Primary colors

The Secondary Color section updates the subscription frequency text and highlight. The highlight color is displayed in the same color, but at a higher opacity. 

 Example

Secondary colors.png

The Background Color updates the background color of the entire widget. If a dark color is used, the default widget text updates to white.

 Example

Screenshot 2023-10-16 at 3.00.27 PM.png

Border radius

The Border radius setting controls how sharp or soft the corners of the subscription widget border are. A high number will create a rounded corner, and a low number will create a sharp corner.

Language styling

You can update the language of your widget text within the Language Settings fields of the Subscription widget block settings. 

 Example

Language settings.png

Change the widget placement

You can change the placement of the widget by dragging and dropping the app block to different sections of the product page. 

Under Product Information, hover over the Subscriptions widget. Click and hold the icon on the right, then drag and drop the widget to your desired location.

 Example

place-the-widget.gif

 

 

Customize the standard widget 

 Alert

If you’ve installed Subscriptions for Shopify Checkout on your store prior to March 2023, then you may have the bsub.scss file on your store, instead of the bsub.css as shown in the CSS changes below.

It's best to work on an unpublished theme when making your styling changes to allow you to preview your styling changes first before applying the changes to your storefront.

Icon styling

Subscription Icons

The icons that are used within the widget can be updated and changed. The default icons being used are SVGs (scalable vector graphic file), but you can change them to image files.

The advantage of using an SVG is that you can customize the colour of the SVG, while an image is static.

To locate the files to adjust the icons, please follow the steps below.

 

 

Access the bsub-widget.liquid file

  1. From your Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme where Bold Subscriptions is installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, locate and select the file titled bsub-widget.liquid.

 

 

 Pro Tip

SVGs use a viewbox attribute to determine how much of the SVG you can see (using the original size of the SVG). To change the size of the SVG, you will want to make use of the width and height attributes on the SVG element within the bsubs.css file around line 85.

bsub.css file

Note: If you are using the bsub.scss file, then you can use the .bsub-widget__image class near line 114.

  1. One-time purchase icon - This icon can be changed on line 45 by replacing the SVG with your own SVG, or replacing it with an img tag.

    One time Purchase Icon

  2. Subscribe and save icon - This icon can be changed on line 83 by replacing the SVG with your own SVG, or replacing it with an img tag.

    Subscribe and Save Icon

 

 

Language styling

Widget Language Preview

 

The language for the subscription widget can be changed in the bsub-widget.liquid file. Follow the steps below to adjust the text shown in the above example.

 

 

Access the bsub-widget.liquid file

  1. From your Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, locate and select the file titled bsub-widget.liquid.

 

 

  1. Purchase Options - This text can be changed on line 20.
    Purchase Options

  2. One-time Purchase - This text can be changed on line 58.
    One-Time Purchase Option

  3. Subscribe and Save - This text can be changed on line 96 by replacing {{- group.name -}} with the text you would like to apply.
    Subscribe & Save

  4. Delivery Frequency - This text can be changed on line 118.
    Delivery Frequency

 

 

Change the frequency display

You can change the order in which your subscription frequencies display on your storefront from within the Subscriptions app admin. It is ultimately determined by the order in which you've created your frequency intervals.

For Example: If you have created the following intervals within your subscription group:

  • 1 Month
  • 4 Months
  • 2 Months

Your frequencies will then be shown in that order on the storefront.

To change the order of your intervals, delete and recreate the intervals in the order you wish them to appear.

 

 

CSS styling for the standard widget

 Pro-Tip

Making adjustments to the subscription widget does require knowledge of CSS. If you'd like one of our partners to complete a paid customization on your store, please reach out to HeyCarson via this form.

All CSS code changes for the standard subscriptions widget need to be added to your theme's liquid code files.

Follow the instructions listed below to make your desired CSS changes.

Widget CSS Preview

1. Purchase Options text

  1. From your Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, open bsub-widget.liquid.
  4. Find the line that contains the text Purchase Options.
  5. Replace this line with the following code: 
    <span class="purchase-options"> Purchase Options </span>

    Note: The class text can be changed to anything that you like, however, the same class must be used in the code mentioned in step 7 below.

    Purchase Options Code

  6. Click Save.
  7. Under Assets, open bsub.css.
  8. At the very bottom of the file, copy and paste the following code, along with your CSS changes: 
    .purchase-options {  
    Enter CSS code here 
    }
  9. Click Save.

 

 

2. Change background color of widget

  1. From your Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Assets, open bsub.css.
  4. Find the line of code that starts with .bsub-widget__wrapper:

    bsub.css wrapper

  5. Remove the code that follows after background-color: and replace this code with a background color you would like to apply.
  6. Click Save.

 

 

3. Change background color of Purchase Option labels

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Assets, open bsub.css.
  4. Find the line of code that starts with .bsub-widget__group-header:

    bsub.css group header

    Note: If you are using the bsub.scss file, you can edit the code that starts with .bsub-widget__group-label.

  5. Remove the code that follows after background-color: and replace this code with a background color you would like to apply.
  6. Click Save.

 

 

4. One-time Purchase text

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, open bsub-widget.liquid.
  4. Find the line that contains the text One-time Purchase.
  5. Replace this line with the following code: 
    <span class="one-time-purchase"> One-time Purchase </span>

    Note: The class text can be changed to anything that you like, however, the same class must be used in the code mentioned in step 7 below.

    one time purchase code

  6. Click Save.
  7. Under Assets, open bsub.css.
  8. At the very bottom of the file, copy and paste the following code, along with your CSS changes: 
    .one-time-purchase {  
    Enter CSS code here 
    }
  9. Click Save.

 

 

5. Subscribe and Save text

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, open bsub-widget.liquid.
  4. Find the line that contains <span> {{- group.name -}} </span>.
  5. Replace this line with the following code: 
    <span class="subscribe-and-save"> {{- group.name -}} </span>

    Note: The class text can be changed to anything that you like, however, the same class must be used in the code mentioned in step 7 below.

    subscribe and save code

  6. Click Save.
  7. Under Assets, open bsub.css.
  8. At the very bottom of the file, copy and paste the following code, along with your CSS changes: 
    .subscribe-and-save {  
    Enter CSS code here 
    }
  9. Click Save.

 

 

6. Delivery Frequency text

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, open bsub-widget.liquid.
  4. Find the line that contains the text Delivery Frequency.
  5. Replace this line with the following code: 
    <span class="delivery-frequency"> Delivery Frequency </span>

    Note: The class text can be changed to anything that you like, however, the same class must be used in the code mentioned in step 7 below.

    delivery frequency code

  6. Click Save.
  7. Under Assets, open bsub.css.
  8. At the very bottom of the file, copy and paste the following code, along with your CSS changes: 
    .delivery-frequency {  
    Enter CSS code here 
    }
  9. Click Save.

 

 

7. Subscription frequency checkbox

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Assets, open bsub.css.
  4. At the very bottom of the file, copy and paste the following code, along with your CSS changes: 
    svg.bsub-widget__checked-icon.bsub-widget__image { 
    Enter CSS code here 
    }
  5. Click Save.

 

 

8. Subscription frequency text

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, open bsub-widget.liquid.
  4. Find the line that contains the text {{- plan.name -}}.
  5. Replace this line with the following code: 
    <span class="bsub-plan-text"> {{- plan.name -}} </span>

    Note: The class text can be changed to anything that you like, however, the same class must be used in the code mentioned in step 7 below.

    subscription frequency text code

  6. Click Save.
  7. Under Assets, open bsub.css.
  8. At the very bottom of the file, copy and paste the following code, along with your CSS changes: 
    .bsub-plan-text {
    Enter CSS code here 
    }
  9. Click Save.

 

 

9. Subscription price

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, open bsub-widget.liquid.
  4. Find the line that contains the text data-bsub-per-delivery-price.
  5. Replace this line with the following code: 
    <span class="delivery-price" data-bsub-per-delivery-price> </span>

    Note: The class text can be changed to anything that you like, however, the same class must be used in the code mentioned in step 7 below.

    subscription price code

  6. Click Save.
  7. Under Assets, open bsub.css.
  8. At the very bottom of the file, copy and paste the following code, along with your CSS changes: 
    .delivery-price {
    Enter CSS code here 
    }
  9. Click Save.

 

 

10. Divide line symbol

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, open bsub-widget.liquid.
  4. Find the line that contains the text &nbsp;/&nbsp;.
  5. Replace this line with the following code: 
    <span class="bsub-divide-line"> &nbsp;/&nbsp; </span>

    Note: The class text can be changed to anything that you like, however, the same class must be used in the code mentioned in step 7 below.

    Divide Line code

  6. Click Save.
  7. Under Assets, open bsub.css.
  8. At the very bottom of the file, copy and paste the following code, along with your CSS changes: 
    .bsub-divide-line {
    Enter CSS code here 
    }
  9. Click Save.

 

 

11. Subscription delivery text

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, open bsub-widget.liquid.
  4. Find the line that contains the text data-bsub-delivery-frequency.
  5. Replace this line with the following code: 
    <span class="bsub-delivery-text" data-bsub-delivery-frequency>delivery</span>

    Note: The class text can be changed to anything that you like, however, the same class must be used in the code mentioned in step 7 below.

    Delivery text code

  6. Click Save.
  7. Under Assets, open bsub.css.
  8. At the very bottom of the file, copy and paste the following code, along with your CSS changes: 
    .bsub-delivery-text {
    Enter CSS code here 
    }
  9. Click Save.

 

 

12. Subscribe Only

When your products are set up as Subscribe Only, the customization set up is slightly different than the standard widget.

To adjust the Purchase Options Text for Subscribe only products:

  1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
  2. Find the theme that has Bold Subscriptions installed, and select the ellipsis, then Edit Code.
  3. Under Snippets, open bsub-widget.liquid.
  4. Find the line that contains the text for Purchase Options:
    Purchase Options Text
  5. If you're looking to adjust the language, remove this variable.
  6. Add a new tag around line 16:
    type code here
  7. Click Save.