Follow

Advanced Checkout Customization

Bolt understands that maintaining brand image and voice throughout the checkout experience is of utmost importance. To satisfy that goal Bolt provides a suite of customization options for the Bolt Checkout experience, giving you more control over how you engage with your shoppers. Customize the Bolt Checkout to better reflect your brand and seamlessly integrate it into your website experience.

Customize the following:

Group_18.png

Example of a Custom Checkout

Theme Colors

Customize the primary and highlight colors in the Bolt Checkout. The following components reflect the current color template:

  • Primary Color RGBA(red, green, blue, alpha) - The primary color used throughout the Bolt Checkout experience. The primary color controls the following colors unless otherwise overridden in one of the variables below:
    • Focused Field Border and Label Color
    • Unselected/Selected Radio Button Color
    • Button Color
    • Button Box Shadow Color
    • Bolt Mini Cart Button Border Color on Focus<
    • Bolt Mini Cart Carrot Color
    • Unselected/Selected Checkbox Color
    • Link Color

Group_26.png

  • Highlight Color (RGBA) - This is the color used to highlight certain objects. Usually it is a lighter shade of Primary Color. This can be overridden by one of the variables below but by default controls:
    • Selected Radio Button Background Color
      image-1_1.png
    • Banner Background Color
      image-1_2.png

Group_19__1_.png

Fields

Update the color, shape, and style for field elements in the checkout experience. Beyond updating the primary and highlight colors, you can also customize:

  • Border Radius — The border corner radius for fields (e.g. 3px).
  • Focused Field — The currently selected field.
    • Focused Border Color (RGBA) — Border color when the field is focused.
    • Focused Label Color (RGBA) — Label text color for a focused field.
    • Focused Background Color (RBGA) — The background color for a field when it is focused.
  • Unfocused Field — All unselected fields.
  • Unfocused Border Color (RGBA) — Border color when the field is unfocused/unselected.
  • Unfocused Background Color (RBGA) — The background color for a field when it is unfocused/unselected.

Customizable Fields and Copy

Field

