BigCommerce Development

BigCommerce Theme Customization: Deleting Non-Editable Sections Beyond Page Builder

BigCommerce Edit Theme Files interface showing code
BigCommerce Edit Theme Files interface showing code

Unmasking Hidden Content: Troubleshooting Persistent Sections in BigCommerce

As e-commerce migration experts at Big Migration, we frequently encounter scenarios where merchants grapple with their BigCommerce storefronts not behaving as expected. A common challenge, and one that resonates with Liz Fabie's recent query in the BigCommerce community forums, is the stubborn appearance of certain sections or components across different themes, despite being unresponsive to the intuitive drag-and-drop functionalities of the Page Builder. This phenomenon can be a source of significant frustration, especially when trying to maintain a clean, updated storefront or during a critical theme migration.

The core insight from the BigCommerce community is clear: content that isn't editable via Page Builder is almost certainly hardcoded into the theme or injected through other BigCommerce mechanisms. This isn't a flaw in Page Builder itself, but rather a distinction in how different types of content are rendered on your storefront. Understanding this distinction is the first step towards regaining full control over your BigCommerce site.

The Core Challenge: Why Page Builder Falls Short

BigCommerce's Page Builder is an incredibly powerful tool, empowering merchants to visually customize their storefronts with ease. However, it's designed to manage specific widget areas and content blocks. When content persists across themes and resists drag-and-drop editing, it signals that these elements are being rendered from alternative sources, bypassing Page Builder's control. These sources can range from direct theme file modifications to global scripts, app integrations, or even legacy code from previous customizations or migrations.

For merchants undergoing a migration, these 'ghost' sections can be particularly problematic. They often represent remnants of older systems, custom code from previous developers, or integrations that weren't fully documented or removed. Identifying and cleaning these up is crucial for a smooth transition and a future-proof BigCommerce store.

Community's Diagnostic Toolkit: Where to Look

The BigCommerce experts in the forum thread offered a comprehensive checklist for identifying the source of these persistent sections. Here's an expanded look at where to investigate:

1. Hardcoded Theme Files (Stencil Templates)

The most common culprit for non-editable content is code directly embedded within your theme's Stencil template files. Stencil themes are built with a hierarchical structure, using partials and layouts to assemble the final page. Any custom additions here will appear regardless of Page Builder settings.

  • How to check: Navigate to Storefront > Themes > Current Theme > Advanced > Edit Theme Files.
  • Key files to inspect:
    • templates/pages/home.html
      : Often contains the main structure and content for your homepage.
    • templates/layout/base.html
      : This is the foundational layout file, affecting almost every page on your site. Look for global headers, footers, or wrappers.
    • templates/components/common/footer.html
      : Specifically for content appearing in the footer area.
    • Other common partials within the templates/components/ directory.
  • What to look for: HTML structures, Stencil Handlebars helpers, or JavaScript snippets that seem out of place or directly render content without relying on Page Builder widgets.

2. Script Manager

The Script Manager is a powerful BigCommerce feature that allows you to inject JavaScript code globally across your storefront or on specific pages. This is a prime suspect for banners, pop-ups, chat widgets, trust badges, or other dynamic elements that appear consistently.

  • How to check: Go to Storefront > Script Manager.
  • What to look for: Review each script. Pay attention to their placement (head, footer), pages they're applied to, and their description. Scripts from apps or custom development are often added here.
  • Actionable Insight: To diagnose, disable one script at a time and preview your storefront. If the unwanted section disappears, you've found your source.

3. Marketing Banners

Often overlooked, BigCommerce's built-in Marketing Banners are designed to display promotional content across various pages and are not controlled by Page Builder.

  • How to check: Go to Marketing > Banners.
  • What to look for: Check for active banners that might be configured to display on your homepage or other pages where the persistent section appears.

4. Apps and Third-Party Widgets

Many BigCommerce apps and third-party integrations are designed to inject content directly into your storefront, often for functionalities like reviews, chat, pop-ups, or analytics. These injections typically bypass Page Builder.

  • How to check: Go to Apps > My Apps. Review your installed apps.
  • What to look for: Consider any app that offers storefront-facing functionality. Some apps have settings within their own dashboards to control content display.
  • Actionable Insight: Similar to Script Manager, if you suspect an app, try temporarily disabling it (if possible without disrupting your store) or checking its settings.

5. Storefront > Web Pages / Home Page Settings

Sometimes, content can be directly embedded within the rich text editor of your web pages, especially the homepage.

  • How to check: Go to Storefront > Web Pages or Storefront > Themes > Current Theme > Customize > Homepage settings.
  • What to look for: Examine the content areas for any embedded HTML or text that might be rendering the unwanted section.

6. Global Regions, Script Manager Scripts, or Custom Template Overrides

For more advanced BigCommerce setups, content might be injected via less common methods:

  • Global Regions: These are specific areas in your theme that can be customized globally, often through theme settings or custom code.
  • Custom Template Overrides: Developers can create custom template files that override default ones, introducing unique content or structures.

The Path to Resolution

Once you've identified the source, the method of removal becomes clear:

  • For Theme Files: Carefully remove the offending code from the Stencil template files. Always back up your theme before making direct edits!
  • For Script Manager: Delete or disable the problematic script.
  • For Marketing Banners: Delete or deactivate the banner.
  • For Apps/Widgets: Adjust the app's settings, uninstall it, or contact the app developer for guidance.
  • For Web Pages/Homepage: Edit the content directly in the BigCommerce admin.

If you're unsure or uncomfortable making these changes yourself, especially with theme files or complex scripts, it's always best to consult with a BigCommerce development expert. As Big Migration, we specialize in understanding complex BigCommerce architectures and can help you not only clean up your current store but also ensure your migration to a new theme or platform is seamless and free of such persistent issues.

Don't let hidden code dictate your storefront's appearance. With a systematic approach, you can regain full control and ensure your BigCommerce store reflects your brand perfectly.

Share:

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools