Customization & Styling in Bold Checkout

Favicons display within a browser tab:

To add a favicon to your checkout, please follow the steps below.

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

The appearance section of Bold Checkout's general settings allows you to further customize the checkout experience for your customers. From here, you can select between a traditional three-page checkout, or a more condensed one-page checkout experience.

You can also add custom CSS code here.

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.

There are a number of options inside of the Checkout Process settings which allow you to customize how your checkout looks, as well as how people can interact with it.

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

Customer Account

Under Customer Account, the following setting can be enabled:

• 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. 

Order Status

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

• 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:

• 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

You can 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 the 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 commercetools admin. This setting can be useful if you do not want to charge your customers immediately after the order's been processed.

If you don't ship the order out on the same day it processed, you can enable Delayed Payment Capture to charge the customer on the same day that you do ship the order by. You will then need to change the status of the order from unfulfilled, to fulfilled, from within the commercetools admin.

Note: Authorizations can only be held for a short period of time, which varies depending on your payment gateway. Once the authorization's expired, we will not be able to capture payments. Please reach out to your payment gateway's support team for more information.

Email Settings

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

• 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

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

• 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:

• 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.

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

This integration helps with speeding up the data entry for your customers while also reducing errors.

For more information on setting up an Address Autocomplete Integration, please visit Integration Hub.

By default, the Bold checkout URL will be displayed as cashier.boldcommerce.com/checkout.. on your store. From within the settings, however, you're 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, which is the bolded text of the URL seen below:

• https://cashier.boldcommerce.com/checkout/your-store

This area can be adjusted by following the steps below.

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 into Bold Checkout.

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

For steps on adding a custom hostname into Bold Checkout, please follow the steps below.

Step 1: Change the Checkout Settings

To add a custom hostname in 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: 

Step 2: Change your DNS Settings

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

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. 

1. From within the Bold Checkout admin, 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 change the URL alias instead. Changing the URL alias in Bold Checkout will still show checkout.boldcommerce.com in the URL, but you can add your own store's name to the end of the checkout URL. 

To add an alias to the end of the Bold Checkout URL, please follow the steps below.

1. From within the Bold Checkout admin, 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.

By default, Bold Checkout will collapse the cart summary on mobile devices, which includes products that are added to the order by the customer, as well as 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 the cart summary to display by default, please follow the steps below.

1. From within the Bold Checkout admin, 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.

The discount code box in Bold Checkout is located within the Order Summary section. On mobile, this is collapsed by default.

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

If you would like to display the discount code box without expanding the Summary box on mobile, please follow the steps below.

1. From within the Bold Checkout admin, 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.

After the CSS code has been added into the Custom CSS box within Bold Checkout's admin, the mobile view will display the discount code box outside of the Summary section.