Make a selection

Customize the Standard Subscription Widget

Laurel
Laurel
  • Updated

This help article outlines some common text, color, or placement changes that you can make to the standard subscription widget from within your theme files.

This article contains instructions for those who have installed standard subscription widget using Liquid code. If you have installed the Subscription widget app block (available for Shopify Storefront 2.0 themes), please visit Customize the Subscription Widget App Block.

When making changes in the theme files, it's best to work on an unpublished theme. This allows you to preview and test your styling changes without affecting your live store.

 

 

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.

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.

Note: 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

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 order of your frequency options

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

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 ShopExperts 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 widget background color

  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.