skills.rest
OrcaQubits
OrcaQubitsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

bc-stencil

Develop and customize BigCommerce Stencil themes with Handlebars, SCSS, and JavaScript.

35|16|Updated Mar 4, 2026
Search Tags:#javascript#theme development#scss#bigcommerce#handlebars#stencil
One-click install
npx skills add https://github.com/OrcaQubits/agentic-commerce-claude-plugins --skill bc-stencil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bc-stencil
Source: https://github.com/OrcaQubits/agentic-commerce-claude-plugins/tree/main/bigcommerce-commerce/skills/bc-stencil
Command: npx skills add https://github.com/OrcaQubits/agentic-commerce-claude-plugins --skill bc-stencil

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of creating and customizing BigCommerce storefront themes by providing expert guidance on its templating engine, styling, and JavaScript architecture.

Core Features & Use Cases

  • Theme Development: Build or modify BigCommerce themes using Handlebars, SCSS, and JavaScript.
  • Configuration: Understand and manage config.json and schema.json for theme settings and editor UI.
  • Use Case: When developing a new BigCommerce storefront, use this Skill to set up the basic theme structure, customize product page layouts with Handlebars, and style components using SCSS.

Quick Start

Fetch live documentation for the Stencil theme engine from developer.bigcommerce.com.

Frequently Asked Questions about bc-stencil

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a custom BigCommerce Stencil theme using Handlebars and SCSS?▼

To build a custom BigCommerce Stencil theme, you use Handlebars for templating, SCSS for styling, and JavaScript modules for interactivity. You must follow BigCommerce's theme architecture and best practices for storefront customization.

How do I configure BigCommerce theme settings using config.json and schema.json?▼

Configuring BigCommerce theme settings involves managing `config.json` and `schema.json` files. These files define the theme settings and control the editor UI, allowing you to customize storefront properties for the Stencil theme.

Can I use Stencil CLI for local BigCommerce theme development?▼

Yes, you can use Stencil CLI for local BigCommerce theme development. The CLI supports local development workflows, allowing you to manipulate theme objects, configure front matter, and test changes before pushing live to the storefront.

What is the architecture of a BigCommerce Stencil theme?▼

A BigCommerce Stencil theme architecture integrates Handlebars templating, SCSS styling, and JavaScript modules. It requires managing front matter configuration and theme objects to properly structure and render the storefront customization.

How do I customize a product page layout in BigCommerce Stencil?▼

To customize a BigCommerce Stencil product page layout, you modify the Handlebars templates to structure the page elements and apply SCSS to style the components, adhering to BigCommerce's theme architecture.

How do I fetch live documentation for the BigCommerce Stencil theme engine?▼

You can fetch live documentation for the BigCommerce Stencil theme engine directly from developer.bigcommerce.com. This documentation provides expert guidance on templating, styling, and JavaScript architecture for storefront development.

Related Skills

Explore More Software Engineering Skills→
OrcaQubitsOrcaQubits
35

bc-setup

Configure a BigCommerce development environment with Stencil CLI and API credentials.

Official
Intermediate
OrcaQubitsOrcaQubits
35

bc-performance

Optimize BigCommerce storefront performance by tuning Stencil themes and API caching.

Official
Intermediate
RooseveltAdvisorsRooseveltAdvisors
1

Prompting

Generate and validate prompts using Handlebars templates with YAML data.

Community
Advanced
taurgistaurgis
27

sfcc-sfra-scss

Organize SFRA SCSS styling with canonical directory structure and BEM naming.

Community
Advanced