Optimized One-Page Checkout Options

If you’re thinking about switching to BigCommerce’s new optimized one-page checkout, you might be wondering how it will look. If you’re using a Stencil theme*, you have a lot of flexibility in making the new checkout complement and match your store’s branding. BigCommerce gives you a lot of optimized one-page checkout options, such as colors, fonts and buttons, so don’t miss this step when designing your Stencil theme. After all, you don’t want shoppers to be confused when they go to the all-important checkout screen! If you utilize all of the optimized one-page checkout options, you can take advantage of it’s streamlined look while keeping a consistent branding experience for your customers.

Here is a complete list of optimized one-page checkout options found in the Customize menu:

Header

  • Background color
  • Use custom background (toggle)
  • Text color
  • Border color

Logo

  • User custom logo
  • Position

Discount Banner

  • Background color
  • Text color
  • Icon color

Order Summary

  • Background color
  • Border color

Checkout steps

  • Background color
  • Text color
  • Border color

Primary headings

  • Text color
  • Font family

Secondary headings

  • Text color
  • Font family

Body

  • Background color
  • Focus color

Primary content

  • Text color
  • Font Family

Secondary content

  • Text color
  • Font family

Links

  • Text color
  • Font family
  • Hover color

Primary button

  • Text color
  • Text hover color
  • Text active color
  • Text disabled color
  • Background color
  • Background hover color
  • Background active color
  • Background disabled color
  • Border color
  • Border hover color
  • Border active color
  • Border disabled color
  • Font family

Secondary button

  • Text color
  • Text hover color
  • Text active color
  • Background color
  • Background hover color
  • Background active color
  • Border color
  • Border hover color
  • Border active color
  • Font family

Form labels

  • Text color

Form inputs

  • Text color
  • Background color
  • Shadow color
  • Placeholder color
  • Border color
  • Input control color
  • Error color

Form Checklist

  • Background color
  • Selected background color
  • Text color
  • Border color

Loading Toaster

  • Background color
  • Text color

*If you’re still using a Blueprint theme, you won’t have the optimized one-page checkout options listed above. Instead, you’ll need to customize the design using WebDav. You can find instructions here. Please note that Blueprint themes have more limited customization options for the new checkout.

Need Help with Stencil Theme Customization?

Learn About Our Services