Select your platform

Customization & Styling in Bold Checkout

Laurel
Laurel
  • Updated

Bold Checkout allows you to fully customize its checkout, allowing you to offer a completely unique purchase process to your customers.

This article is relevant to Bold Checkout on BigCommerce. Please visit the articles relevant for Shopify or commercetools.

 


 

Add a Logo to Bold Checkout

Bold Checkout allows you to upload a logo to the checkout. If a logo hasn't been uploaded, your store's name will be shown instead.

The following image file types are supported:

  • .JPEG / .JPG
  • .PNG
  • .BMP
  • .SVG
  • .GIF

Images cannot be larger than 600 x 200px and/or 2MB in size.

  1. From within Bold Checkout, select SettingsGeneral Settings.
  2. Scroll down to the Logo section, and select Upload File under Header.
  3. Select the image you'd like to use as a logo.
  4. Select Save.

 


 

Add a Favicon to Bold Checkout

Favicons are the icons seen in your web browser's tabs. Bold Checkout allows you to change this for your checkout.

 Example

Favicon Outline Example

  1. From within Bold Checkout, select SettingsGeneral Settings.
  2. Scroll down to the Logo section, and select Upload File under Favicon.
  3. Select the image you'd like to use as a 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.

 


 

Three Page Checkout

A three page checkout will split the checkout experience into three sections:

  1. Customer Information
    1. To collect your customer's email address, shipping information, billing address, and marketing newsletter checkbox (if enabled).
  2. Shipping Method
    1. For customers to select their shipping method.
  3. Payment Method
    1. For customer to select their payment method.

 


 

One Page Checkout

A one page checkout will display all the three page checkout's information on one page.

 


 

  1. From within Bold Checkout, select SettingsGeneral Settings.
  2. Under Checkout Process, change the desired settings.
  3. Select Save at the bottom of Checkout Process.

 


 

Customer Account

 

Setting Description
Send your customer an invite to create an account on your store When enabled, your customers will receive an email to promote creating an account on your store.

 


 

Order Status

Setting Description
Unfulfilled

Upon creation, orders will be marked as unfulfilled.

Fulfilled

Upon creation, orders will be marked as fulfilled.

 


 

Company Name Information

Setting Description
Optional

Allows customers the option to enter a company name in the checkout.

Required

Requires customers to enter a company name in the checkout.

Hidden

Hides the company name field entirely.

 


 

Phone Number

Enabling this allows you to make the phone number field required at checkout.

 


 

Delayed Payment Capture

Delayed payment capture allows you to manually authorize your customer's payments. With delayed payment capture enabled, your customers will not be charged until the order is marked as fulfilled.

It is important to note that authorizations can only be held for a short period of time, which can vary depending on your payment gateway.

Bold cannot capture payments once the authorization has expired, so it's recommended reaching out to your payment gateway before enabling delayed payment capture.

 


 

Email Settings

Setting Description
Notification email Changes the email that receives Bold Checkout's automated notifications (IE. failed payment captures).
From email

Changes the email that's used for Bold Checkout's emails that are sent to your customers. 

Support email

Changes the email address that's displayed on the order confirmation email page sent to customers after an order's been successfully generated.

 


 

Email Marketing

 Alert

Some countries have legislations that require a merchant selling to those countries comply with their anti-spam regulations, including GDPR and CANSPAM. Please review these regulations to ensure you are complying with them.

Setting Description
Unchecked by default

The checkbox will remain unchecked, allowing customers to voluntarily signup for your newsletter. 

Checked by default

The checkbox will be checked by default.

Customers can voluntarily choose to opt out by de-selecting the checkbox.

Hidden

Hides the checkbox entirely.

 


 

Shipping Options

Setting Description
Least expensive first

Shipping options will display from least expensive, to most expensive.

Most expensive first

Shipping options will display from most expensive, to least expensive.

 


 

Address Autocomplete allows your customers to purchase faster by auto-populating their information in the checkout.

Please visit Third Party Integrations with Bold Checkout for more information.

 


 

Change URL Alias

By default, the URL that displays for your customers in the checkout is cashier.boldcommerce.com/checkout. Adjusting the alias allows you to add custom text to the end of this URL, after /checkout.

Checkout URLs that remain unedited will display randomized numbers and letters after /checkout.

 Example

cashier.boldcommerce.com/checkout/your-store

  1. From within Bold Checkout, select Settings, then General Settings.
  2. Scroll down to Custom Checkout Hostname Settings and enter an alias under Default URL Address:.
  3. Select Save URL Alias.
  4. Once completed, Place a Test Order to see your URL alias.

 


 

Change Checkout Hostname

Bold Checkout allows you to connect your own custom hostname URL. This will change the entire checkout URL to whatever you would like it to display as.

Adding a custom hostname URL can only be done by adding a CNAME domain type into Bold Checkout.

 


 

Step 1: Checkout Hostname Setup

The first step to adding a custom hostname in to Bold Checkout is to enable the feature.

From within the Bold Checkout app admin, select Settings then General Settings. From this page, scroll down to Custom Checkout Hostname Settings and enable this setting.

Take note of the address that displays after the custom hostname's been enabled.

Custom Hostmame Checkout

 

Step 2: Change your DNS Settings

After the setting's been enabled within the Bold Checkout app admin, you will need to create a DNS record for your new hostname.

The steps below are specifically for GoDaddy.

  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 record's been created, you can now add the hostname into the Bold Checkout app admin.

  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.

 


 

Bold Checkout automatically collapses the cart summary when being viewed on a mobile device.

The cart summary includes your customer's products as well as the total price of their cart, including discounts and shipping, and can be seen by clicking the dropdown arrow next to Summary while viewing the checkout on mobile devices.

  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);
    }
    }
  3. Select Save.

 


 

Bold Checkout automatically hides the discount code box when being viewed on a mobile device.

The discount code box can, by default, only be seen by clicking the dropdown arrow next to Summary while viewing the checkout on mobile devices.

  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.
  3. Select Save.
 Example

Discount Code Box Example