Fixing Checkout Total Display on BigCommerce Roots Theme: A Community-Driven CSS Solution

Resolving Checkout Total Position on the Unmaintained BigCommerce Roots Theme

The BigCommerce ecosystem thrives on innovation, but sometimes merchants encounter challenges with older, unmaintained themes. A recent forum thread highlighted a common issue with the "Roots" theme, where the checkout total price was incorrectly positioned on desktop. This scenario perfectly illustrates the value of community collaboration and expert insights in overcoming such hurdles.

The Challenge: An Orphaned Theme's Checkout Glitch

Tom Fischer, a BigCommerce merchant, initiated the discussion, explaining that the developer of the Roots theme had retired, leaving the theme without official updates. BigCommerce support confirmed that this particular checkout total display issue was widespread among Roots theme users. The problem manifested as the checkout total appearing in the wrong location on desktop, creating a poor user experience and potentially impacting conversion rates.

Initial Expert Guidance: Diagnosing and Strategic Considerations

Sajid Jameel from Codinative.com quickly offered initial guidance, emphasizing that such layout problems are typically CSS-related—often involving flexbox, grid ordering, or positioning issues. He advised using browser developer tools to inspect the checkout page, identify the problematic CSS classes or IDs, and then apply a targeted custom CSS snippet. This could be done via BigCommerce's Script Manager or, for newer checkout versions, through the Checkout SDK or Custom Checkout content to ensure the CSS injects correctly into the checkout iframe.

Crucially, Sajid also raised a strategic point: relying on an unmaintained theme is a long-term risk. He suggested that encountering such bugs is an opportune moment to consider migrating to a currently supported BigCommerce theme, thereby preventing future compatibility issues with platform updates.

Community Collaboration Leads to a Specific Solution

Tanner Brodhagen from Brod Solutions, another BigCommerce partner, stepped in to offer direct assistance. After Tom shared his store URL (concretecountertopsupply.com), Tanner was able to diagnose the precise cause of the problem: a CSS class named .header that had position:fixed set, which was inadvertently affecting the checkout layout by bumping the "Customer" and "Total" sections to the top.

Tanner provided a concise and effective CSS fix:

He instructed Tom to place this code directly within the templates/pages/checkout.html file of the theme. Tom promptly confirmed that the solution worked "beautifully," resolving the immediate display issue.

Important Caveats and Best Practices for Implementation

Following the successful fix, Sajid Jameel added a vital clarification. While Tanner's solution was correct for the specific bug, he cautioned that applying .header { position: unset; } globally might unintentionally affect the storefront header if the .header class is shared across both the storefront and checkout templates. He strongly recommended testing such changes on a duplicate or staging theme first to prevent any adverse effects, such as un-sticking a sticky navigation bar on the main site.

This highlights a critical best practice in BigCommerce theme customization: always understand the scope of your CSS changes and test thoroughly in a safe environment before deploying to live production.

Key Takeaways for BigCommerce Merchants

• Unmaintained Themes Pose Risks: Legacy themes like Roots, while functional for a time, will inevitably encounter compatibility issues with platform updates.
• CSS is Your Friend: Many front-end layout bugs can be resolved with targeted CSS overrides, often requiring browser developer tools for diagnosis.
• Community is a Resource: The BigCommerce forum and its network of partners are invaluable for troubleshooting specific issues and finding expert solutions.
• Test Thoroughly: Always test theme modifications, especially CSS changes, on a staging environment to avoid unintended consequences on your live store.
• Consider Migration: For long-term stability and access to new features, migrating from an orphaned theme to a supported one is often the most prudent course of action.

This thread serves as an excellent example of how specific technical challenges can be overcome with expert community support, while also underscoring the broader strategic importance of maintaining an up-to-date and supported e-commerce platform.