Customization & Styling in Bold Checkout

Overview

With the General Settings in Bold Checkout, you are able to customize the appearance of the checkout page, such as changing button colours, adding in a custom hostname URL to the checkout and offering an email marketing through a newsletter checkbox. This allows you to add a personal touch to the Bold Checkout, ensuring that the checkout matches your stores style and theme.

This article will go through all the adjustable settings to ensure that you can easily customize Bold Checkout exactly how you would like.

While in the Bold Checkout app, navigate to Settings > General Settings. 


 

Add a Logo

Bold Checkout allows you to add your store's logo to the checkout to keep your brand consistent throughout the checkout process.

By default, if a logo is not uploaded into the Bold Checkout admin, the store name will be displayed at the top of the Bold checkout page. 

For steps on adding a logo, please follow these steps: 

  1. From within Bold Checkout, select Settings, then General Settings.
  2. Scroll down to the Logo section, and select Upload File under Header.
  3. Select a file that contains your store's logo.

    Note: You can upload a still image file (.jpeg, .png, .bmp, .svg) or a GIF as your logo. Your logo cannot be larger than 600x200px and/or 2MB.

  4. Select Save.

 


 

Add a Favicon

Favicons are the icons that display within a browser tab to indicate which page you're currently viewing. Bold Checkout provides you with the ability to upload your own favicon to use in the checkout:

 

Favicon Examples

To add a favicon to Checkout checkout, please follow these steps:

  1. From within Bold Checkout, select Settings, then General Settings.
  2. Scroll down to the Logo section, and select Upload File under Favicon.
  3. Select a file that contains the Favicon.

    Note: Your favicon image must be a .PNG file, no larger than 512KB and can be up to 256x256 pixels. The favicon will be resized to the correct size (generally 16x16).

  4. Select Save.

 


 

Customize Checkout Display Colors

Bold Checkout has its own custom CSS section that allows you to adjust the display of the app's checkout. From here, you can make changes to button color, text color, hover colors, background colors, and so much more.

The CSS input field can be found in Bold Checkout, through the following steps below:

  1. From within Bold Checkout, select Settings, then General Settings.
  2. Navigate to "Appearance". The "Custom CSS" area allows you to insert CSS styling that will change the look and feel of the app.

We've put together a guide to help you with changing common sections in the app; Accents, Hovers, Backgrounds, and Errors. 

For more information, please visit our article on CSS styling to Customize your Bold Checkout Display Colors.


 

Adjust Verbiage within the Language Settings

Within the Language section of Bold Checkout, you will be able to customize the text that displays for every section within your checkout.  This includes making adjustments to sections such as the confirmation page, error messages, the summary page, and much more.

This will allow you to make your store more personable or more aligned with your branding.

To edit text and verbiage using the Language Settings, please follow these steps:

  1. From within the Bold Checkout admin, select Settings, then Language Settings.
  2. Select Edit next to the language that you are looking to update.
  3. Search for the specific field/s.
  4. Adjust the language verbiage as required.
  5. Select Save. 

Each section has a "key" column which will give you a short description of each section you are able to edit. If you would ever like to reset this back to the default of the app, you can navigate back to this section and select reset on a specific field.


 

Customize Checkout Process

Bold Checkout offers many different options for how its checkout process looks and feels. Some look and feels include requesting the company name of the customer in the app, phone number, allowing delayed payment capture, enabling email marketing, etc. 

For steps on adjusting the checkout process for Bold Checkout, please follow these steps:

  1. From within Bold Checkout, select Settings, then General Settings.
  2. Under "Checkout Process", change the desired settings: 

For more information, please visit our article Customizing the Bold Checkout Process.

 



Custom Checkout Hostname Settings

By default, the Bold checkout URL will display "checkout.boldcommerce.com/checkout/...". If you do not want to have customers see checkout.boldcommerce.com in the URL and would rather show your store's URL, you can add a custom hostname URL in Bold Checkout to change the URL to match your store's URL. 

Adding a custom hostname URL can only be done by adding a CNAME domain type into Bold Checkout, as only CNAME domain types can be used at this time. 

For steps on adding a custom hostname into Bold Checkout, please follow these steps:  


Step 1: Change the Checkout Settings

To add a custom checkout hostname to Bold Checkout, we'll first need to make changes to its admin.

