Customization & Styling in Bold Checkout

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 Settings > General 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.

1. From within Bold Checkout, select Settings > General 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 Settings > General Settings.
2. Under Checkout Process, change the desired settings.
3. Select Save at the bottom of Checkout Process.

Customer Account

Order Status

Company Name Information

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

Email Marketing

Shipping Options

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.

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.

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.