This help article will guide you through some common text changes, as well as show you how to apply some custom CSS styling to the subscription widget.
While Bold Subscriptions V2 currently does not have a language settings page or CSS input box, the styling and language of the subscriptions widget can still be changed in the theme's liquid files.
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.
Caution
This article is relevant to Version 2 of Bold Subscriptions. If you have Version 1 currently installed on your store, then please visit Configure the Display Settings in Bold Subscriptions V1. If you are unsure of which version that you have currently installed on your store, please visit Identify Your Version of Bold Subscriptions.
Customizing the App Widget Block
Installation via App Widget Block is separate from the manual installation and is only compatible with Shopify's Online Store 2.0 and Shopify 2.0 themes.
Please visit Installation Guide for Bold Subscriptions V2 for more information on how you can install the widget via this method.
When installing Bold Subscriptions V2 via the app widget block, you can manage the language directly within the theme preview window.
Example
When installing Bold Subscriptions V2 via the app widget block, you can manage the widget's color directly within the theme preview window.
Example
When installing Bold Subscriptions V2 via the app widget block, you can manage the widget's placement directly within the theme preview window.
Under Product Information, hover over the BSUB Widget. Click and hold the icon on the right, then move the widget's placement as you see fit.
Select Save in the top-right corner of the preview window to save your progress.
Example
Customizing the Standard Widget
Making adjustments to the Bold Subscriptions theme files can cause unexpected changes to the styling of your subscription widget.
We recommend working 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.
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 be images instead.
The advantage of using an SVG is that you can customize the colour of the SVG, while an image is static.
Below you can find exactly where you can adjust each icon listed as a number in the example above in the liquid file and steps you can follow to locate the liquid file where the icons are generated:
How to Access bsub-widget.liquid File
- From your Shopify admin, select Online Store.
- Select Actions, then Edit code next to the theme you have Bold Subscriptions installed on.
- 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.scss" file on line 114.
- 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.
- 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.
The language for the subscription widget can be changed in the bsub-widget.liquid file. Below you can find exactly where you can adjust each text listed as a number in the example above in the liquid file and steps you can follow to locate the liquid file where the text is generated:
How to Access bsub-widget.liquid File
- From your Shopify admin, select Online Store.
- Select Actions, then Edit code next to the theme you have Bold Subscriptions installed on.
- Under Snippets, locate and select the file titled "bsub-widget.liquid".
- Purchase Options - This text can be changed on line 20.
- One-time Purchase - This text can be changed on line 58.
- Subscribe and Save - This text can be changed on line 96 by replacing "{{- group.name -}}" with the text you would like to apply.
- Delivery Frequency - This text can be changed on line 118.
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 re-order already created intervals, simply delete and recreate the intervals in the order you wish for them to appear in.
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.
Bold Subscriptions currently does not have a CSS input box, which means that all CSS code changes needs to be added into your theme's liquid code.
We have put together a list to help you with applying CSS changes to certain sections of the subscription widget, below.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Snippets", open bsub-widget.liquid.
- Find the line that contains the text "Purchase Options".
- 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.
- Select Save.
- Under "Assets", open bsub.scss.
- At the very bottom of the file, copy and paste the following code, along with your CSS changes:
.purchase-options {
Enter CSS code here
} - Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Assets", open bsub.scss.
- Find the line of code that starts with ".bsub-widget__wrapper":
- Remove the code that follows after "background-color:" and replace this code with a background color you would like to apply.
- Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Assets", open bsub.scss.
- Find the line of code that starts with ".bsub-widget__group-label":
- Remove the code that follows after "background-color:" and replace this code with a background color you would like to apply.
- Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Snippets", open bsub-widget.liquid.
- Find the line that contains the text "One-time Purchase".
- 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.
- Select Save.
- Under "Assets", open bsub.scss.
- 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
} - Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Snippets", open bsub-widget.liquid.
- Find the line that contains "<span>{{- group.name -}}</span>".
- 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.
- Select Save.
- Under "Assets", open bsub.scss.
- 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
} - Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Snippets", open bsub-widget.liquid.
- Find the line that contains the text "Delivery Frequency".
- 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.
- Select Save.
- Under "Assets", open bsub.scss.
- At the very bottom of the file, copy and paste the following code, along with your CSS changes:
.delivery-frequency {
Enter CSS code here
} - Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Assets", open bsub.scss.
- 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
} - Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Snippets", open bsub-widget.liquid.
- Find the line that contains the text "{{- plan.name -}}".
- 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.
- Select Save.
- Under "Assets", open bsub.scss.
- 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
} - Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Snippets", open bsub-widget.liquid.
- Find the line that contains the text "data-bsub-per-delivery-price".
- 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.
- Select Save.
- Under "Assets", open bsub.scss.
- At the very bottom of the file, copy and paste the following code, along with your CSS changes:
.delivery-price {
Enter CSS code here
} - Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Snippets", open bsub-widget.liquid.
- Find the line that contains the text " / ".
- Replace this line with the following code:
<span class="bsub-divide-line"> / </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.
- Select Save.
- Under "Assets", open bsub.scss.
- 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
} - Select Save.
- From your Shopify admin, select Online Store, then Actions > Edit code next to the theme that Bold Subscriptions is installed on.
- Under "Snippets", open bsub-widget.liquid.
- Find the line that contains the text "data-bsub-delivery-frequency".
- 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.
- Select Save.
- Under "Assets", open bsub.scss.
- 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
} - Select Save.
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:
- From the Shopify admin, select Online Store.
- Select Actions > Edit Codes next to the theme you'd like to customize.
- Under "Snippets", open bsub-widget.liquid.
- Find the line that contains the text for "Purchase Options":
- If you're looking to adjust the language, remove this variable.
- Add a new tag around line 16:
type code here - Select Save.