¿Qué es Stencil en BigCommerce?

Si tu tienda está en BigCommerce y no tienes un escaparate headless hecho aparte, tu tienda funciona con Stencil, lo sepas o no. Stencil no es un tema concreto sino el motor con el que están hechos los temas de la tienda que aloja BigCommerce: el que convierte el catálogo en las páginas que ve el cliente. Te importa porque es el tema, y no el catálogo, el que decide qué llega al HTML de cada página: el título, los datos estructurados, las especificaciones y los huecos donde una aplicación puede añadir algo.

Cómo funciona

BigCommerce define Stencil como su motor de temas, y es el que mueve Cornerstone, su tema de referencia.⁠^{[1]BigCommerce Dev Center. About Stencil} Un tema Stencil se escribe con tres cosas:⁠^{[1]BigCommerce Dev Center. About Stencil}⁠^{[2]BigCommerce Dev Center. Stencil Technology Stack}

• Plantillas Handlebars. Handlebars.js es un lenguaje de plantillas: un archivo que parece HTML con expresiones entre llaves que insertan datos o deciden qué se muestra. Los datos llegan como objetos de Stencil (el producto, la categoría, los banners), y cada plantilla puede pedir los que necesita con un bloque de front matter en YAML al principio del archivo.
• Estilos en Sass o SCSS. Cornerstone usa Citadel, un marco de BigCommerce construido sobre Foundation 5.5.3.
• JavaScript, con una biblioteca propia, stencil-utils, para reaccionar a lo que hace el cliente.

La frase que más importa para el SEO está en la documentación técnica: en producción, las instrucciones de Handlebars se ejecutan en el servidor y generan el HTML que recibe el navegador.⁠^{[2]BigCommerce Dev Center. Stencil Technology Stack} Lo que el tema pinta llega ya escrito en el código fuente, sin esperar a que se ejecute JavaScript: es renderizado del lado del servidor.

Para editar un tema sin tocar la tienda en marcha está Stencil CLI, una herramienta de línea de comandos sobre Node.js que levanta una vista previa local. Para quien no programa está Page Builder, que cambia colores, tipografías, banners y la disposición de algunas páginas sin código. Cada tema puede tener de una a cuatro variantes de estilo.⁠^{[1]BigCommerce Dev Center. About Stencil}

Cornerstone es el tema por defecto de las tiendas nuevas, de código abierto en GitHub, con tres variantes (Light, Warm y Bold), y BigCommerce lo ofrece como punto de partida para desarrollar temas. Por las normas de PCI 4.0 sobre scripts, BigCommerce pide usar la versión 6.16.0 o posterior.⁠^{[1]BigCommerce Dev Center. About Stencil} La última publicada es la 6.22.0, del 21 de septiembre de 2026.⁠^{[3]BigCommerce en GitHub. Cornerstone, the default Stencil theme (release 6.22.0)}

Los temas Stencil también deciden dónde puede entrar contenido de fuera. Las regiones son huecos que el tema declara en sus plantillas con {{{region name="..."}}}, y un widget de BigCommerce solo puede colocarse en una región que exista. La mayoría de los temas del marketplace traen regiones predefinidas.⁠^{[4]BigCommerce Dev Center. Widgets API}

BigCommerce tiene tres maneras de construir un escaparate, y Stencil es la tradicional. Según su propia comparación: Stencil es monolítico, lo aloja BigCommerce con caché y CDN incluidos, se integra directamente con el backend y admite las aplicaciones de BigCommerce, a cambio de una personalización que la propia tabla califica de limitada. Catalyst y los desarrollos headless a medida separan el escaparate, se alojan fuera y leen los datos por la API de escaparate en GraphQL.⁠^{[5]BigCommerce Dev Center. Getting Started: choosing the right storefront}

En una tienda

Lo que trae un tema se puede leer en sus plantillas. En Cornerstone 6.22.0, la ficha de producto incluye un bloque JSON-LD de Product que se rellena con los datos del catálogo. Recortado:⁠^{[3]BigCommerce en GitHub. Cornerstone, the default Stencil theme (release 6.22.0)}

