Display Styling in Bold Cashier

Overview

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

This article will go through all the settings step-by-step, to ensure that you can easily customize Bold Cashier exactly how you would like.

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

Add a Logo

Bold Cashier 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 Cashier admin, the store name will be displayed at the top of the Bold Cashier checkout page. 

For steps on adding a logo to the Bold Cashier checkout, please follow these steps: 

  1. From within Bold Cashier, 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. 

    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

Bold Cashier provides you with the ability to upload your own favicon to use in the checkout.

Favicons are the icons that display within a browser tab to indicate which page you're currently viewing: 

Favicon Examples

To add a favicon to Cashier's checkout, please follow these steps:

  1. From within Bold Cashier, 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.

Customize Cashier's Display Colors

Bold Cashier has its own custom CSS section that allows you to adjust the display of the app's checkout.

You can make changes to button colors, text color, hover colors, background colors, and so much more! 

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

  1. From within Bold Cashier, select SettingsGeneral 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 on styling Bold Cashier, please see each section below: 

Note: This CSS blocks below use "XXXXXX" to indicate hex color coding for its examples. The app can take any type of CSS color formatting.

Accents

Accents are the colors located around currently selected entry boxes and on clickable links. Here's an example of a few accents that can be changed:

Accent Examples

To adjust the accents, paste this code into the custom CSS section and change it to your preferred color:

/* Accent Color */
.Button {
    background-color: #XXXXXX;
}
a {
   color: #XXXXXX;
}
.InputField:focus, .SelectField:focus, .CreditCardInputField:focus{
   Box-shadow: 0 0 0px 2px #XXXXXX inset !important;
}
.ToggleField__Input:checked {
    box-shadow: 0 0 0 10px #XXXXXX inset !important;
}
.ToggleField__Input--Radio:checked {
    box-shadow: 0 0 0 6px #XXXXXX inset !important;
}
.ToggleField__Input:focus {
    box-shadow: 0 0 0 2px #XXXXXX inset;
}
.AppliedDiscount__Code {
    background-color: #XXXXXX;
}

 

Hovers

Hovers are the colors that show when a user's cursor moves over a button. These buttons have hover functions:

Note: If you don’t want a hover, change the color code to the same one as the accent colors.

Hover Button Examples

To adjust the hovers, paste this code into the custom CSS section and change it to your preferred color:

/* Accent - Hover */
.Button:hover {
    background-color: #XXXXXX;
}
a:hover {
   color: #XXXXXX;
}

 

Backgrounds

Bold Cashier has two separate background areas; one behind the customer's information and another behind their order summary:

Background Colors

To adjust the background, paste this code into the custom CSS section and change it to your preferred color:

/* Customer Information Background */
.App {
    background-color: #XXXXXXX;
}

/* Summary Background Color */
.Summary::after {
Background-color: #XXXXXXX;
}

 

Errors

Error codes pop up in Bold Cashier when a field is filled out incorrectly. This is an example of one of these errors:

Error Example

To adjust the error color, paste this code into the custom CSS section and change it to your preferred color:

/* Error Color */
.Field--HasError .InputField::placeholder, .Field--HasError .SelectField::placeholder, .Field--HasError .Field__Label, .Field--HasError .Field__Message {
    color: #XXXXXX;
}
.Field--HasError .InputField, .Field--HasError .SelectField {
    box-shadow: 0 0 0 2px #FF6D6D inset;
    color: #XXXXXX;
}

 


Customize Checkout Process

Bold Cashier 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 Cashier, please follow these steps:

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


Customer Account

Under Customer Account, the following two settings can be adjusted: 

The Setting Brief description of what changes:
Require customers to be signed in before checkout Requires customers purchasing products on the storefront to log into an account on your store prior to accessing the app.
Send your customer an invite to create an account on your store Sends an account creation invitation to the customer after a successful purchase. This email will only send to the customer if they purchased an order using a guest account.

 

Order Status

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

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

When an order is generated from the Cashier 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: 

The Setting Brief description of what changes:
Optional Allows customers to enter a company name in Bold Cashier, 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 Cashier.

 

Phone Number

Under Phone Number, you can enable an option that requires 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

Under Set up delayed payment capture, you can enable an option that delays payment capture for orders processed through Bold Cashier. Enabling this feature will authorize the payment, but not charge the customer right away 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: 

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

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

Support email

Changes the email address that is displayed on the order confirmation email page that is sent to your 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: 

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

Sets the newsletter checkbox in Bold Cashier as checked by default. This sets all customers that purchase an order through Bold Cashier to automatically be signed up to your newsletter. 

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

Hidden

Removes the newsletter checkbox in Bold Cashier. 

 

Shipping Options

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

The Setting 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 Cashier.
Most expensive first

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

After making changes to any of these sections, select Save at the bottom of Checkout Process.


Custom Checkout Hostname Settings

By default, Bold Cashier's checkout URL will display "cashier.boldcommerce.com/checkout/...". If you do not want to have customers see cashier.boldcommerce.com in the URL and would rather show your store's URL, you can add a custom hostname URL in Bold Cashier 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 Cashier, as only CNAME domain types can be used at this time. 

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

 

Step 1: Change Cashier's Settings

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

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 Cashier, you will need to hostname DNS settings to match the requirements for Bold Cashier. 

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, cashier.subdomain.com, etc.).

  5. Enter the address that was provided to you by Bold Cashier 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 Cashier

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

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

  1. From within Bold Cashier, 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. Cashier 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 Cashier, you can also change the URL alias in Bold Cashier. Changing the URL alias in Bold Cashier will still show "cashier.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 Cashier URL, please follow these steps: 

  1. From within Bold Cashier, 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 Cashier's checkout URL. 
  3. Select Save URL Alias.


Display Cart Summary on Mobile

By default, Bold Cashier 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 Cashier on a mobile device.

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

  1. From within Bold cashier, 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 Cashier 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 Cashier 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 Cashier, 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 Cashier, 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