BigCommerce Theme Customization: Fix 'No Results' Text in Stencil Themes

As e-commerce platforms evolve, so does the complexity and sophistication of their themes. BigCommerce, with its powerful Stencil framework, offers unparalleled flexibility, but this can sometimes lead to unique challenges when it comes to seemingly simple tasks like editing storefront text. At Big Migration, we frequently guide merchants through these nuances, ensuring their stores not only perform optimally but also present a polished, professional image.

One common scenario that often puzzles store owners and even seasoned developers is locating and modifying dynamic text strings that aren't immediately visible in standard theme language files. This guide, inspired by a real-world BigCommerce forum thread, delves into how to tackle such an issue: specifically, correcting grammatical errors or customizing "no results" messages on search pages within modern Stencil themes like Foundry and Moody.

Global search in VS Code for BigCommerce theme files to locate dynamic text.

The Challenge: Grammatical Errors in Search Results

Imagine a customer searches for a product on your BigCommerce store, and for some reason, no matching items are found. The message they see is crucial for their user experience. A BigCommerce merchant, Simon Lawther, encountered a frustrating situation where their Foundry/Moody theme displayed a grammatically incorrect "no results" message: "We're sorry, there don't seem to be any results that meet your criteria."

Simon's initial attempts to locate and modify this string in the expected Templates Pages Search area proved fruitless, highlighting a common pain point: when a text string isn't where you expect it, the customization process can quickly become a time-consuming scavenger hunt.

Initial Approaches and Common Misconceptions

The first instinct for many, including experienced community members, is to check the theme's language (translation) files. For BigCommerce Stencil themes, this typically means navigating to Storefront > My Themes > Customize > Edit Theme Files and opening lang/en.json (or your store's primary language file). The expectation is to find a key-value pair like:

"search": { "no_results": "We could not find any results matching your criteria." }

This is indeed the standard and recommended method for modifying most static text strings. However, Simon confirmed that the problematic string was not present in the en.json file, indicating that the message was being rendered from a different source within the theme's architecture.

Uncovering the Dynamic Nature of Stencil Themes

The key to understanding why the message wasn't in lang/en.json lies in the dynamic capabilities of modern BigCommerce Stencil themes. Unlike older Blueprint themes or simpler static sites, Stencil themes often utilize JavaScript to render components and content on the fly, especially for interactive elements like search results, product filters, or dynamic content blocks.

When content is rendered dynamically, the text strings might be hardcoded directly within:

Component Templates: Such as templates/components/search/ or templates/components/common/.
JavaScript Files: Often found within the assets/js/ folder, where scripts build and inject HTML content into the page.

In Simon's case, a screenshot of the issue clearly showed the text nested within a

on the template-search page. This strongly suggested that the message was either hardcoded in a specific component template or, more likely for dynamic search results, embedded within a JavaScript file responsible for rendering the search interface.

The Definitive Solution: Global Search with a Code Editor

When the standard language files don't yield results, the most robust and efficient method for locating elusive text strings in BigCommerce Stencil themes is to perform a global search across all theme files using a dedicated code editor. This approach allows you to scan not just HTML templates but also JavaScript, CSS, and other files that might contain the string.

Step-by-Step Guide:

Download Your Theme Files:
Navigate to Storefront > My Themes. On your active theme, click the "..." button and select "Download Theme." This will download a ZIP archive of your entire theme.
Open the Folder in a Code Editor:
Unzip the downloaded theme file. Open the extracted folder in a powerful code editor like Visual Studio Code (VS Code), Sublime Text, or Notepad++. These editors offer advanced search functionalities crucial for this task.
Perform a Global Search:
Use the global search function within your chosen editor. This is typically activated by Ctrl+Shift+F on Windows/Linux or Cmd+Shift+F on Mac. In the search bar, enter a unique partial phrase from the problematic message. For Simon's case, phrases like "don't seem to be any results" or "meet your criteria" would be ideal.

This global search will scan every file within your theme folder, including HTML templates (.html), JavaScript files (.js), and even configuration files.
Identify and Edit the String:
The search results will pinpoint the exact file and line number where the string is located. Common locations include:
- templates/pages/search.html
- Files within the assets/js/ folder (look for search-related JS files).
- Files within templates/components/search/.
Once found, carefully edit the string to correct the grammar or customize the message to your preference. For Simon, changing "don't seem" to "doesn't seem" or rewriting the entire phrase to something like "We could not find any results matching your criteria. Please try a different search term." would resolve the issue.
Upload the Updated Theme:
After saving your changes, go back to your BigCommerce admin panel. Navigate to Storefront > My Themes > Advanced > Upload Theme. Upload the modified ZIP file (you might need to re-zip the folder after editing). Your changes will then be applied to your live store.

Why This Matters for Your E-commerce Store

Correcting even small grammatical errors or refining messaging on your search results page is more than just a minor fix; it's crucial for several reasons:

Professionalism & Brand Image: Flawless grammar and clear messaging convey professionalism and build trust with your customers. Inconsistent or incorrect language can detract from your brand's credibility.
User Experience (UX): A clear, helpful "no results" message guides users on what to do next (e.g., try different keywords, browse categories) rather than leaving them at a dead end. This improves navigation and reduces bounce rates.
Conversion Rates: A positive and intuitive user experience directly impacts conversion rates. When customers feel confident and supported, they are more likely to complete a purchase.

Simon's successful resolution of this issue underscores the value of community support and the effectiveness of systematic troubleshooting. What initially seemed like a small, frustrating detail was ultimately resolved by understanding the underlying architecture of modern BigCommerce themes.

Beyond the Fix: Proactive Theme Management with Big Migration

At Big Migration, we understand that managing and customizing a BigCommerce store can involve intricate details. Whether you're migrating from another platform, optimizing your current BigCommerce setup, or tackling complex theme customizations, our team of experts is here to help.

Our services ensure that your BigCommerce store is not only technically sound but also perfectly aligned with your brand and business objectives. We specialize in:

Seamless BigCommerce migrations.
Advanced theme development and customization.
Performance optimization.
Ongoing support and maintenance.

Don't let minor technical hurdles impact your customer experience. Partner with Big Migration to unlock the full potential of your BigCommerce store.

Mastering BigCommerce Theme Customization: Fixing Dynamic Text in Stencil Themes