# Stencil de BigCommerce: qué es el motor de temas

> Qué es Stencil, el motor de temas de BigCommerce: Handlebars en el servidor, Cornerstone, regiones para widgets y su diferencia con Catalyst.

URL: https://clione.ai/es/glosario/stencil/
Lang: es

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](/es/glosario/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.[^bc-about-stencil] Un tema Stencil se escribe con tres cosas:[^bc-about-stencil][^bc-stencil-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**.[^bc-stencil-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](/es/glosario/ssr/).

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.[^bc-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.[^bc-about-stencil] La última publicada es la 6.22.0, del 21 de septiembre de 2026.[^cornerstone-repo]

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](/es/glosario/widget-bigcommerce/) solo puede colocarse en una región que exista. La mayoría de los temas del _marketplace_ traen regiones predefinidas.[^bc-widgets]

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](/es/glosario/catalyst/) y los desarrollos _headless_ a medida separan el escaparate, se alojan fuera y leen los datos por la API de escaparate en GraphQL.[^bc-storefront-options]

## En una tienda

Lo que trae un tema se puede leer en sus plantillas. En Cornerstone 6.22.0, la [ficha de producto](/es/glosario/ficha-de-producto/) incluye un bloque [JSON-LD](/es/glosario/json-ld/) de [Product](/es/glosario/schema-product/) que se rellena con los datos del catálogo. Recortado:[^cornerstone-repo]

```handlebars
<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](/es/glosario/mpn/) no lleva la línea vacía. El [GTIN](/es/glosario/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`](/es/glosario/id-json-ld/)**, ninguna plantilla del tema publica [Organization](/es/glosario/schema-organization/), [WebSite](/es/glosario/schema-website/) ni [ItemList](/es/glosario/itemlist/), y los [custom fields](/es/glosario/custom-fields-bigcommerce/) se pintan en la ficha pero no entran en este bloque.[^cornerstone-repo]

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`.[^cornerstone-repo] 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.


Confundir Stencil con Cornerstone. Stencil es el motor; Cornerstone, un tema hecho con él, el de serie.[^bc-about-stencil] Un tema comprado en el _marketplace_ o desarrollado por una agencia también es Stencil, pero trae sus propias plantillas, sus propias regiones y su propio marcado, así que lo que hace Cornerstone no dice nada de lo que hace el tuyo. La única forma de saberlo es leer su código o el HTML que genera.


## 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.[^bc-about-stencil][^bc-lab-custom-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.[^bc-stencil-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.[^bc-widgets]
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.[^bc-lab-custom-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.[^bc-storefront-options] Con Stencil, BigCommerce aloja y sirve la tienda, y las aplicaciones de la plataforma se enchufan a ella.[^bc-storefront-options] La entrada de [Catalyst](/es/glosario/catalyst/) y la de [headless commerce](/es/glosario/headless-commerce/) explican qué cambia al separar el escaparate.

Para seguir, la guía [del widget a la página publicada](/es/guias/widget-bigcommerce-pagina-publicada/) sigue el camino completo en una tienda Stencil, y la [ruta de publicación por plataforma](/es/aprender/publicacion-por-plataforma/) ordena el resto de términos.