{"section":"tracks","requestedLocale":"es","requestedSlug":"implementacion-del-frontend","locale":"es","slug":"implementacion-del-frontend","path":"docs/es/tracks/guía-de-onboarding/serie-de-la-tienda-vtex/implementacion-del-frontend.md","branch":"main","content":"El frontend de una tienda online, también conocido como storefront, es la interfaz visual e interactiva de la tienda a través de la cual los clientes interactúan con los productos y realizan acciones, como navegar por las categorías, buscar y agregar productos al carrito.\n\nEste artículo tiene como objetivo ayudarte a elegir qué tecnología utilizar para construir el storefront y las configuraciones correspondientes, considerando los siguientes puntos:\n\n- Tecnologías de desarrollo de storefront de VTEX.\n- Principales funcionalidades de cada tecnología.\n- Fases de desarrollo.\n\nLa implementación del frontend es una etapa enfocada en definir las tecnologías que se van a utilizar de acuerdo con las necesidades del negocio relacionadas con el storefront.\n\n> ℹ️ El frontend puede implementarlo el equipo de desarrollo interno de la empresa o nuestros [partners de implementación](https://help.vtex.com/es/docs/tracks/cuentas-y-arquitectura#partners-de-implementacion). Los [usuarios](https://help.vtex.com/es/docs/tutorials/gestionar-usuarios-administradores) con acceso al Admin VTEX pueden consultar la lista de nuestros partners en el [Partner Portal](https://www.vtex.com/es-mx/partners/).\n\n## Antes de comenzar\n\nAntes de empezar a implementar el frontend se recomienda que la tienda complete las siguientes fases de configuración:\n\n| Fase                                                                     | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |\n| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Definición de la arquitectura de la tienda y la estrategia de ventas     | El equipo definió la arquitectura de tu tienda VTEX de acuerdo con las estrategias y necesidades de tu modelo de negocio.<br /><br />Más información en el artículo [Cuentas y arquitectura](/es/docs/tracks/cuentas-y-arquitectura).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| Configuración de roles                                                   | El equipo configuró los accesos necesarios para usar la plataforma VTEX para cada [usuario](https://help.vtex.com/es/docs/tutorials/gestionar-usuarios-administradores).<br /><br />Más información en el artículo [Roles](https://help.vtex.com/es/docs/tutorials/roles).                                                                                                                                                                                                                                                                                                                                                                                                                                             |\n| Configuración del catálogo                                               | El equipo configuró el [catálogo](https://help.vtex.com/es/docs/tracks/modulos-de-vtex-i#catalogo) con los productos, el árbol de categorías y la información relacionada, como descripciones, imágenes y precios, para llenar y probar la tienda, incluyendo recursos como páginas de lista de productos (PLP), funcionalidad de búsqueda, páginas de detalles del producto (PDP) y checkout.<br /><br />La ausencia de un catálogo puede resultar en pruebas incompletas y problemas de integración de datos, retrasando la implementación.<br /><br />Más información en el artículo [Módulos de VTEX I](https://help.vtex.com/es/docs/tracks/modulos-de-vtex-i). |\n| Definición de las aplicaciones necesarias para la operación de la tienda | El equipo definió las aplicaciones, nativas o de terceros, necesarias para la operación de la tienda.<br /><br />Para tiendas que se construirán con [Store Framework](#store-framework) existe una lista de aplicaciones nativas y de terceros.<br /><br />Más información en el artículo [VTEX IO apps](https://developers.vtex.com/docs/vtex-io-apps).                                                                                                                                                                                                                                                                                                                                                  |\n\n> ℹ️ La [fase de desarrollo](#fases-de-desarrollo) puede ocurrir en paralelo con otras fases de las [integraciones de backend](https://help.vtex.com/es/docs/tracks/integraciones-de-backend) y [configuración de módulos](https://help.vtex.com/es/docs/tracks/modulos-de-vtex-i), como por ejemplo las configuraciones de medios de pago y logística. Esto dependerá del tipo de [arquitectura y planificación](https://help.vtex.com/es/docs/tracks/cuentas-y-arquitectura) elegido para la tienda VTEX y deberá contar con el monitoreo de la [agencia implementadora](https://help.vtex.com/es/docs/tracks/cuentas-y-arquitectura#partners-de-implementacion) o del [Soporte VTEX](https://help.vtex.com/es/docs/tracks/soporte-vtex).\n\n## Tecnologías de desarrollo de frontend en VTEX\n\nVTEX cuenta con tres tecnologías distintas para el desarrollo del storefront: [FastStore](#FastStore), [Store Framework](#store-framework) y [CMS Portal (Legado)](/es/docs/tracks/cms-portal-legado). CMS Portal (Legado) fue la primera tecnología de VTEX para la construcción de storefronts, basada en HTML, CSS y JavaScript, y todo el desarrollo y la edición del código de esta tecnología se realizan vía Admin VTEX.\n\n> ⚠️ Aunque todavía algunas tiendas lo utilizan, [CMS Portal (Legado)](/es/docs/tracks/cms-portal-legado) es una tecnología heredada y ya no está disponible para nuevas tiendas en VTEX.\n\nLas siguientes secciones tratan sobre las principales características y funcionalidades de FastStore y Store Framework.\n\n## Flujo de implementación\n\nAunque las herramientas varían según la tecnología, las implementaciones de storefront generalmente siguen este flujo:\n\n1. **Planificar:** Define el alcance del storefront, la arquitectura de la información, el diseño, las integraciones y los criterios de aceptación.\n2. **Preparar:** Configura los accesos, los entornos de desarrollo, los datos comerciales y las aplicaciones o servicios necesarios.\n3. **Desarrollar:** Implementa páginas, componentes, estilos y el comportamiento del storefront utilizando la tecnología seleccionada.\n4. **Integrar:** Conecta la gestión de contenido, la búsqueda, el checkout, el inicio de sesión, Mi Cuenta, Analytics y cualquier servicio externo necesario.\n5. **Probar:** Valida la funcionalidad, el contenido, el comportamiento responsivo, la accesibilidad, el SEO, Analytics y el desempeño.\n6. **Lanzar (go live):** Completa las verificaciones de producción, publica el storefront, apunta el dominio de la tienda hacia él y supervisa el lanzamiento.\n\n## FastStore\n\nFastStore es una tecnología de storefront innovadora que permite a los equipos de desarrollo crear tiendas enfocadas en el desempeño y la estabilidad. Además, facilita el mantenimiento y la edición de las páginas del sitio web de la tienda.\n\nEsta tecnología es un _toolkit de código abierto_ basado en _React_ y en la arquitectura [Jamstack](https://jamstack.org/). Para más información, consulta el portal de documentación de [FastStore](https://developers.vtex.com/docs/guides/faststore).\n\n### Principales funcionalidades de FastStore\n\nLa siguiente tabla muestra algunas de las principales funcionalidades de FastStore:\n\n| Funcionalidad                                                                                                                                                                                                                                                                                                                                                   | Descripción                                                                                                                                                                                                                                                                                                                                                                                                               |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [Starter](https://starter.vtex.app/)                                                                                                                                                                                                                                                                                                                            | Plantilla funcional diseñada para el desarrollo rápido de la tienda, que ya integra los componentes de [FastStore UI](https://developers.vtex.com/docs/guides/faststore/components-index). Incluye páginas como páginas de inicio, páginas de lista de productos (PLP), páginas de detalles de productos (PDP) y también la funcionalidad minicart. |\n| [FastStore UI](https://developers.vtex.com/docs/guides/faststore/components-index)                                                                                                                                                                                                                                                                              | Biblioteca de componentes para ecommerce que ofrece recursos y estilos básicos para agilizar la implementación y personalización de storefronts.                                                                                                                                                                                                                                                          |\n| Tecnología headless                                                                                                                                                                                                                                                                                                                                             | Proceso de personalización que separa el código de la tienda desarrollado por el equipo de desarrollo del código base proporcionado por VTEX. Esto simplifica las actualizaciones del frontend de la tienda, permitiendo actualizaciones sin afectar el código personalizado.                                                                                                             |\n| Integración con [GitHub](https://github.com/)                                                                                                                                                                                                                                                                                                                   | Los equipos de desarrollo pueden gestionar todo el código del storefront utilizando [GitHub](https://github.com/).                                                                                                                                                                                                                                                                                        |\n| [CMS](https://help.vtex.com/es/docs/tutorials/cms-informacion-general)                                                                                                                                                                                                                                             | Sistema de gestión de contenido (CMS) que permite la edición y creación de nuevas páginas, así como la vista previa de los cambios en el contenido.                                                                                                                                                                                                                                    |\n| Verificaciones automáticas                                                                                                                                                                                                                                                                                                                                      | Las pruebas funcionales y la evaluación del desempeño de la tienda y de la calidad del código se ejecutan continuamente de forma automatizada para detectar lentitud y errores durante toda la fase de desarrollo del storefront.                                                                                                                                                                         |\n| Integración con [Intelligent Search](https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment#step-4-enabling-the-vtex-intelligent-search-app)                                                                                                                                                                           | Funcionalidad de autocompletar en la barra de búsqueda, junto con sugerencias de búsqueda y productos basados en preferencias configurables.                                                                                                                                                                                                                                                              |\n| [Checkout](https://developers.vtex.com/docs/guides/faststore/go-live-3-integrating-the-vtex-checkout) y [Mi Cuenta e Inicio de sesión](https://developers.vtex.com/docs/guides/faststore/go-live-4-integrating-the-vtex-order-placed-and-my-account) | Integración con otras fases de la jornada de compra del cliente. Las tiendas VTEX previamente desarrolladas con Store Framework pueden mantener los ajustes relacionados con Checkout, Mi cuenta e Inicio de sesión al migrar a FastStore, ya que ambas se benefician de la misma infraestructura.                                                                                        |\n\n## Store Framework\n\nStore Framework es una solución ya establecida basada en un framework de implementación de storefronts low-code, enfocada en el modelo de composable commerce. Es decir, el framework permite combinar diferentes aplicaciones de VTEX IO (https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) para crear el storefront.\n\nEn esta tecnología, la implementación y el lanzamiento de la tienda se centra en componentes preconstruidos, también conocidos como bloques, y en la posibilidad de personalizar estos componentes en función de las necesidades del modelo de negocio. Este framework se basa en:\n\n- React\n- TypeScript\n- Node.js\n- GraphQL\n\nPara más información, consulta el artículo [What is VTEX Store Framework](https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework).\n\n### Entorno de desarrollo\n\nEn la implementación de frontend, es importante recordar que VTEX IO (https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) no es una tecnología para construir storefronts, sino una plataforma de desarrollo. Store Framework es una tecnología de construcción de storefront ejecutada por VTEX IO, que a su vez es una solución de desarrollo y ejecución basada en la nube para aplicaciones personalizadas y storefronts.\n\nEsto significa que cuando trabajas con VTEX IO, desarrollas tu código localmente. Sin embargo, para implementar y ejecutar la tienda, VTEX IO también se encarga del proceso de deploy y gestiona la infraestructura, CI/CD y la seguridad. La siguiente imagen muestra cómo se relacionan estos conceptos entre sí:\n\n![Arquitetura de desenvolvimento frontend](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tracks/guia-de-onboarding/trilha-da-loja-vtex/implementacao-de-frontend_1.png)\n\n### Principales funcionalidades de Store Framework\n\nLa tabla a continuación muestra algunas de las principales funcionalidades de Store Framework:\n\n| Funcionalidad                                                                                                                         | Descripción                                                                                                                                                                                                                  |\n| ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [Starter](https://github.com/vtex-apps/store-theme)                                                                                   | Plantilla funcional diseñada para el desarrollo rápido de la tienda, que ya integra los componentes preconstruidos.                                                                                          |\n| [Componentes preconstruidos](https://developers.vtex.com/docs/vtex-io-apps)                                                           | Componentes nativos basados en React.                                                                                                                                                                        |\n| Arquitectura modular                                                                                                                  | Personalización y reutilización del código de elementos de la interfaz para lanzar y replicar tiendas rápidamente.                                                                                           |\n| [Workspaces y entornos de prueba](https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace)                            | Posibilidad de crear distintas versiones de la tienda y probarlas antes para hacer cambios con seguridad.                                                                                                    |\n| [Site Editor](https://help.vtex.com/es/docs/tutorials/site-editor-vision-general)                                                     | Sistema de gestión de contenido (CMS) para editar plantillas y crear nuevas páginas en el sitio web de la tienda.                                                                         |\n| [Pruebas A/B nativas](https://developers.vtex.com/docs/guides/ab-tests)                                                               | Posibilidad probar y validar la versión de la tienda que tiene las tasas de conversión más altas.                                                                                                            |\n| Integración con [Intelligent Search](https://help.vtex.com/es/docs/tracks/vision-general-intelligent-search)                          | Funcionalidad de autocompletar en la barra de búsqueda, junto con sugerencias de búsqueda y productos basados en tus preferencias.                                                                           |\n| [Progressive Web App (PWA)](https://help.vtex.com/es/docs/tutorials/habilitar-las-notificaciones-pwa-de-la-tienda) | Experiencias similares a las de una aplicación nativa en cualquier dispositivo con tecnología preparada para PWA.                                                                                            |\n| [Cross-border](https://help.vtex.com/es/docs/tracks/tiendas-transfronterizas-cross-border)                                            | Una [multitienda](https://help.vtex.com/es/docs/tracks/cuentas-y-arquitectura#elegirentre-multitienda-y-ambiente-adicional) VTEX operando en diferentes países con un enfoque propio para cada uno de ellos. |\n| Integración con Checkout, [Mi cuenta](https://help.vtex.com/es/docs/tutorials/como-funciona-mi-cuenta) e Inicio de sesión             | Integración con otras fases de la jornada de compra del cliente.                                                                                                                                             |\n\n## Elegir tecnología frontend\n\nA la hora de elegir entre Store Framework y FastStore el equipo debe evaluar las necesidades específicas del proyecto y considerar la experiencia del equipo con ambas tecnologías.\n\nStore Framework es una opción más madura, que ofrece una estructura flexible adecuada para casos de uso complejos, además de soporte para tiendas que operan internacionalmente y con varios idiomas.\nPara tiendas B2B, Store Framework es una excelente opción, ya que ofrece [B2B Suite](https://developers.vtex.com/docs/apps/vtex.b2b-suite), una aplicación que permite la gestión de organizaciones, permisos de frontend de la tienda y configuraciones de checkout para relaciones comerciales B2B.\n\nFastStore es una alternativa más reciente, enfocada en el desempeño de la tienda. Esta solución ofrece una experiencia de carga rápida, que es esencial para mantener el interés de los visitantes de la tienda y reducir las tasas de abandono de carrito. Para casos de uso más simples y enfocados en desempeño, FastStore puede ser la tecnología más recomendada.\n\n> ℹ️ El equipo de [Soporte VTEX](https://help.vtex.com/es/docs/tracks/soporte-vtex) puede ayudarte a elegir entre las tecnologías de storefront disponibles.\n\nEn la tabla a continuación se comparan las dos tecnologías según sus principales funcionalidades:\n\n<table>\n    <tbody><tr>\n        <td>**Funcionalidad**</td>\n        <td>**Store Framework**</td>\n        <td>**FastStore**</td>\n    </tr>\n    <tr>\n      <td>Starter (plantilla inicial)</td>\n        <td>[Store Theme](https://github.com/vtex-apps/store-theme) es la plantilla inicial que el equipo puede utilizar como base para iniciar el proyecto de la tienda o comenzar desde cero.</td>\n        <td>[Starter FastStore](https://starter.vtex.app/) ya está disponible al finalizar el [Onboarding de FastStore](https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project), lo que permite al equipo comenzar el proyecto con una plantilla base centrada en desempeño.</td>\n    </tr>\n    <tr>\n        <td>Desempeño</td>\n        <td>Los recursos de SSR (Server Side Rendering) generan todo el HTML de una página en el servidor en respuesta a una solicitud de página, mientras que el SPA (Single Page Application) carga elementos como el encabezado solo una vez que la página se ha cargado.</td>\n        <td>Posibilidad de alcanzar el máximo desempeño, ya que utiliza la arquitectura Jamstack (https://jamstack.org/) para crear con anticipación las páginas del sitio web de la tienda, lo que permite una entrega más rápida y eficiente en términos de recursos.</td>\n    </tr>\n    <tr>\n        <td>Tech Stack</td>\n        <td>\n            <ul>\n                <li>TypeScript</li>\n                <li>React</li>\n                <li>GraphQL</li>\n                <li>Node.js</li>\n            </ul>\n        </td>\n        <td>\n            <ul>\n                <li>TypeScript</li>\n                <li>React</li>\n                <li>Next.js</li>\n                <li>GraphQL</li>\n                <li>Node.js</li>\n            </ul>\n        </td>\n    </tr>\n    <tr>\n        <td>Personalización de componentes</td>\n        <td>Flexible y de fácil personalización.</td>\n        <td>Permite personalizar los componentes nativos y garantiza un buen desempeño de la tienda siguiendo las mejores prácticas.</td>\n    </tr>\n    <tr>\n        <td>Gestión del código</td>\n        <td>Utiliza [Workspaces](https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace) y la arquitectura de VTEX IO para el versionado, actualización y rollback de los componentes y las aplicaciones.</td>\n        <td>Utiliza GitHub y el concepto de [ramas](https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches) para la colaboración. Los usuarios con autorización para acceder al repositorio del storefront en GitHub pueden ver y trabajar en el código.</td>\n    </tr>\n    <tr>\n        <td>Comunidad y Soporte</td>\n        <td>\n            <ul>\n                <li>[Documentación oficial](https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework)</li>\n                <li>[VTEX Community](https://community.vtex.com/c/store-development/store-framework/17)</li>\n            </ul>\n        </td>\n        <td>\n            <ul>\n                <li>[Documentación oficial](https://developers.vtex.com/docs/guides/faststore)</li>\n            </ul>\n        </td>\n    </tr>\n    <tr>\n        <td>Monitoreo del desempeño y Analytics</td>\n        <td>\n            <ul>\n                <li>Posibilidad de configurar [VTEX Google Tag Manager](https://developers.vtex.com/docs/guides/google-tag-manager) para analizar los datos de navegación de la tienda.</li>\n                <li>Posibilidad de aumentar el desempeño del sitio web de la tienda usando herramientas de [optimización de desempeño](https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-optimizing-performance).</li>\n            </ul>\n        </td>\n        <td>\n            <ul>\n                <li>Posibilidad de configurar el módulo nativo de Analytics.</li>\n                <li>Posibilidad de aumentar el desempeño del sitio web de la tienda utilizando herramientas tecnológicas.</li>\n            </ul>\n        </td>\n    </tr>\n    <tr>\n        <td>Sistema de gestión de contenidos (CMS)</td>\n        <td>Compatible con [Site Editor](https://help.vtex.com/es/docs/tutorials/site-editor-vision-general).</td>\n        <td>Compatible con [CMS](https://help.vtex.com/es/docs/tutorials/cms-informacion-general).</td>\n    </tr>\n</tbody></table>\n\n## Fases de desarrollo\n\nAntes de lanzar la tienda en producción y del [go live](https://help.vtex.com/es/docs/tracks/planificacion-del-go-live), es importante enumerar las configuraciones y funcionalidades esenciales que se deben incluir en el storefront. Estas definiciones ayudan a definir el Producto Mínimo Viable (MVP) para el storefront. Los siguientes temas describen:\n\n- [Los requisitos para un MVP de FastStore](#requisitos-para-un-mvp-de-faststore)\n- [Los requisitos para un MVP de Store Framework](#requisitos-para-un-mvp-de-store-framework)\n\n> ℹ️ Las siguientes recomendaciones son para configuraciones básicas de storefront. Dependiendo de la [arquitectura elegida](https://help.vtex.com/es/docs/tracks/cuentas-y-arquitectura) para la operación de la tienda pueden ser necesarias otras configuraciones.\n\n### Desarrollo con FastStore\n\nEl equipo de desarrollo debe iniciar un nuevo proyecto con FastStore mediante el proceso de [onboarding](https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project). Al final de este proceso el equipo tendrá una tienda básica y funcional basada en el [Starter de FastStore](https://starter.vtex.app/). Una vez hecho esto ya se habrán implementado los requisitos básicos de la página:\n\n- Página de inicio\n- Página de lista de productos (PLP)\n- Página de detalles del producto (PDP)\n- Minicart\n\n![FastStore template](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tracks/guia-de-onboarding/trilha-da-loja-vtex/implementacao-de-frontend_2.png)\n\n#### Requisitos para un MVP de FastStore\n\nA continuación se presentan los requisitos para cada tema:\n\n- Catálogo\n  - [Agregar productos y SKUs](https://help.vtex.com/es/docs/tutorials/agregar-o-editar-productos)\n  - [Construir el árbol de categorías](https://help.vtex.com/es/docs/tutorials/registrar-categoria), ([departamentos](https://help.vtex.com/es/docs/tutorials/que-es-un-departamento), [categorías](https://help.vtex.com/es/docs/tutorials/que-es-una-categoria) y [subcategorías](https://help.vtex.com/es/docs/tutorials/que-es-una-subcategoria))\n  - [Definir filtros y tipos de especificaciones por categoría](https://help.vtex.com/es/docs/tutorials/crear-grupo-de-especificaciones-en-una-categoria)\n  - [Registrar imágenes de los SKUs](https://help.vtex.com/es/docs/tutorials/agregar-o-editar-skus)\n  - [Registrar precios de los SKUs](https://help.vtex.com/es/docs/tracks/registrar-precio-base)\n  - [Gestión del stock](https://help.vtex.com/es/docs/tutorials/gestionar-items-en-inventario)\n- VTEX Intelligent Search\n  - [Integrar la aplicación de Intelligent Search en la cuenta](https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment#step-4-enabling-the-vtex-intelligent-search-app)\n- Integración con CMS\n  - [Primeros pasos con CMS](https://developers.vtex.com/docs/guides/getting-started-with-cms)\n- Página de inicio\n  - Editar los componentes y estilos ya presentados en [Starter](https://starter.vtex.app/)\n- Página de inicio de sesión\n  - [Integrar VTEX Login](https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login)\n  - Editar los componentes y estilos ya presentados en [Starter](https://starter.vtex.app/)\n- Página de lista de productos (PLP)\n  - Editar los componentes y estilos ya presentados en [Starter](https://starter.vtex.app/)\n- Página de detalles del producto (PDP)\n  - Editar los componentes y estilos ya presentados en [Starter](https://starter.vtex.app/)\n- Configuración de Minicart\n  - Editar los componentes y estilos ya presentados en [Starter](https://starter.vtex.app/)\n- Checkout\n  - Integrar [VTEX Checkout](https://developers.vtex.com/docs/guides/faststore/go-live-3-integrating-the-vtex-checkout)\n  - Integrar [VTEX Order Placed y My Account](https://developers.vtex.com/docs/guides/faststore/go-live-4-integrating-the-vtex-order-placed-and-my-account)\n- Logística\n  - [Registrar muelle](https://help.vtex.com/es/docs/tutorials/gestionar-el-muelle)\n  - [Registrar estrategia de envío](https://help.vtex.com/es/docs/tutorials/estrategia-de-envio)\n  - [Relacionar la estrategia de envío y almacén con el muelle](https://help.vtex.com/es/docs/tutorials/gestionar-el-muelle)\n- Pagos\n  - [Configurar el conector Pagarés](https://help.vtex.com/es/docs/tutorials/configurar-conector-pagares)\n  - Registrar proveedores de pagos y antifraude\n\n- Aumentar el desempeño de la tienda utilizando las herramientas de [tecnología](https://developers.vtex.com/docs/guides/faststore/managing-performance-overview) adecuadas.\n- [SEO](https://developers.vtex.com/docs/guides/faststore/seo-overview)\n\n### Desarrollo con Store Framework\n\nEl equipo de desarrollo debe iniciar un nuevo proyecto con Store Framework clonando y [vinculando](https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app) el [Store Theme](https://github.com/vtex-apps/store-theme) en un [workspace de desarrollo](https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace). Store Theme es una plantilla funcional básica para iniciar una tienda con componentes esenciales y páginas como:\n\n- Página de inicio\n- Página de lista de productos (PLP)\n- Página de detalles del producto (PDP)\n\n![Store Framework template](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tracks/guia-de-onboarding/trilha-da-loja-vtex/implementacao-de-frontend_3.png)\n\n#### Requisitos para un MVP de Store Framework\n\nA continuación se presentan los requisitos para cada tema:\n\n- Catálogo\n  - [Registrar productos y SKUs](https://help.vtex.com/es/docs/tutorials/agregar-o-editar-productos)\n  - [Construir el árbol de categorías](https://help.vtex.com/es/docs/tutorials/registrar-categoria), ([departamentos](https://help.vtex.com/es/docs/tutorials/que-es-un-departamento), [categorías](https://help.vtex.com/es/docs/tutorials/que-es-una-categoria) y [subcategorías](https://help.vtex.com/es/docs/tutorials/que-es-una-subcategoria))\n  - [Definir filtros y tipos de especificaciones por categoría](https://help.vtex.com/es/docs/tutorials/crear-grupo-de-especificaciones-en-una-categoria)\n  - [Registrar imágenes de los SKUs](https://help.vtex.com/es/docs/tutorials/agregar-o-editar-skus)\n  - [Registrar precios de los SKUs](https://help.vtex.com/es/docs/tracks/registrar-precio-base)\n  - [Gestión del stock](https://help.vtex.com/es/docs/tutorials/gestionar-items-en-inventario)\n- VTEX Intelligent Search\n  - [Integrar la aplicación de Intelligent Search en la cuenta](https://help.vtex.com/es/docs/tracks/vision-general-intelligent-search)\n- Página de inicio\n  - Editar los componentes y estilos ya presentados en [Starter](https://storetheme.vtex.com/)\n- Página de inicio de sesión\n  - Integrar VTEX Login\n  - Editar los componentes y estilos ya presentados en [Starter](https://storetheme.vtex.com/)\n- Página de lista de productos (PLP)\n  - Editar los componentes y estilos ya presentados en [Starter](https://storetheme.vtex.com/clothing?_q=clothing&map=ft)\n- Página de detalles del producto (PDP)\n  - Editar los componentes y estilos ya presentados en [Starter](https://storetheme.vtex.com/ten-top-shirts/p)\n- Configuración de Minicart\n  - Editar los componentes y estilos ya presentados en [Starter](https://storetheme.vtex.com/)\n- Logística\n  - [Registrar muelle](https://help.vtex.com/es/docs/tutorials/gestionar-el-muelle)\n  - [Registrar estrategia de envío](https://help.vtex.com/es/docs/tutorials/estrategia-de-envio)\n  - [Relacionar la estrategia de envío y almacén con el muelle](https://help.vtex.com/es/docs/tutorials/gestionar-el-muelle)\n- Pagos\n  - [Configurar el conector Pagarés](https://help.vtex.com/es/docs/tutorials/configurar-conector-pagares)\n  - [Registrar afiliaciones de gateway](https://help.vtex.com/es/docs/tutorials/afiliaciones-de-gateway)\n- Desempeño\n  - Aumentar el desempeño del sitio web de la tienda usando herramientas de [optimización de desempeño](https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-optimizing-performance)\n- Métricas\n  - Configurar [Google Tag Manager](https://developers.vtex.com/docs/guides/google-tag-manager)"}