Before a hostname is created in a domain name provider, you will need to enable the "Custom Hostname" option in Bold Checkout. This setting can be enabled in Bold Checkout under Settings, General Settings, Custom Checkout Hostname Settings. By toggling the setting beside "Custom Hostname", this will enable the custom hostname for Bold Checkout. 

After enabling the toggle beside "Custom Hostname", take note of the address provided by the app. The address should begin with "custom-hostname-01/02" or something similar: 

custom-hostname URL Example

 

Step 2: Change Your DNS Settings

After the Custom Hostname has been enabled in Bold Checkout, you will need to hostname DNS settings to match the requirements for Bold Checkout. 

For steps on what settings need to be changed, please follow the following steps below. The steps below are specifically for GoDaddy. Other domain name providers may have different navigations. 

  1. Go to the "Settings" area of your domain name provider.
  2. Navigate to the "DNS Management" section.
  3. Select Create New DNS Record.

    Note: Double check that the DNS record you're creating is a "CNAME".

  4. The "Host" area will use your subdomain name. For example, if you are using checkout.domain.com, make the host "checkout".

    Note: Your custom hostname needs to be a CNAME/subdomain (checkout.domain.com, checkout.subdomain.com, etc.).

  5. Enter the address that was provided to you by Bold Checkout in the "Points To" section ("custom-hostname-01/02" or something similar).
  6. Leave the "TTL" area at the default setting.
  7. Save the DNS record.

 

Step 3: Save your Custom Hostname in Bold Checkout

After the DNS settings have been updated for your hostname, you can now add the hostname into Bold Checkout. 

For steps on adding the hostname into Bold Checkout, please follow these steps: 

  1. From within Bold Checkout, select Settings, then General Settings.
  2. Navigate to the "Custom Checkout Hostname Settings" section.
  3. Paste your custom hostname in the "Custom Checkout Hostname" field.
  4. Select Save Hostname Settings.

    Note: You cannot change your custom hostname settings once they are saved.

  5. Checkout will then notify you whether or not this was successful.

    Note: This can take up to 48 hours before the change is reflected on your storefront.

If you are not able to add a custom hostname URL into Bold Checkout, you can also change the URL alias in Bold Checkout. Changing the URL alias in Bold Checkout will still show "checkout.boldcommerce.com" in the URL, however, you can add your store's name to the end of the checkout URL. 

For steps on adding an alias at the end of the Bold Checkout URL, please follow these steps: 

  1. From within Bold Checkout, select Settings, then General Settings.
  2. Scroll down to "Custom Checkout Hostname Settings" and under "Default URL Address:", enter the alias you would like to amend to the end of Bold checkout URL. 
  3. Select Save URL Alias.

 


 

Display Cart Summary on Mobile

By default, Bold Checkout will collapse the cart summary on mobile devices. The cart summary includes the products that are added into the order by the customer and the total price of the cart with discounts and shipping included.

The cart summary can be seen by customers by selecting the dropdown arrow next to Summary while viewing Bold Checkout on a mobile device.

If you would like to display the cart summary by default, please follow these steps: 

  1. From within Bold Checkout, select Settings, then General Settings.
  2. Copy and paste this code into the Custom CSS field.
    @media only screen and (max-width: 999px) {
    .Summary .SummaryMain {
    max-height: 100%;
    overflow: visible;
    display:block;
    }
    .Summary  .SummaryHeader__Overview {
       opacity: 0;
    }
    .Summary--alt .SummaryHeader__Title::before{
    transform:none !important;
    }
    .Summary--alt .SummaryMain {
    display:none;
    }
    .Summary--alt .SummaryHeader__Overview {
       opacity: 1;
    }
    .Summary .SummaryHeader__Title::before {
    transform: rotate(90deg);
    }
    }

    Custom CSS Input Box

  3. Select Save.

 

 


 

Display Discount Code Box on Mobile

The discount code box in Bold Checkout is in the order summary section. On mobile, this is collapsed by default.

Customers can view and still enter a discount code by selecting the dropdown arrow next to Summary while viewing Bold Checkout on a mobile device, however, this may come across as an inconvenience.

If you would like to display the discount code box without expanding the Summary box on the mobile view, please follow these steps: 

  1. From within Bold Checkout, select Settings, then General Settings.
  2. Copy and paste the code for Display Discount Code Box on Mobile into the Custom CSS field.

    Custom CSS Input Box

  3. Select Save.

After the CSS code has been added into the "Custom CSS" box in Bold Checkout, the mobile view will display the discount code box outside of the Summary section, similar to the following example below:

Discount Code Box Example

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