Bold Subscriptions V1's Display Settings allow you to customize many different elements of the application, such as:
- The product page subscription widget.
- The Manage Subscriptions Page.
- The cart page.
- The checkout page.
- The Thank You page.
This article outlines all of the settings so you can rest assured knowing that you can customize your subscriptions exactly how you would like.
You can access the app's Display Settings from within the app admin under Settings > Display Settings.
Alert
Please note that this article only relates to Version 1 of Bold Subscriptions. If you have Version 2 of Bold Subscriptions installed on your store, please visit Subscriptions V2 Overview.
If you are unsure of which version of Bold Subscriptions that you have currently installed, please visit Identify Your Version of Bold Subscriptions.
The Display Settings of Bold Subscriptions V1 is a great way to customize the appearance of your subscription widget without the use of CSS code.
This widget will appear on your product or cart page, depending on which cart mode you are currently using.
Note: When customers select the option to subscribe with a subscription discount, the product's price will not dynamically change to reflect the discounted cost. Instead, the discounted price will be shown next to the savings amount in the widget.
Widget Title
The Widget Title section of the Display Settings contains settings to adjust the title of the subscription widget. The subscription widget's title appears at the top of the widget.
You may change the language of this element in the app admin under Language Settings > Auto Replenish Product.
| Feature | Description |
| Widget Title Font Color | Changes the color of the title. |
| Widget Title Font Size | Changes the font size of the title. |
| Widget Title Font Style | Allows you to italicize, underline, or bold the title. |
| Widget Title Padding | Changes the spacing of the title. |
Example
Widget Styling
| Feature | Description |
| Widget Background Color | Changes the background color of the widget. |
| Widget Border Color | Changes the border color of the widget. |
| Widget Border Size | Changes the thickness of the border. |
| Widget Width | Changes the width of the widget. |
| Widget Font Color | Changes the font color of the text within the widget. |
| Add to Existing Loading Icon | Changes the color of the loading icon that appears on the page before the widget appears. |
| Add to Existing Loading Icon Rotating Portion | Changes the color of the loading icon's base portion that appears on the page before the widget appears. |
Delivery Options Highlight
The Delivery Options Highlight is the grey background that appears when customers select one of the subscription widget's radio buttons.
| Feature | Description |
| Delivery Options Background Color | Changes the background color. |
| Delivery Border Width | Changes the width of the border. |
| Delivery Border Color | Changes the color of the border. |
| Add to Existing Success Check Mark | Changes the color of the check mark that appears when customers add a product into an existing subscription. |
| Delivery Options Padding | Allows you to enter custom CSS code. |
| Delivery Options Margin | Changes the spacing of the widget options. |
Example
Frequency
Please visit Intervals & Buffer days in Bold Subscriptions for more information.
| Feature | Description |
| Frequency Label | Changes the placement of the frequency label. |
| Widget Border Color | Changes the spacing between the widget's two dropdown menus. |
| Content Margin | Changes the spacing around the entire widget. |
| Widget CSS | Allows you to enter custom CSS code. |
Display Settings for More Details Hover Box
This is the More Details part of the subscriptions widget.
| Feature | Description |
| Enable | Displays additional subscriptions details when customers hover over More Details. |
| Disable | Hides More Details. |
If you have this feature enabled but it isn't displaying, please visit Troubleshooting Display Settings Article for more information.
| Feature | Description |
| Location | Changes the placement. |
| Alignment | Changes the alignment. |
Customizing the Manage Subscriptions Page from the app's Display Settings allows you to add a Header and Footer.
This creates separate sections at the top and bottom of the Display Settings where you can adjust your logo, information, titles, etc.
| Feature | Description |
| Text Header | Changes the text header. |
| Image Header | Allows you to add an image to the header. |
| Custom HTML Header | Allows you to enter custom HTML code. |
| Order Management Description | Changes the order management description. |
| Orders Table | Changes the color, style, and size of the text. |
| Buttons | Changes the color, hover color, and padding of the buttons. |
| Order Management Footer | Changes the order management footer. |
| Custom CSS | Allows you to enter custom CSS code. |
This section of the Display Settings allows you to customize the Shopify Cart page and how your discounts appear on the Shopify cart page.
You can choose how the color, size, and style of the text appears.
Language adjustments for this element need to be done in your theme's files, however. Please contact our Customer Success team for more information.
Example
Bold Subscriptions V1's Display Settings allow you to customize the checkout page of your subscription purchase flow. You can add text, links, and more.
Text that's entered into the Checkout Message field will display right above the Place my order button.
You can also enter your own custom CSS code via URL. Please visit Customize the Subscriptions Checkout with CSS for more information.
Example
When a customer successfully purchases a subscription, they will be taken to a special Thank You page. This page can be customized to give your customers special instructions or other information.
We recommended providing your customers a link to log in to the Manage Subscriptions Page. This link will be your store URL with /tools/checkout/front_end/login at the end.
- IE. bold-subscriptions.myshopify.com/tools/checkout/front_end/login