<script type="application/ld+json">
  { "@context": "https://schema.org/", "@type": "Product", "name":
  {{{JSONstringify product.title}}},
  {{#if product.sku}}"sku": "{{product.sku}}",{{/if}}
  {{#if product.mpn}}"mpn": "{{product.mpn}}",{{/if}}
  {{#if product.gtin}}"gtin{{length product.gtin}}": "{{product.gtin}}",{{/if}}
  "url" : "{{product.url}}", ... }
</script>

Se lee así. Cada {{#if}} escribe la propiedad solo si el producto tiene ese dato, de modo que un producto sin MPN no lleva la línea vacía. El GTIN se escribe con el nombre que corresponde a su número de cifras: gtin13 para un código de 13, por ejemplo. Y lo que no está también cuenta: el nodo no lleva @id, ninguna plantilla del tema publica Organization, WebSite ni ItemList, y los custom fields se pintan en la ficha pero no entran en este bloque.⁠^{[3]BigCommerce en GitHub. Cornerstone, the default Stencil theme (release 6.22.0)}

Las regiones de la ficha en esa versión son dos, product_below_price y product_below_content, y la categoría tiene category_below_header y category_below_content.⁠^{[3]BigCommerce en GitHub. Cornerstone, the default Stencil theme (release 6.22.0)} Son los huecos donde una aplicación puede colocar sus widgets en una tienda con Cornerstone. Clione usa ese camino: en BigCommerce, su grafo de datos estructurados se publica con la Widget API y se renderiza en el servidor.

Cómo comprobarlo

1. Mira qué tema usas y su versión en el panel, en Storefront › Themes. Si es Cornerstone, compara la versión con la 6.16.0 que pide BigCommerce.⁠^{[1]BigCommerce Dev Center. About Stencil}⁠^{[6]BigCommerce Developer Learning. Mini Use Case: Create a Customized Field}
2. Abre el código fuente de una ficha (Ctrl+U en Chrome) y busca application/ld+json. Lo que encuentres ahí es lo que escribe el tema en el servidor.⁠^{[2]BigCommerce Dev Center. Stencil Technology Stack}
3. Busca data-content-region en la misma página para ver las regiones que declara tu tema; o consúltalas con la Widgets API para la plantilla de página que te interese.⁠^{[4]BigCommerce Dev Center. Widgets API}
4. Comprueba que tus custom fields salen en el HTML buscando el valor de uno de ellos.
5. Antes de editar un archivo del tema, haz una copia. BigCommerce lo pide en sus propios ejercicios: personaliza y prueba siempre sobre la copia.⁠^{[6]BigCommerce Developer Learning. Mini Use Case: Create a Customized Field}

Concepto cercano: Catalyst

Catalyst es la otra forma que ofrece BigCommerce de construir un escaparate, y la diferencia es de arquitectura. Stencil vive dentro de BigCommerce; Catalyst, fuera. Catalyst es un escaparate headless hecho con Next.js y React, con renderizado en el servidor, que lee los productos y el carrito por la API de escaparate en GraphQL y se maqueta con Makeswift. Tú lo alojas, y esa API no cubre todas las funciones de la plataforma, así que hay funciones y aplicaciones del marketplace que no funcionan de serie. Tampoco tiene un marketplace de temas.⁠^{[5]BigCommerce Dev Center. Getting Started: choosing the right storefront} Con Stencil, BigCommerce aloja y sirve la tienda, y las aplicaciones de la plataforma se enchufan a ella.⁠^{[5]BigCommerce Dev Center. Getting Started: choosing the right storefront} La entrada de Catalyst y la de headless commerce explican qué cambia al separar el escaparate.

Para seguir, la guía del widget a la página publicada sigue el camino completo en una tienda Stencil, y la ruta de publicación por plataforma ordena el resto de términos.