You can customize the subscription widget placement, colors, language, and more, all without the need to add code when using the app block widget.
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. If you are using a standard subscription widget, please visit Customize the Standard Subscription Widget.
This article guides you through the customizations you can make in the app block settings.
Access the style settings
To access the Subscription widget app block style settings, please follow the steps below.
- From your Shopify admin, navigate to Sales channels > Online Store > Themes.
- Next to your chosen theme, click Customize.
- From the drop-down menu at the top of the page, select the product template.
- 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.
- Make your desired changes in the settings using the instructions below.
- 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
Change the widget colors
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
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
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
Change the 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
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.