Configure Display Settings in Bold Subscriptions

Overview

With the Display Settings in Bold Subscriptions, you are able to customize the widget on your product pages, the Manage Subscription page, the cart page, the checkout, and the Thank You page. This allows you to add a personal touch to Subscription purchases, and ensure that our app matches your stores style and theme.

This article will go through all the settings step-by-step, to ensure that you can easily customize Bold Subscriptions exactly how you would like.

While in the Bold Subscriptions app, navigate to Settings > Display Settings.

 


 

Product Page Widget

This section is a great way to customize the appearance of your storefront widget without the use of CSS. This widget will appear on your product or cart page, depending on which cart mode is currently active on your store. With these settings, you won't have to remember the hex codes for the colors you want to use!


Widget Title

The first section within these display settings are related to the Title on the Subscription widget. The wording is linked to the "Auto Replenish Product" section in the Language settings. The title appears at the top of the widget, and can be seen on the example below as "Subscribe to this product today!"

The Feature Brief description of what changes:
Widget Title Font Color This will change the color of the title for the Subscriptions widget. 
Widget Title Font Size Used to adjust the font size of the title of the widget.
Widget Title Font Style Allows you to either italicize, underline, or bold the title of the widget.
Widget Title Padding Adjusts the spacing that surrounds the title area.



Subscription title



Widget Styling

This section completely covers the styling for the widget itself, and how it is displaying on your product pages.

The Feature Brief description of what changes:
Widget Background Color Changes the background color of the widget.
Widget Border Color Changes the border color of the widget.
Widget Border Size Adjusts the thickness of the border.
Widget Width Adjusts the width of the entire widget on the product page.
Widget Font Color Changes the color of the font inside of the widget.
Add to Existing Loading Icon Changes the color of the subscription loading icon that appears on the product page before the subscription information appears. This specifically is the color that spins.
Add to Existing Loading Icon Rotating Portion Same as above, but refers to the base portion for the loading widget.

Before the subscription widget loads to your store, there may be a loading icon that appears:Loading Icon Subscription Widget



Delivery Options Highlight

The Delivery options are the highlights that appear when your customers click on the radio buttons for one-time purchase or Subscription purchase. This is the border that appears to further outline which options are selected:

The Feature Brief description of what changes:
Delivery Options Background Color This option changes the background color that appears around the selected portion of the widget. When your customer selects the radio button for a subscription in the widget, it highlights that selection with this color.
Delivery Border Width Changes the width of the border that appears around the Subscribe and One-Time purchase radio buttons
Delivery Border Color Changes the color of the border that appears and surround the selected option in the Subscription widget (one-time or subscription).
Add to Existing Success Check Mark Changes the color of the check mark that appears when a customer adds a subscription product into their existing subscription.
Delivery Options Padding This option requires CSS to be applied to the targeted option.
Delivery Options Margin Alters the spacing of the selectable options on the widget. You can make them have a bigger gap between one another, or closer together.

 

Subscription Widget Highlight



Frequency

This section covers the placements and spacing of the Frequency labels:

 

The Feature Brief description of what changes:
Frequency Label Changes the placement of the frequency label within the widget.
Widget Border Color Controls the spacing between the two dropdown menus on the widget.
Content Margin Adds or reduces the spacing around the entire widget from other objects surrounding it.
Widget CSS Apply CSS stylings to the widget here.



Display Settings for More Details Hover Box:

The Hover box option is the "More Details" of your subscription. This allows you to include more information about your subscription for your customers.

The Feature Brief description of what changes:
Enable Display additional subscriptions details when customer hovers over the "See Details"
Disable Hides this feature.

 

If you have this feature enabled within your settings but are not seeing it appearing, please review our Troubleshooting Display Settings Article on tips on how to fix this.

The Feature Brief description of what changes:
Location Can adjust the placement of the box using two options: bottom and inline.
Alignment Can set the alignment of the feature on the widget with three options: Theme's default, left, or right.

 


 

Manage Subscription Page

Customizing the Manage Subscription page from your display settings will allow you to add a Header and footer to this page. This creates separate sections at the top and bottom of this page and can display your logo, information, titles, etc.

The Feature Brief description of what changes:
Text Header When this option is selected, you are able to adjust the text heading that appears at the top of the "Manage Subscriptions" page.
Image Header When this option is selected, you are able to add a URL to an image to display at the top of the "Manage Subscriptions" page. This is usually your stores logo.
Custom HTML Header When this option is selected, you are able to enter HTML to customize the top of the "Manage Subscription page" even more.
Order Management Description Provides you with a WYSIWYG editor to customize the order manage description with text, images, and HTML.
Orders Table Allows you to customize the color, styles, and sizes of the text contents within this page.
Buttons Allows you to customize the color, hover color, and padding of the buttons that your customers see on the Manage Subscription page.
Order Management Footer This provides you with a WYSIWYG editor to customize the order management footer with text, images, and HTML.
Custom CSS Customize more styling if you are familiar with CSS and know how to use your browser's inspect too.

 


 

Shopify Cart Page

With Bold Subscriptions, you are able to offer discounts to incentivize recurring purchases. The customization area for the Shopify Cart page relates specifically to how the discounted rates will appear within this area of your store.

In this area, you can choose how the color, size, and style of the text that displays in your stores cart page. Please see the discount text of $28.79, below.

Shopify Cart Page

The verbiage for this area is also able to be adjusted manually through your stores theme files. If you would like the wording in this area to be adjusted as well, we would recommend reaching out to our Merchant Success team for further information on completing this request.

 


 

Checkout Page

Within the Display settings, you are able to customize the Shopify cart page for when a subscription is added. The most popular feature to add to this area is legal text or a link to the terms and conditions page in regards to your subscription orders.

When your "Checkout Message" has been added to the display settings, this will appear right above the "Place my order" button on the subscriptions checkout page. Here is an example of how this customization would appear within this section of your Display Settings:

Checkout Page in-app Styling<

If you have a good understanding of CSS and would like to apply a customization to your subscription checkout, you can complete this by following our guide Customizing your Subscriptions Checkout with CSS.

 


 

Thank You Page:

When a customer places a recurring order on your store, they will be taken to a special "Thank You!" page. This page is able to be customized to give your customers special instructions specifically related to their subscription purchase.

It is recommended to give your customers a link to login to their order management portal through this section. This link will be your store URL with "/tools/checkout/front_end/login" at the end.

For example: Bold-Subscriptions.myshopify.com/tools/checkout/front_end/login

Was this article helpful?
0 out of 0 found this helpful