How To Edit One Page Checkout in BigCommerce

By

How To Edit One Page Checkout in BigCommerce

BigCommerce’s introduction of the one page checkout makes it faster and easier for your customers to complete their transaction without having time to rethink their purchase decision. In the effort to have the checkout process be as low friction as possible, the one page checkout option has enabled BigCommerce store owners to reduce the number of steps a site visitor has to take to buy.

Editing the one page checkout is easy too. Here are the steps you’ll need to follow to make changes to the page:

  1. Go to Advanced Settings
  2. Select Checkout
  3. Click Checkout Page
advanced-settings-screen2

From there you’ll be able to edit all of the following to customize the checkout experience and match the branding to your store:

BigCommerce Checkout Customizations

bigc-1page-checkout-01
  • Header

    Upload an image, select a background color, text color and border color for the header

  • Logo

    Choose from text or image version of your logo and select position on the page 

  • Discount banner

    Add a background color, text color, icon color for the discount banner

  • Order summary box

    Select a background color and border color for the order summary section

  • Checkout steps icon

    Select the background color, text color and border color for the checkout step icons

  • Heading 1 & 2

    Choose the font family and text color you want to use for the headings

  • Body text and colors

    Choose the font family and colors for the body section

  • Secondary text

    Choose the font family and text color for any secondary text you have on the page

  • Link

    Choose the font family, text color, and hover text color for links

  • Primary & Secondary CTA buttons

    Select the font family, 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 and border disabled cover for the CTA buttons

  • Form input fields

    Choose label text color, field text color, field placeholder text color, field error text color, field background color, field inner shadow color, field border color and checkbox button background color for form fields

  • Form checklist

    If using the form checklist feature, select background color, header text color and border color

Additional Checkout Settings

Once you have the checkout customizations complete, you’ll need to configure your check out settings. In this section, you’ll be able to decide whether or not you want site visitors to be able to checkout as a guest, if customers can leave a comment with their order, set multiple shipping address rules, select the default shipping option, and even give customers the ability to access their saved cart from a different device. You’ll also be able to enable Google address autocomplete and Google reCAPTCHA in this section of the admin.

Custom Coded Modifications

While the BigCommerce admin offers a lot of ways store owners can edit the one page checkout, there may be additional modifications you need to make to the checkout to make it work for your business. A BigCommerce developer can make changes to the code for the one page checkout by editing the optimized checkout SCSS file.

Here are a few examples of modifications we’ve done to the BigCommerce one page checkout:

  1. Add custom fields to the checkout to collect additional information from the customer
  2. Add custom field validation with custom error messaging to ensure the customer data you’re asking for matches the requirements.
  3. Add customized in-checkout notifications to provide customers with additional guidance, warnings and other feedback for certain cart criteria (such as when a product has restrictions)
  4. Optimize the UX/UI with all sorts of enhancements to the checkout display and interactivity, beyond what can be accomplished within the admin.

Reach out to us if you have questions about your checkout or have ideas you’d like to explore. Our team of certified BigDevs are here to help you bring those ideas to life. Reach out anytime to explore how we can tailor your checkout to best fit your business.