Mastering BigCommerce Checkout Customization: A Guide to Fixing Black Backgrounds

View original discussion by Big Migration Expert on GitHub →

Mastering BigCommerce Checkout Customization: A Guide to Fixing Black Backgrounds

The checkout experience is paramount for any e-commerce store. While BigCommerce provides robust tools, merchants often seek to fine-tune every visual detail to align with their brand. One common challenge arises when default theme styles clash with desired aesthetics, particularly on critical pages like the Optimized One-Page Checkout. This community insight delves into a specific styling conundrum faced by a BigCommerce merchant and the actionable solutions provided by the community.

The Challenge: Unwanted Black Backgrounds on Checkout

Zack Schmidt, a BigCommerce store owner utilizing the Chiara-Stamped Furniture theme, encountered a persistent styling issue on his checkout screen. Specifically, the background for key sections such as "Customer," "Shipping," "Billing," and "Payment" headers, along with the field adjacent to "Total (USD)," displayed an unchangeable black background. Despite exploring various theme editor options, a solution remained elusive, prompting a call for help within the BigCommerce forum.

The core problem stemmed from BigCommerce's Optimized One-Page Checkout styles, which are not directly exposed through the standard Theme Editor settings, requiring direct CSS manipulation.

Solution Part 1: Targeting Specific Checkout Elements

The first significant breakthrough came from Sajid Jameel of Codinative.com, who identified the specific CSS selectors responsible for the problematic areas. He provided a clear, step-by-step guide to inject custom CSS directly into the theme's files:

  1. Navigate to your BigCommerce Admin Panel.
  2. Go to Storefront → My Themes.
  3. On your active theme (e.g., Chiara-Stamped Furniture), click the Advanced button and then 'Edit Theme Files' from the dropdown.
  4. In the file tree on the left, open templates → pages → checkout.html.
  5. At the top of the file, paste the following CSS snippet:

This code targets .optimizedCheckout-headingPrimary (for the Customer, Shipping, Billing, Payment headers) and .cart-priceItem--total .cart-priceItem-value (for the Total USD field), setting their backgrounds and borders to white and text color to black. This approach ensures the elements blend seamlessly with a typical light page background. Zack confirmed this snippet successfully resolved the issue for the "Total (USD)" field.

Solution Part 2: Refining Header Backgrounds

While the first solution addressed the "Total (USD)" field, Zack noted that the main section headers (Customer, Shipping, Billing, Payment) still displayed a black background. WebDesk Solution stepped in with a refined approach, offering a different CSS selector and an alternative method for injecting custom styles:

They recommended using Visual Website Optimizer (VWO), a tool supported by BigCommerce for custom CSS injection, which can be accessed via Settings → Advanced → Visual Website Optimizer. The following CSS snippet was provided:

This snippet specifically targets the .page-type-checkout .header class, setting its background to transparent, text color to black, and removing any borders. This comprehensive solution allows merchants to achieve a fully customized and branded checkout appearance, moving beyond the default theme constraints.

Key Takeaways for BigCommerce Merchants and Developers

  • Optimized One-Page Checkout Limitations: Be aware that not all styling options for the Optimized One-Page Checkout are available through the standard Theme Editor. Direct CSS injection is often required for granular control.
  • Targeted CSS Selectors: Understanding the specific CSS classes used by BigCommerce's checkout components (e.g., .optimizedCheckout-headingPrimary, .cart-priceItem--total .cart-priceItem-value, .page-type-checkout .header) is crucial for effective customization.
  • Methods of CSS Injection:
    • Direct Theme File Editing: Inserting