Current text (max. # char.)

Order notes

The placeholder text (60) and label (30) for the optional order notes field.

Promo link

Discount (20)

Field labels

Shipping details: 

  • Email (20)
  • Phone (20)
  • First name (20)
  • Last name (20)
  • Company name (40)
  • Shipping address (40)
  • Apartment, building, floor (optional) (30)

Payment details: 

  • Card number (40)
  • Expiration (20)
  • CVV (20)
  • First Name (20)
  • Last Name (20)

Line 2 link

Apartment, building, floor (30)

Shipping step button

Continue (30)

Delivery step button

Continue (30)

CVV helper text

The CVV/Security Code is the 3-digit code on the back of your card (60)

Tab names

Shipping, Delivery, Payment (12)

Mini-cart sections 

Subtotal, Total, Shipping, Tax (10)

 

 

Radio Buttons

Update the color, and style for radio button elements in the checkout experience. Beyond updating the primary and highlight colors, you can also customize:

  • Border Radius — The border radius for the container around the radio button and associated text (e.g. 3px).
  • Unselected Radio Button
    • Unselected/Hover Button Color (RGBA) — The color of the radio button when unselected (including on when a customer hovers over it).
    • Unselected Background Color (RGBA) — The color of the container around the radio button and the associated text when unselected.
    • Unselected Border Color (RGBA) — Border color of the container around the radio button and associated text when unselected.
  • Selected Radio Button
    • Selected Button Color (RGBA)  The color of the radio button when selected.
    • Selected Background Color (RGBA) — The color of the container around the radio button and the associated text when selected.
    • Selected Border Color (RGBA) — Border color of the container around the radio button and associated text when selected.
  • Hover Radio Button
    • Hover Background Color (RGBA) — The color of the container around the radio button and the associated text when hovered.
    • Hover Border Color (RGBA) — Border color of the container around the radio button and associated text when a customer hovers over it.

Buttons

Update the color, and style for button elements in the checkout experience. Beyond updating the primary and highlight colors, you can also customize:

  • Border Radius — The corner border radius for buttons (e.g. 3px).
  • Button Color (RGBA) — The color of the button.
  • Button Box Shadow (RGBA) — The color for the box shadow of the button.
  • Button Hover Color (RBGA) — The color of the button when a customer hovers over it.
  • Button Text Color (RBGA) — The color of the button text.

 

Modals(Windows)

Update the color, and style for the Bolt Checkout modal(window) in the checkout experience. Beyond updating the primary and highlight colors, you can also customize: 

  • Border Radius — The border corner radius for the container modal (e.g. 3px).
  • Modal Color (RGBA) — The background color of the modal itself (currently white).
  • Font Family — Selected from a preset list of font options that won’t affect load times.

With these style customizations, a merchant should be able to create the customized Bolt experiences such as the ones shown here.

Examples of Custom Checkouts

Default Copy

The copy(text) in the Bolt Checkout experience can be modified to align with merchant needs.  Customized copy can override any non-dynamic copy in the Bolt Checkout experience. 

The following copy is overridable (the default text is listed next to the name):

  • Order Notes Label/Placeholder Text — The placeholder text and label for the optional order notes field. No default text.
  • Promo Link — Discount
  • Field Labels/Placeholder Text — Email, Phone, First Name, Last Name, Shipping address, 'Apartment, building, floor (optional)', Card number, Expiration, CVV, First Name, Last Name (Credit Card)
  • Line 2 Link — Apartment, building, floor
  • Shipping Step Button — Continue
  • Delivery Step Button — Continue
  • ‘?’ Helper Text (CVV) —- The CVV/Security Code is the 3-digit code on the back of your card.
  • Tab Names — 1. Shipping 2. Delivery 3. Payment
  • Mini-Cart Section Labels — Subtotal, Total, Shipping, Tax

Custom Notices

Custom notices can be added to the checkout. These custom notices allow merchants to keep shoppers informed of important information.

Group_15.png     Group_16.png

Examples of Custom Notices 

For these notices you will be able to set:

  • Content — Plain text and links. Links will always open in a new tab.
  • Type — There are three types of notices: shipping, order and payment. The type determines the checkout step during which the notice will be shown.
      • The Shipping notice is intended to provide information about shipping. For example, ‘All Natural Packaging’ or ‘Expedited Handling.’ It appears during the Delivery step. 
      • The Order notice is intended to provide information about ordering. For example, ‘All orders are processed within 24 hours’ or ‘Thank you for shopping with us.’ It appears during the final step of checkout (Payment or Summary). 
      • The Payment notice is a special case. It is intended to provide information about payment. For example, ‘Secure Checkout’ or ‘Instant Pay!’
        The Payment notice location is dependent on:
        • The type of checkout being used. 
        • If there is or isn’t an Order notice present.

You may select up to three notices, but only one of each type. A customer’s experience of the notices will vary depending upon the type of checkout flow they are using. The following section outlines how the different flows will appear.

Shoppers using Guest checkout will go through the standard Bolt checkout:

  • The Shipping notice goes on the Delivery step.
  • The Order notice goes on the Payment step. If there is no Order notice, the Payment notice acts as a default notice and is shown instead.

Shoppers using a Bolt account will have a streamlined checkout:

  • The Order notice shows on the Summary step; if there is no Order notice, the Shipping notice is shown.
  • The Payment notice will show if the shopper adds a new card.

Points to consider when designing a notice:

  • Notices are fully customizable up to a limit of 150 characters, including spaces. 
  • There is a limit of one notice per step, but the same notice can be used in multiple steps.
  • Logged-in Bolt customers will go directly to the final step, Summary.
  • Notices are not dynamic or responsive to customer inputs.
  • Links are not currently supported within notices.
  • Bolt-generated notices, such as correction of a customer’s address, will automatically override custom merchant notices preventing the merchant’s notice from being displayed.

Group_22.png

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments