{"id":26510,"date":"2026-01-30T10:09:55","date_gmt":"2026-01-30T10:09:55","guid":{"rendered":"https:\/\/ecommerce.folio3.com\/blog\/?p=26510"},"modified":"2026-01-30T18:46:13","modified_gmt":"2026-01-30T18:46:13","slug":"bigcommerce-stencil-guide-to-theme-customization","status":"publish","type":"post","link":"https:\/\/ecommerce.folio3.com\/blog\/bigcommerce-stencil-guide-to-theme-customization\/","title":{"rendered":"BigCommerce Stencil: Mastering Custom Themes and Blueprint Migrations"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Outgrowing your current BigCommerce theme means you need more control, faster performance, and design flexibility that older frameworks can&#8217;t deliver. Whether you&#8217;re building custom storefronts or migrating from Blueprint, understanding BigCommerce Stencil is essential for creating high-performing e-commerce experiences that scale with your business.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This guide covers everything from Stencil framework fundamentals to advanced customization techniques, Blueprint migration strategies, and when to bring in a BigCommerce Stencil developer. You&#8217;ll learn practical steps to leverage Stencil&#8217;s capabilities while avoiding common pitfalls that slow down development and impact site performance.<\/span><\/p>\n<p><a href=\"https:\/\/ecommerce.folio3.com\/contact-us\/\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/ecommerce.folio3.com\/blog\/wp-content\/uploads\/2024\/12\/General2.jpg\" alt=\"\" width=\"850\" height=\"160\" \/><\/a><\/p>\n<h2><span style=\"font-weight: 400;\">Summary<\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Stencil Framework Architecture<\/b><span style=\"font-weight: 400;\">: Learn how Handlebars templating, modular components, and theme configuration work together for flexible customization<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Custom Theme Development<\/b><span style=\"font-weight: 400;\">: Understand local setup, CLI tools, and best practices for building scalable Stencil themes from scratch<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Blueprint to Stencil Migration<\/b><span style=\"font-weight: 400;\">: Follow a proven process for transitioning legacy Blueprint stores to modern Stencil architecture<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Advanced Customization<\/b><span style=\"font-weight: 400;\">: Explore custom widgets, API integration, and performance optimization techniques used by experts<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Developer Resources<\/b><span style=\"font-weight: 400;\">: Access essential tools, documentation, and when to hire specialized talent for complex projects<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">What Is BigCommerce Stencil?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">BigCommerce Stencil represents the platform&#8217;s modern theme engine, replacing the legacy Blueprint framework in 2016. This architecture gives developers and merchants greater control over storefront customization while maintaining mobile responsiveness and performance standards.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Core Framework Components<\/span><\/h3>\n<p>Stencil BigCommerce operates through three primary layers. The templating layer uses Handlebars.js for dynamic content rendering, allowing developers to separate logic from presentation. The configuration layer manages theme settings through JSON files, making it easier to create merchant-friendly customization options without touching code. The asset compilation layer handles CSS, JavaScript, and image optimization through Webpack bundling.<\/p>\n<p><span style=\"font-weight: 400;\">Unlike Blueprint&#8217;s rigid structure, Stencil themes support real-time preview, local development environments, and modular component architecture. This flexibility enables faster iteration cycles and cleaner code organization.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Why Stencil Replaced Blueprint<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Blueprint&#8217;s limitations became apparent as mobile commerce grew and merchant customization needs evolved. The older framework lacked responsive design tools, required server-side changes for preview testing, and made simple design updates unnecessarily complex.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Stencil addressed these gaps with mobile-first architecture, theme editor capabilities for non-technical users, and improved page load speeds through optimized asset delivery. The shift also aligned BigCommerce with modern JavaScript frameworks and development workflows that attract experienced developers.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Feature<\/b><\/td>\n<td><b>Stencil<\/b><\/td>\n<td><b>Blueprint<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Responsive Design<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Built-in mobile optimization<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Manual responsive coding<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Local Development<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Full CLI support<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Limited local testing<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Customization UI<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Theme Editor for merchants<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Code-only changes<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Performance<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Optimized asset bundling<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Slower load times<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span style=\"font-weight: 400;\">Setting Up Your BigCommerce Stencil Development Environment<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Building <\/span><b>BigCommerce Stencil themes<\/b><span style=\"font-weight: 400;\"> requires specific tools and environment configuration. This section walks through the complete setup process for local development.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Required Tools and System Prerequisites<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Start with Node.js version 14.x or higher installed on your system. The Stencil CLI requires npm (Node Package Manager) for dependency management and theme operations. You&#8217;ll also need a code editor like Visual Studio Code with Handlebars syntax support.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create a BigCommerce store account with API credentials. Navigate to Advanced Settings &gt; API Accounts in your store control panel, then generate store-level API credentials with OAuth scope for Themes (modify) and Content (modify). Store these credentials securely as you&#8217;ll need them for CLI authentication.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Installing Stencil CLI<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Open your terminal and run the installation command:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npm install -g @bigcommerce\/stencil-cli<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Verify installation with <\/span><span style=\"font-weight: 400;\">stencil &#8211;version<\/span><span style=\"font-weight: 400;\"> to confirm the CLI installed correctly. If you encounter permission errors on Mac or Linux, use <\/span><span style=\"font-weight: 400;\">sudo npm install -g @bigcommerce\/stencil-cli<\/span><span style=\"font-weight: 400;\"> instead.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Downloading and Configuring a Base Theme<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Choose a starter theme from BigCommerce&#8217;s repository. The Cornerstone theme serves as the most common starting point, offering a complete e-commerce template with all standard features implemented.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Clone your chosen theme using Git:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">git clone https:\/\/github.com\/bigcommerce\/cornerstone.git<\/span>\r\n\r\n<span style=\"font-weight: 400;\">cd cornerstone<\/span>\r\n\r\n<span style=\"font-weight: 400;\">npm install<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Initialize your local environment by running <\/span><span style=\"font-weight: 400;\">stencil init<\/span><span style=\"font-weight: 400;\">. The CLI will prompt for your API credentials, store URL, and port preferences. This creates a <\/span><span style=\"font-weight: 400;\">.stencil<\/span><span style=\"font-weight: 400;\"> configuration file that connects your local environment to your BigCommerce store.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Testing Your Local Environment<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Launch the local development server with <\/span><span style=\"font-weight: 400;\">stencil start<\/span><span style=\"font-weight: 400;\">. The CLI bundles theme assets and starts a local preview at <\/span><span style=\"font-weight: 400;\">http:\/\/localhost:3000<\/span><span style=\"font-weight: 400;\"> by default. Any changes you make to templates, styles, or scripts trigger automatic browser refresh.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Test basic functionality by modifying a template file and confirming changes appear in your browser. Check the console for JavaScript errors and verify that all theme features work as expected before proceeding to customization.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For developers working on<\/span><a href=\"https:\/\/ecommerce.folio3.com\/bigcommerce-migration\/shopify-to-bigcommerce-migration\/\"> <span style=\"font-weight: 400;\">Shopify to BigCommerce migration<\/span><\/a><span style=\"font-weight: 400;\"> projects, understanding both platforms&#8217; development environments helps ensure smoother transitions and better planning for theme recreation work.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Understanding Stencil Theme Architecture<\/span><\/h2>\n<p>Stencil BigCommerce<span style=\"font-weight: 400;\"> architecture follows a modular pattern that separates concerns and enables scalable development. Knowing how these pieces fit together helps you build maintainable custom themes.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Template Structure and File Organization<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Stencil themes organize files into logical directories. The <\/span><span style=\"font-weight: 400;\">templates\/<\/span><span style=\"font-weight: 400;\"> folder contains page-level Handlebars files (home.html, category.html, product.html), while <\/span><span style=\"font-weight: 400;\">templates\/components\/<\/span><span style=\"font-weight: 400;\"> holds reusable partial templates. The <\/span><span style=\"font-weight: 400;\">assets\/<\/span><span style=\"font-weight: 400;\"> directory manages all static resources including SCSS, JavaScript modules, and images.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Configuration files live in the theme root. The <\/span><span style=\"font-weight: 400;\">config.json<\/span><span style=\"font-weight: 400;\"> file defines theme settings that appear in the merchant&#8217;s theme editor. The <\/span><span style=\"font-weight: 400;\">schema.json<\/span><span style=\"font-weight: 400;\"> validates these settings and their acceptable values. The <\/span><span style=\"font-weight: 400;\">.stencil<\/span><span style=\"font-weight: 400;\"> file stores API credentials and shouldn&#8217;t be committed to version control.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Handlebars Templating System<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Handlebars provides the templating logic for Stencil themes. Basic syntax uses double curly braces for variable output: <\/span><span style=\"font-weight: 400;\">{{product.title}}<\/span><span style=\"font-weight: 400;\"> renders the product name. Block helpers like <\/span><span style=\"font-weight: 400;\">{{#if}}<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">{{#each}}<\/span><span style=\"font-weight: 400;\"> enable conditional logic and loops without complex JavaScript.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Custom helpers extend templating functionality. BigCommerce includes dozens of built-in helpers for common operations like <\/span><span style=\"font-weight: 400;\">{{lang}}<\/span><span style=\"font-weight: 400;\"> for translations, <\/span><span style=\"font-weight: 400;\">{{cdn}}<\/span><span style=\"font-weight: 400;\"> for asset URLs, and <\/span><span style=\"font-weight: 400;\">{{region}}<\/span><span style=\"font-weight: 400;\"> for content zones. You can also register custom helpers in <\/span><span style=\"font-weight: 400;\">assets\/js\/theme\/global.js<\/span><span style=\"font-weight: 400;\"> for specialized logic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Partial templates promote code reuse. The <\/span><span style=\"font-weight: 400;\">{{&gt; components\/products\/card}}<\/span><span style=\"font-weight: 400;\"> syntax includes a product card component, passing context data as needed. This approach keeps templates clean and makes updates easier when design changes affect multiple pages.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Front Matter and Page Context<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Each template file starts with front matter enclosed in triple dashes. This YAML section defines page-specific settings like page type, resource hints, and custom data queries.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">---<\/span>\r\n\r\n<span style=\"font-weight: 400;\">product:<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0videos:<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0limit: {{theme_settings.productpage_videos_count}}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0reviews:<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0limit: {{theme_settings.productpage_reviews_count}}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">---<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">The front matter controls what data loads on each page, reducing unnecessary API calls and improving performance. Strategic use of data queries ensures templates have exactly the information they need without over-fetching.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">CSS and JavaScript Asset Management<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Stencil compiles SCSS files through a Webpack pipeline. The main stylesheet at <\/span><span style=\"font-weight: 400;\">assets\/scss\/theme.scss<\/span><span style=\"font-weight: 400;\"> imports modular partials organized by function (layout, components, utilities). Variables in <\/span><span style=\"font-weight: 400;\">assets\/scss\/settings\/<\/span><span style=\"font-weight: 400;\"> control colors, typography, and spacing across the entire theme.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">JavaScript follows a similar modular pattern. The <\/span><span style=\"font-weight: 400;\">assets\/js\/theme\/<\/span><span style=\"font-weight: 400;\"> directory contains feature-specific modules that initialize on relevant pages. The bundle process tree-shakes unused code and minifies output for production, though developers must structure modules properly to enable effective optimization.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Directory<\/b><\/td>\n<td><b>Purpose<\/b><\/td>\n<td><b>Key Files<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">templates\/pages\/<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Page-level templates<\/span><\/td>\n<td><span style=\"font-weight: 400;\">home.html, product.html, category.html<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">templates\/components\/<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Reusable partials<\/span><\/td>\n<td><span style=\"font-weight: 400;\">product-card.html, header.html<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">assets\/scss\/<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Stylesheets<\/span><\/td>\n<td><span style=\"font-weight: 400;\">theme.scss, settings\/<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">assets\/js\/<\/span><\/td>\n<td><span style=\"font-weight: 400;\">JavaScript modules<\/span><\/td>\n<td><span style=\"font-weight: 400;\">global.js, page-specific modules<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span style=\"font-weight: 400;\">Building Custom BigCommerce Stencil Themes<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Creating a <a href=\"https:\/\/ecommerce.folio3.com\/blog\/customize-bigcommerce-theme\/\">custom BigCommerce Stencil theme<\/a> from scratch gives you complete control over storefront design and functionality. This section covers the development process from planning to deployment.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Planning Your Custom Theme<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Define requirements before writing code. Document must-have features, custom page layouts, and unique functionality needs. Sketch wireframes for key pages (homepage, product detail, category, cart, checkout) to visualize information hierarchy and user flows.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider performance budgets upfront. Set targets for Time to Interactive (TTI), Largest Contentful Paint (LCP), and total page weight. These constraints guide architectural decisions and prevent performance issues that are harder to fix later.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Audit existing theme features you&#8217;ll need to replicate or improve. Review product filtering, search functionality, customer account pages, and checkout integration points. Understanding these dependencies prevents missing critical e-commerce capabilities.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Creating Base Templates<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Start with the homepage template as your foundation. Build the header and footer as separate components since they appear across all pages. Implement responsive navigation that works on mobile devices and desktop screens.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Move to product and category templates next, as these drive most traffic and conversions. Focus on clear product information hierarchy, high-quality image displays, and intuitive add-to-cart functionality. Category pages need effective filtering and sorting that performs well with large catalogs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Cart and checkout templates require careful handling of form validation, shipping calculation, and payment integration. While BigCommerce manages checkout logic, your theme controls presentation and must align with backend functionality.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Implementing Custom Functionality<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Custom features often require extending Stencil&#8217;s capabilities through API integration. The Storefront API enables dynamic cart updates, wishlist functionality, and customer data access without page refreshes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Custom product options might need specialized rendering logic. Create custom Handlebars helpers or JavaScript modules that handle complex option dependencies, conditional pricing, or unique configurators beyond standard option sets.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Third-party integrations (reviews, loyalty programs, marketing tools) typically provide embed codes or API documentation. Plan integration points in your templates and ensure styling matches your design system rather than looking like tacked-on widgets.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For stores combining multiple platforms, understanding<\/span><a href=\"https:\/\/ecommerce.folio3.com\/bigcommerce-integration-services\/\"> <span style=\"font-weight: 400;\">BigCommerce integration<\/span><\/a><span style=\"font-weight: 400;\"> patterns helps you build more flexible, maintainable custom functionality that works with other systems.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Testing and Quality Assurance<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Test across devices and browsers before deployment. Use actual mobile devices for touch interaction testing, not just desktop browser emulation. Common issues include hover states that don&#8217;t work on touch screens and tap targets that are too small.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Validate against BigCommerce theme requirements. Run the theme checker utility provided in Stencil CLI to catch common errors. Verify all required templates exist and implement necessary functionality.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Performance testing should include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lighthouse audits for Core Web Vitals<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Full page load testing on 3G connections<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Asset size verification<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">JavaScript execution profiling<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Load test forms with various valid and invalid inputs. Verify error messages display clearly and form recovery works as expected.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Migrating from BigCommerce Blueprint to Stencil<\/span><\/h2>\n<p>The BigCommerce Blueprint to Stencil migration process requires methodical planning and execution. Legacy Blueprint stores need careful transition strategies to minimize downtime and preserve functionality.<\/p>\n<h3><span style=\"font-weight: 400;\">Assessing Your Blueprint Store<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Start with a comprehensive inventory of customizations. Document all custom template modifications, third-party app integrations, and unique functionality not available in standard Blueprint. Screenshot key pages and functionality to reference during rebuild.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Review your current code quality and technical debt. Migration presents an opportunity to eliminate workarounds and deprecated code patterns that accumulated over time. Identify which customizations still serve business needs versus which can be improved or eliminated.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Extract custom CSS and JavaScript that isn&#8217;t template-dependent. Well-written styles and scripts may port to Stencil with minimal changes, saving development time compared to starting from scratch.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Planning Your Migration Approach<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Choose between parallel development and staged migration. Parallel development builds the complete Stencil theme before switching, minimizing risk but requiring more upfront investment. Staged migration moves sections gradually, reducing initial costs but increasing complexity during transition.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create a detailed migration checklist organized by page type. List all templates, components, and features that need recreation in Stencil. Assign priority levels based on business impact and traffic patterns.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Schedule migration during low-traffic periods when possible. Plan for extended testing windows and have rollback procedures ready. Communicate timeline and potential issues to stakeholders before starting.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Template Conversion Process<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Blueprint and Stencil use different templating languages. Blueprint&#8217;s PHP-based WebDAV system doesn&#8217;t directly translate to Stencil&#8217;s Handlebars templates. Manual conversion requires understanding how each system accesses product data and renders content.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Start with simpler templates (contact, about pages) to build conversion expertise before tackling complex product and category templates. For each Blueprint template:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Identify data variables and their Stencil equivalents<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Convert conditional logic to Handlebars helpers<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Rebuild loops using <\/span><span style=\"font-weight: 400;\">{{#each}}<\/span><span style=\"font-weight: 400;\"> syntax<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Test data output matches Blueprint functionality<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Custom HTML widgets and content blocks need recreation in Stencil&#8217;s widget system. Export content from Blueprint, then reimport through Stencil&#8217;s Page Builder or widget framework.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Preserving SEO and URL Structure<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Maintain existing URL patterns to preserve search rankings and external links. Configure redirects for any URL changes using BigCommerce&#8217;s redirect management or external solutions if patterns changed significantly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Verify meta titles, descriptions, and structured data carry over correctly. Stencil handles these differently than Blueprint, requiring template updates to ensure proper output.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Test canonical URLs, pagination, and alternate language tags if running multilingual stores. These technical SEO elements often break during migrations and require specific attention.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Post-Migration Testing and Optimization<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Conduct thorough testing across all page types and user flows. Key areas include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Product browsing and filtering<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cart and checkout processes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Customer account functionality<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Form submissions and data capture<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Third-party integration functionality<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Compare Stencil performance against Blueprint baseline. Stencil should improve load times, but poorly optimized custom code can negate these gains. Profile JavaScript execution and optimize bottlenecks.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Monitor error logs and customer support tickets closely for the first few weeks post-migration. Users may report edge cases or functionality gaps not caught during testing.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For stores also considering other platforms, reviewing<\/span> <span style=\"font-weight: 400;\">BigCommerce alternatives<\/span><span style=\"font-weight: 400;\"> helps determine if migration to Stencil or moving to a different platform better serves long-term goals.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Migration Phase<\/b><\/td>\n<td><b>Duration<\/b><\/td>\n<td><b>Key Activities<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Assessment<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1-2 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Inventory, documentation, planning<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Development<\/span><\/td>\n<td><span style=\"font-weight: 400;\">4-8 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Template conversion, feature rebuild<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Testing<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2-3 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">QA, performance, cross-browser testing<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Launch &amp; Monitor<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2-4 weeks<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Deployment, issue resolution, optimization<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span style=\"font-weight: 400;\">Advanced Stencil Customization Techniques<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">BigCommerce Stencil expert developers leverage advanced techniques to build sophisticated storefronts that go beyond basic theme customization.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Custom Widgets and Page Builder Integration<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Stencil&#8217;s widget framework allows you to create custom Page Builder components merchants can drag and drop. Build widgets by defining a schema that specifies configuration options, then create the template that renders the widget.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Register custom widgets in your theme&#8217;s <\/span><span style=\"font-weight: 400;\">schema.json<\/span><span style=\"font-weight: 400;\"> file with widget type, label, template path, and configuration schema. Merchants then access these through the Page Builder interface alongside default widgets.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well-designed custom widgets balance flexibility with simplicity. Provide essential customization options without overwhelming users with unnecessary controls. Include preview functionality so merchants see changes before saving.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Storefront API Integration<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The Storefront API enables dynamic functionality without page reloads. Common use cases include updating cart contents, managing wishlists, and loading product data asynchronously. API calls use GraphQL syntax for precise data queries that minimize payload size.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Implement API calls through JavaScript fetch requests with proper authentication. Structure your code to handle loading states, errors, and success responses gracefully. Cache responses when appropriate to reduce server load and improve perceived performance.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Rate limiting applies to Storefront API requests. Design your implementation to batch requests where possible and implement exponential backoff for retries on failed requests.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Performance Optimization Strategies<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Lazy load images below the fold using native browser loading attributes or intersection observers. This technique dramatically improves initial page load by deferring off-screen content.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Code split JavaScript bundles to load only necessary code per page. Stencil&#8217;s Webpack configuration supports dynamic imports that create separate bundles for feature-specific modules.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Optimize custom fonts by subsetting character ranges, using font-display strategies, and preloading critical font files. Typography significantly impacts visual stability and page performance metrics.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Implement resource hints (preconnect, dns-prefetch, prefetch) for third-party domains and predictable user navigation. These browser hints reduce latency for subsequent requests.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Custom Checkout Solutions<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">While BigCommerce controls the checkout flow, you can customize presentation through their Checkout SDK. This JavaScript library provides access to checkout state and enables UI customization without rebuilding core functionality.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Build custom checkout experiences by creating a single-page application that uses the Checkout SDK for backend communication. This approach offers maximum flexibility but requires substantial development investment.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Simpler customization uses the Checkout SDK to modify default checkout appearance through custom CSS and limited script injection. This balances customization needs with development effort for most use cases.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Working with BigCommerce Stencil Developers<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Hiring a BigCommerce Stencil developer makes sense for complex projects that exceed internal capabilities. Understanding when and how to engage external expertise ensures better outcomes.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">When to Hire Specialized Talent<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Complex custom features requiring deep Stencil knowledge justify hiring specialists. Examples include custom configurators, advanced filtering systems, or sophisticated API integrations that go beyond standard e-commerce functionality.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Blueprint to Stencil migrations often benefit from experienced developers who understand both frameworks and can execute transitions efficiently. Migration specialists reduce risks and timeline compared to learning through trial and error.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Performance optimization for high-traffic stores may require expertise in Stencil&#8217;s compilation pipeline, caching strategies, and BigCommerce-specific optimization techniques that general developers might miss.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Evaluating Developer Expertise<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Look for developers with Stencil-specific portfolios demonstrating relevant project experience. Review their GitHub contributions, particularly around BigCommerce repositories or Stencil-related open source projects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Technical assessment should cover Handlebars templating, JavaScript module patterns, SCSS architecture, and familiarity with BigCommerce APIs. Ask candidates to explain how they&#8217;ve solved specific challenges in past Stencil projects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Communication skills matter as much as technical ability. Developers need to explain technical decisions to non-technical stakeholders and work collaboratively with designers, marketers, and business owners.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Managing Stencil Development Projects<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Clear requirements prevent scope creep and misaligned expectations. Document functionality specifications, design deliverables, and performance targets before development starts. Include acceptance criteria for each feature.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Establish development workflows that include version control, code review, and testing protocols. Require developers to work in feature branches and submit pull requests for review before merging changes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Schedule regular progress reviews to catch issues early. Weekly demos with working functionality help ensure development stays aligned with business needs and allows course correction if needed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For comprehensive<\/span> <a href=\"https:\/\/ecommerce.folio3.com\/bigcommerce-development-company\/\"><span style=\"font-weight: 400;\">BigCommerce development services<\/span><\/a><span style=\"font-weight: 400;\">, partnering with agencies that specialize in the platform provides access to diverse expertise and established processes that accelerate project delivery.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Essential Tools and Resources for Stencil Development<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Success with <a href=\"https:\/\/ecommerce.folio3.com\/blog\/switch-from-blueprint-to-stencil-bigcommerce\/\">BigCommerce Stencil themes<\/a> depends on leveraging the right tools and staying current with framework updates.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Official Documentation and Learning Resources<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">BigCommerce Developer Documentation serves as the primary reference for all Stencil capabilities. The documentation covers API references, theme tutorials, and best practice guides updated regularly as the platform evolves.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Stencil GitHub repositories provide example implementations and issue tracking. Review closed issues to learn how others solved similar problems, and check open issues to avoid known bugs in your implementation.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">BigCommerce Community forums connect you with other developers facing similar challenges. Search existing threads before posting new questions, and contribute solutions when you&#8217;ve solved problems others might encounter.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Development Tools and Extensions<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Visual Studio Code extensions enhance productivity with Handlebars syntax highlighting, template autocomplete, and integrated terminal access for Stencil CLI commands. Configure your editor with linting rules that match Stencil coding standards.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Browser DevTools extensions for performance profiling help identify bottlenecks in custom code. Use Network panel for asset loading analysis and Performance panel for JavaScript execution profiling.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Version control through Git enables safe experimentation and team collaboration. Maintain separate branches for features, establish clear commit message conventions, and use pull requests for code review.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Testing and Debugging Tools<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Stencil CLI includes debugging capabilities through verbose logging flags. Run <\/span><span style=\"font-weight: 400;\">stencil start &#8211;verbose<\/span><span style=\"font-weight: 400;\"> to see detailed output about template compilation, asset bundling, and API requests.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Browser-based debugging tools reveal JavaScript errors and template rendering issues. Use breakpoints in DevTools to step through custom script execution and inspect variable state.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Automated testing frameworks like Jest enable unit testing for custom JavaScript modules. While template testing remains challenging, covering business logic with tests prevents regressions as code evolves.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Common Challenges and Solutions in Stencil Development<\/span><\/h2>\n<p>Even experienced developers encounter obstacles when building with Stencil BigCommerce. Recognizing common issues accelerates problem-solving.<\/p>\n<h3><span style=\"font-weight: 400;\">Template Compilation Errors<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Malformed Handlebars syntax causes compilation failures that prevent theme preview. Check for unclosed tags, mismatched helpers, and incorrect variable references. The Stencil CLI error messages usually point to the problematic template and line number.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Context mismatches occur when templates reference data not available on that page. Review front matter configuration to ensure necessary data queries execute, or adjust template logic to handle missing data gracefully.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Custom helper registration failures prevent templates from accessing needed functionality. Verify helper functions register correctly in global.js and that helper names don&#8217;t conflict with built-in helpers.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Performance Bottlenecks<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Excessive API calls slow page loads and may trigger rate limiting. Combine related queries in front matter rather than making separate requests per component. Cache responses in JavaScript when data doesn&#8217;t change frequently.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Large JavaScript bundles increase parse and execution time. Code split by route and lazy load non-critical features. Remove unused dependencies that add weight without providing value.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Unoptimized images represent the most common performance issue. Implement responsive images with appropriate sizing, use next-gen formats where browser support allows, and compress all image assets.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Cross-Browser Compatibility Issues<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS grid and flexbox implementations vary slightly across browsers. Test layouts in target browsers and use appropriate fallbacks for older browser versions your audience uses.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">JavaScript API differences require polyfills for newer features. Include necessary polyfills only for browsers in your target support matrix to avoid unnecessary code weight.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Font rendering inconsistencies affect visual appearance across operating systems. Set appropriate font-display values and test typography on both Mac and Windows systems.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Debugging Theme Customization Issues<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The theme editor sometimes caches old values, making testing difficult. Clear browser cache and hard refresh after saving theme settings. If issues persist, verify schema.json defines settings correctly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Custom CSS specificity conflicts cause styling issues where theme editor changes don&#8217;t apply as expected. Use browser DevTools to inspect element styles and identify which rules take precedence.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Merchant-added scripts through Script Manager may conflict with theme functionality. Disable third-party scripts temporarily to isolate whether issues stem from theme code or external scripts.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Key Takeaways<\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">BigCommerce Stencil provides modern architecture for building flexible, performant e-commerce storefronts with responsive design and developer-friendly tools<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Successful theme development requires understanding Handlebars templating, modular component structure, and strategic API integration for dynamic functionality<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Blueprint to Stencil migration demands methodical planning, careful template conversion, and comprehensive testing to preserve functionality and SEO value<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Advanced techniques like custom widgets, Storefront API usage, and performance optimization separate basic implementations from expert-level Stencil development<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Knowing when to hire specialized developers and which tools to leverage accelerates project delivery and improves outcome quality<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Conclusion<\/span><\/h2>\n<p>Mastering BigCommerce Stencil unlocks powerful customization capabilities that directly impact user experience, conversion rates, and long-term platform scalability. Whether you&#8217;re building themes from scratch, migrating from Blueprint, or extending existing functionality, understanding Stencil&#8217;s architecture and best practices ensures your development efforts deliver measurable business results.<\/p>\n<p><span style=\"font-weight: 400;\">The investment in Stencil expertise pays dividends through faster development cycles, better performance, and more maintainable code that evolves with your business needs. Ready to take your BigCommerce store to the next level with custom Stencil development?<\/span><a href=\"https:\/\/ecommerce.folio3.com\/contact-us\/\"> <span style=\"font-weight: 400;\">Contact our BigCommerce experts<\/span><\/a><span style=\"font-weight: 400;\"> to discuss your project requirements and explore how strategic theme development drives e-commerce success.<\/span><\/p>\n<p><a href=\"https:\/\/ecommerce.folio3.com\/contact-us\/\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/ecommerce.folio3.com\/blog\/wp-content\/uploads\/2024\/03\/platform-cost.jpg\" alt=\"\" width=\"850\" height=\"160\" \/><\/a><\/p>\n<h2><span style=\"font-weight: 400;\">Frequently Asked Questions<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">What Is the Difference Between BigCommerce Stencil and Blueprint?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Stencil is BigCommerce&#8217;s modern theme framework launched in 2016, featuring Handlebars templating, responsive design tools, and local development support. Blueprint is the legacy framework with PHP-based templates, limited mobile optimization, and no local testing capabilities. Stencil offers significantly better performance, easier customization, and merchant-friendly theme editing compared to Blueprint&#8217;s rigid structure.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">How Long Does a BigCommerce Blueprint to Stencil Migration Take?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Most Blueprint to Stencil migrations require 6 to 12 weeks depending on customization complexity and store size. Simple migrations with minimal custom features may complete in 4 weeks, while heavily customized stores with extensive third-party integrations can take 16 weeks or longer. Timeline includes assessment, development, testing, and post-launch optimization phases.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Can I Customize BigCommerce Stencil Themes Without Coding Experience?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">BigCommerce provides a Theme Editor that allows non-technical users to modify colors, fonts, layout options, and content without writing code. However, structural changes, custom features, and advanced design modifications require Handlebars, CSS, and JavaScript knowledge. Most merchants use the Theme Editor for basic adjustments and hire developers for substantive customizations.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What Programming Languages Do I Need to Know for Stencil Development?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Stencil development requires HTML, CSS (specifically SCSS), JavaScript, and Handlebars templating language. Familiarity with Node.js helps with local development environment setup and build tools. Understanding REST APIs and GraphQL is beneficial for Storefront API integration. No backend programming is required since BigCommerce handles server-side functionality.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Does Migrating to Stencil Affect My Store&#8217;s SEO Rankings?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A properly executed migration preserves SEO value when you maintain URL structure, meta data, and on-page optimization elements. Stencil&#8217;s <a href=\"https:\/\/ecommerce.folio3.com\/blog\/core-web-vitals-improve-ux-seo\/\">improved performance actually benefits SEO through better Core Web Vitals<\/a> scores. However, poor migration planning that changes URLs without proper redirects or loses content can harm rankings. Always implement redirects, verify structured data, and test thoroughly before launching.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">How Much Does It Cost to Hire a BigCommerce Stencil Developer?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Freelance Stencil developers typically charge $75 to $150 per hour depending on experience and location. Agencies range from $100 to $200+ per hour but provide team expertise and project management. Complete custom theme development costs $15,000 to $50,000, while Blueprint migrations range from $10,000 to $30,000 based on complexity. Simple customizations may cost $2,000 to $5,000.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Can I Use Multiple Stencil Themes on One BigCommerce Store?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">BigCommerce allows one active theme per storefront, though you can install multiple themes and switch between them. The platform supports channel-specific themes if you operate multiple storefronts under one account. Most merchants maintain one primary theme and use the Theme Editor to create seasonal variations rather than managing multiple complete themes.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What Are the Performance Benefits of Stencil Over Blueprint?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Stencil delivers 30 to 50 percent faster page loads through optimized asset bundling, lazy loading, and efficient JavaScript execution. The framework&#8217;s Webpack compilation eliminates unused code, while responsive image handling reduces mobile payload. Stencil themes typically score 20 to 30 points higher on Google Lighthouse compared to equivalent Blueprint implementations due to modern performance optimizations.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Outgrowing your current BigCommerce theme means you need more control, faster performance, and design flexibility that older frameworks can&#8217;t deliver. Whether you&#8217;re building custom storefronts or migrating from Blueprint, understanding BigCommerce Stencil is essential for creating high-performing e-commerce experiences that scale with your business. This guide covers everything from Stencil framework fundamentals to advanced customization<\/p>\n","protected":false},"author":50,"featured_media":26511,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[28],"tags":[414],"class_list":{"0":"post-26510","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-bigcommerce","8":"tag-bigcommerce-stencil"},"acf":[],"featured_image_data":{"src":"https:\/\/ecommerce.folio3.com\/blog\/wp-content\/uploads\/2024\/12\/Blue-White-Modern-Marketing-Strategy-Blog-Banner-5.jpg","alt":"BigCommerce Stencil: Mastering Custom Themes and Blueprint Migrations","caption":""},"_links":{"self":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts\/26510"}],"collection":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/comments?post=26510"}],"version-history":[{"count":0,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts\/26510\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/media\/26511"}],"wp:attachment":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/media?parent=26510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/categories?post=26510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/tags?post=26510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}