Customization & Styling in Bold Checkout


Overview

Within the General Settings in Bold Checkout, you are able to customize the appearance of the checkout page, add custom hostname URL's, and offer 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 outline all of the different settings within the Bold Checkout's General Settings section, as well as how they can be properly set up.

Select the option in which you are interested to learn more about:

  • Logo
  • Appearance
  • Checkout Process
  • Custom Checkout Hostname 

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


 

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 to the Bold Checkout admin, the store name will be displayed in text at the top of the Bold Checkout page.

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.

You're also able to upload a favicon, which appears in the left corner of a browser tab.

Select the text below to view instructions on adding a logo or favicon to Bold Checkout.

 

Add a Logo

Adding a logo to your checkout will replace the text with your store's name at the top of it.

 

To add a logo in Bold Checkout, please follow these steps: 

  1. From within Bold Checkout, select SettingsGeneral Settings.
  2. Scroll down to the Logo section, and select Upload File under Header.
  3. Select a file that contains your store's logo. 
  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_Outline_Example.png

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

  1. From within Bold Checkout, select SettingsGeneral 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.

 


 

Appearance

From within this area of the General Settings section, you are able to choose the design of the checkout page.

This allows you to select between a traditional three-page checkout, or a more condensed one-page checkout experience.

 

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

  1. Customer Information
    1. This page contains forms for a customer's email address, shipping information, and billing address, as well as the newsletter sign-up checkbox if you have this enabled.
  2. Shipping Method
    1. This is where customers will choose from the shipping options you've made available.
  3. Payment Method
    1. Customers will choose their method of payment and complete their purchase here.

 

A one-page checkout has all of this information laid out on one page.

Note: You're also able to add your own custom CSS here.

 


 

Checkout Process

There are a number of settings under the "Checkout Process" section which allow you to customize how your checkout looks, and how people can interact with difference aspects of it.

To adjust the checkout process, please follow these steps:

  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.

For more detailed information on the settings, please click below.

Customer Account

Under Customer Account, the following setting can be enabled: 

Settings Brief description of what changes:
Send your customer an invite to create an account on your store When this option is enabled, your customers will receive an email to promote creating an account on your store. This will help them view further information on their active subscription purchases when viewing your store.

 

Order Status

Under Order Status, one of the following two settings can be selected: 

Settings Brief description of what changes:
Unfulfilled When an order is generated from the checkout, the order will be generated as unfulfilled by default. 
Fulfilled

When an order is generated from the checkout, the order will be generated as fulfilled by default.

 

Company Name Information

Under Company Name Information, one of the following three settings can be selected: 

Settings Brief description of what changes:
Optional Allows customers to enter a company name in Bold Checkout, but is not mandatory.
Required

Changes the Company Name field to be required for customers to fill in before progressing further.

Hidden

Removes the Company Name field from Bold Checkout.

 

Phone Number

With this option, you're able to make it required for customers to enter their phone number before being able to progress further into the checkout. 

This setting can be useful if you need to call the customer at any point after an order has been generated, such as during the fulfillment process.

 

Delayed Payment Capture

You can delay payment capture for orders processed through Bold Checkout. Enabling this feature will authorize the payment, but not charge the customer until the order has been marked as fulfilled in your Shopify admin.

This setting can be useful if you do not want to charge your customers immediately after the order has been processed. If you do not ship out the order on the same day that the order has been processed, enabling this feature allows you to charge the customer on the same day that you are shipping out the order by changing the status of the order from unfulfilled to fulfilled in your Shopify admin. 

Note: Authorizations can only be held for a short period of time, which can vary depending on your payment gateway. Once the authorization has expired, we won't be able to capture payments. Reach out to your payment gateway to understand how long an authorization can be held.

 

Email Settings

Under Email Settings, there are three email settings that can be adjusted: 

Settings Brief description of what changes:
Notification email Changes the email that receives automated notifications from Bold Checkout, such as failed payment captures.
From email

Changes the email that is used for all outgoing emails that Bold Checkout sends to your customers. 

Support email

Changes the email address that is displayed on the order confirmation email page sent to customers after an order has 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.

Under Email Marketing, one of the three following settings can be selected: 

Settings Brief description of what changes:
Unchecked by default Sets the newsletter checkbox in Bold Checkout as unchecked by default, allowing customers to voluntarily signup for your newsletter. 
Checked by default

Checks the newsletter checkbox by default. This sets all customers that place an order through Bold Checkout to automatically be signed up to your newsletter. 

Customers can voluntarily choose to opt out of the newsletter by un-selecting the newsletter checkbox.

Hidden

Removes the newsletter checkbox in Bold Checkout. 

 

Shipping Options

Under Default Shipping Options, one of the two following settings can be selected: 

Settings Brief description of what changes:
Least expensive first Shipping options will be displayed from least expensive to most expensive on orders that have multiple shipping options in Bold Checkout.
Most expensive first

Shipping options will be displayed from most expensive to least expensive on orders that have multiple shipping options in Bold Checkout.

 


 

Address Autocomplete

This section of the General Settings allows you to connect an address autocomplete tool to verify and autopopulate address fields within your checkout.

This integration helps with speeding up data entry time for your customers within the checkout, and also reduces errors with inputs such as phone numbers and cities.

For more information on setting up a Address Autocomplete Integration, please review our Third Party Integrations with Bold Checkout article. 

 


 

Custom Checkout Hostname Settings

By default, the Bold checkout URL will be displayed as "cashier.boldcommerce.com/checkout.." on your store. From within the settings, you are able to make adjustments to how this appears on the checkout page of your store.

 

Change URL Alias for Checkout

Adjusting the alias will change the default URL address.

For example, the bolded area within this URL: "https://cashier.boldcommerce.com/checkout/your-store"

This area can be adjusted by following these steps:

  1. From within Bold Checkout, navigate to Settings, then General Settings.
  2. Enter a new URL Alias.
  3. Select Save URL Alias.
  4. Once completed, Place a Test Order to see your URL alias.

 

Change Checkout Hostname

If you do not want customers to see the checkout URL as "cashier.boldcommerce.com/checkout..", or would rather show your store's URL, you can add a custom hostname URL in Bold Checkout.

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 hostname to Bold Checkout, you will 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_Checkout.png

 

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