Customizing BigCommerce Homepage: A Quick Guide to Hiding Section Titles

Customizing BigCommerce Homepage: A Quick Guide to Hiding Section Titles

Many BigCommerce merchants aim to create a unique and streamlined storefront experience. This often involves customizing default theme elements to better align with their brand aesthetic or simplify the user interface. A common request involves removing or hiding standard section titles that appear on the homepage, such as "New products" or "Featured products." This community insight explores a practical solution provided in the BigCommerce forum for achieving just that, particularly for those using the Cornerstone theme.

The Challenge: Removing Default Homepage Titles

The discussion began with a merchant, Michelle Helgeland, seeking to remove the "New products" title from her BigCommerce homepage. While her theme was customized, she was looking for a straightforward code snippet rather than a complex theme file overhaul, emphasizing a common desire for quick, effective solutions to minor visual adjustments.

Solution 1: Hiding with CSS via Footer Scripts

A quick and effective method for hiding specific elements without directly modifying theme files is to use CSS injected through the store's footer scripts. This approach is particularly useful for minor visual tweaks and prevents direct alterations to the theme's core code, which can be overwritten during theme updates.

The solution provided by Avinash Jeswal, and confirmed by Michelle as effective, involves adding a simple CSS rule to the "Footer Scripts" section of your BigCommerce store. This section can typically be found under Storefront > Footer Scripts in your BigCommerce control panel.

Here's the CSS code snippet:

This code targets the specific heading element associated with the "New products" section on the homepage, effectively setting its display property to none, thus making it invisible to visitors. This method is ideal for merchants who want a quick fix without delving into complex theme file editing.

Solution 2: Deeper Theme Customization Insights

While the CSS method is excellent for hiding elements, Solomon Lite offered a broader perspective on handling homepage section titles, which is valuable for more extensive customizations:

• Page Builder Content Blocks: For many modern BigCommerce themes, especially those extensively using the Page Builder, titles for homepage sections might be editable or toggleable directly within the Page Builder interface. This is often the simplest and most recommended first step if available for your theme and section.
• Direct Theme Template Editing: For titles not controllable via Page Builder, or for themes with significant customizations, the titles are often hardcoded within theme template files. Common files include home.html or specific section partials within your Stencil theme. Removing or changing these titles would involve commenting out or modifying the HTML/Handlebars code directly in the template file. This approach requires more technical proficiency and an understanding of Stencil theme development.

Solomon emphasized the importance of identifying the correct template file to avoid unintended layout or functionality issues, a critical consideration for any direct theme file modifications.

Key Takeaways for Your BigCommerce Store

• Start Simple: For visual hides, CSS in footer scripts is a powerful, non-invasive first step.
• Check Page Builder: Always explore your theme's Page Builder options first for easy toggles or edits.
• Understand Theme Structure: For deeper changes, familiarity with Stencil theme files (.html, Handlebars) is crucial.
• Backup Before Editing: Always back up your theme before making direct code changes to template files.

This community exchange highlights the collaborative nature of the BigCommerce ecosystem, where specific problems often receive both immediate, practical solutions and broader contextual advice, empowering merchants and developers to fine-tune their online stores.