La sección Layout te permite crear tu storefront con HTML y CSS. Se organiza en carpetas y archivos con fines específicos:

• HTML Templates: construye el código HTML y los archivos JavaScript y CSS de referencia que se utilizarán en las páginas del sitio web.

• Shelves Templates: gestiona las plantillas de estantes, es decir, los componentes responsables de renderizar un grupo de productos en el storefront.

• Custom Elements: crea las condiciones necesarias para implementar componentes reutilizables, como los pies de página, en otras partes de la tienda.

• URL Builder: redirige las URLs existentes a otras de interés. Esto evitará errores de indexación y ayudará a mantener el posicionamiento SEO.

• Files Manager: sube archivos de imagen para el sitio web de tu tienda. Almacena los archivos JavaScript, CSS y de imagen del sitio web. Si deseas utilizar alguno de estos archivos en tu tienda, debes hacer referencia a ellos dentro de la sección HTML Templates.

• Product Cluster (Collections): crea grupos de productos. Puede utilizarlos para crear páginas de destino de campañas o colecciones de productos que carguen grupos de productos específicos.

• Sites and Channels: configura el binding de tu tienda y otros ajustes del License Manager. Para obtener más información, consulta el artículo Estructura de la carpeta CMS.

La sección Configuración te permite configurar los ajustes relacionados con el sitio web de tu tienda, como sus metadatos, las etiquetas SEO, los tipos de archivo, etc.

La sección Configuración está estructurada de la siguiente manera:

• General: configuraciones generales relacionadas con los metadatos de la tienda y las opciones de compra, como el título de la página de inicio y la cantidad máxima de SKU en el carrito.
• SEO: opciones para personalizar las palabras clave y las meta etiquetas de SEO.
• Textos de la tienda: base de datos de variables de texto reutilizables que se muestran en el storefront.
• Tipos de archivos: configuraciones relacionadas con los archivos de recursos, como las dimensiones y el tamaño de las imágenes.
• Regiones geográficas: base de datos de las regiones geográficas donde están disponibles los productos de la tienda.

En VTEX, toda nueva cuenta ya tiene carpetas preinstaladas en su CMS. Sin embargo, algunas de estas son obligatorias.

Es decir, si su tienda no tiene estas carpetas - con los nombres exactamente iguales a los que indicamos en este artículo - tendrá problemas de navegación e indexación.

Las otras carpetas son apenas sugerencias por ser útiles para la mayoría de las tiendas. Pero su ausencia no afecta en absoluto a una cuenta.

En este artículo, hablaremos de todas estas carpetas.

Toda tienda debe tener, sin excepción, las siguientes carpetas en el CMS para asegurar el correcto funcionamiento de la navegación e indexación:

• Búsqueda
• Categoría
• Departamento
• Login
• Producto

Vea abajo estas carpetas básicas en el CMS:

Estas carpetas vienen de forma predeterminada en el ambiente de todas las tiendas VTEX.

Como las carpetas se refieren a páginas dinámicas, sus nombres no aparecen en la navegación del cliente.

Esto significa que el hecho de que la edición de los nombres sea vetada no afecta al texto final de sus URLs ni, por lo tanto, a la internacionalización de su sitio web.

De esta manera, los nombres de los layouts pueden editarse sin ningún problema.

Algunas carpetas del CMS no son obligatorias, pero son útiles. Por lo tanto, recomendamos que no las excluya.

Estas son:

• /account: cuenta del cliente
• /account/orders: pedidos del cliente

Para estas dos carpetas, lo que importa es el control o placeholder que lee su contenido. Sus nombres pueden ser editados libremente.

Hay carpetas que, aunque no son tan importantes como las anteriores, suelen ser útiles para la mayoría de las tiendas.

Estas son:

• /sistema/buscavazia: carpeta donde el usuario es dirigido si la búsqueda no encuentra resultados.
• /sistema/{codigoHTTP}: carpeta que renderiza páginas de errores de acuerdo con los códigos de status HTTP, tales como 404 (página no encontrada), 401 (no autorizado) y 500 (error de servidor).
• /marcas: carpeta que contiene layouts de páginas de marca, que pueden ser personalizadas con un layout exclusivo. Si no hay layout específico para marcas, estas páginas se renderizarán de la misma manera que la carpeta de búsqueda. Para entender cómo funcionan las páginas de marca, consulte el artículo Cómo funciona la búsqueda de VTEX.

Controles son fragmentos de código que puede utilizar en los templates de su sitio web para realizar acciones específicas.

En VTEX, encontrará una serie de controles nativos para renderizar diversas funcionalidades.

Por ejemplo, utilizando el control <vtex.cmc:productName/> en una página de producto, el sistema proporcionará el nombre del producto que se mostrará en la pantalla.

Para agregar un control, basta con pegarlo en el código. El resultado será renderizado en la posición del código donde se agregue.

Puede consultar todos los controles nativos disponibles y sus respectivos usos en el artículo Lista de controles para templates.

• Layout
• Configuración
• Estructura de las carpetas del Layout
• Lista de controles para plantillas
• ¿Qué son las plantillas?
• ¿Qué es un sitio web?
• ¿Qué son los controles?
• ¿Qué son los layouts?
• ¿Qué son los estantes?
• ¿Qué es binding?

• Crear o editar una plantilla de página: Aprende a crear plantillas de página. La plantilla de página es un modelo creado para definir una estructura HTML para presentar el contenido de las páginas.

• Asociar una plantilla a un layout: Asocia una plantilla a un layout utilizando la carpeta Sites and Channels.

• Gestión de placeholders: Un placeholder es un fragmento de código configurable que atiende a las condiciones establecidas por la tienda. Inserta y configura un placeholder, por ejemplo un banner en tu tienda.

• Uso de controles nativos de VTEX: Los controles son fragmentos de código que puedes utilizar en las plantillas de tu sitio web para realizar acciones específicas, por ejemplo, un control en una página de producto para mostrar el nombre del producto en la pantalla.

• ¿Para qué sirve el Control Personalizado?: Además de los controles nativos de VTEX, puedes crear tus propios controles.

• Lista de controles para templates
• Control de búsqueda - fulltextSearchBox
• Control de destaque de la colección
• Control de breadcrumbs
• Controles de la plantilla de estante