Reviving Legacy BigCommerce Themes: Fixing the Roots Checkout Total Price Glitch
Reviving Legacy BigCommerce Themes: Fixing the Roots Checkout Total Price Glitch
Navigating the complexities of an e-commerce platform often involves maintaining themes and ensuring a seamless user experience. A common challenge arises when a theme becomes unsupported or abandoned by its developer. This was precisely the dilemma faced by a BigCommerce merchant using the 'Roots' theme, who encountered a persistent issue where the checkout total price was incorrectly positioned on desktop.
The merchant, Tom Fischer, reached out to the BigCommerce community after learning from BigCommerce support that the Roots theme developer had retired, leaving the theme without updates. This meant that a known bug, specifically the misplacement of the checkout total on desktop, affected all users of the Roots theme without an official patch.
Initial Diagnosis and General Guidance
The community quickly rallied to offer solutions. Sajid Jameel from Codinative.com, a Certified BigCommerce Partner, provided initial expert guidance. He explained that since the Roots theme was no longer maintained, an official fix was out of the question. However, such checkout layout issues are often fixable with a small CSS override, typically stemming from flexbox or grid ordering/positioning problems.
Sajid outlined a general approach:
- Access the BigCommerce admin via Storefront → Script Manager or Advanced Settings → Checkout Content.
- Add a custom CSS snippet specifically scoped to the checkout page.
- Crucially, use browser developer tools (right-click → Inspect) to identify the exact class or ID names causing the issue. This often reveals a
position: absoluteorflex-ordervalue that needs adjustment for desktop breakpoints.
He also highlighted a common pitfall: regular Script Manager CSS might not inject into the checkout iframe on newer checkout versions. For Optimized or Custom Checkout, applying the fix via the Checkout SDK or Custom Checkout content is often more effective. Beyond immediate fixes, Sajid also wisely suggested that dealing with an abandoned theme like Roots is a strong indicator to consider migrating to a currently supported theme to avoid future compatibility issues with BigCommerce updates.
Pinpointing the Specific Roots Theme Solution
To provide a precise solution, Tanner Brodhagen from Brod Solutions, another BigCommerce Partner, requested the store's URL. Once provided (https://concretecountertopsupply.com/), Tanner quickly diagnosed the problem. He observed that the total price was indeed at the top of the checkout page, and identified the culprit:
The issue was a CSS class named .header, which had position:fixed set. This styling, likely intended for a sticky navigation on the main storefront, was inadvertently affecting the checkout layout, causing the "Customer" and "Total" sections to be displaced.
Tanner provided a concise and effective CSS fix:
This code needed to be placed in the templates/pages/checkout.html file within the theme. Tom Fischer confirmed that this solution "worked beautifully," resolving the checkout total price location issue.
Important Caveats and Best Practices
Following the successful resolution, Sajid Jameel added a vital caution. While Tanner’s fix was spot-on for the immediate problem, setting .header { position: unset; } globally could potentially affect the storefront header if the .header class is shared across both storefront and checkout templates. If the storefront also uses position:fixed for its header (e.g., for a sticky navigation bar), this fix could unintentionally un-stick it.
Therefore, it's always recommended to test such CSS changes on a duplicate or staging theme first. If the .header class is indeed checkout-specific in the Roots theme build, then Tanner's fix is a clean, isolated patch. This highlights a critical best practice in theme customization: always consider the scope and potential side effects of CSS changes, especially in legacy themes where class naming and inheritance might not be as modular as in modern Stencil themes.
This thread serves as an excellent example of community collaboration in solving specific technical challenges on BigCommerce, while also underscoring the broader implications of using unsupported themes and the value of expert migration advice.