{"section":"tutorials","requestedLocale":"es","requestedSlug":"configurar-template-en-el-smartcheckout-update","locale":"es","slug":"configurar-template-en-el-smartcheckout-update","path":"docs/es/tutorials/checkout/configuración-de-checkout/configurar-template-en-el-smartcheckout-update.md","branch":"main","content":"El __portal__ es usado para renderizar las pantallas de __Checkout__ (carrito, datos personales, dirección, forma de pago) y __OrderPlaced__ (Pantalla de confirmación de compra). En este artículo se presentará cómo registrar y configurar los recursos del Portal.\n\nEl módulo __Checkout__ en Admin, muestra los sitios que están registrados para su cuenta. A través de él, también es posible crear un nuevo sitio, editar y configurar información sobre sitios existentes.\n\n> ℹ️ Cada sitio registrado corresponde a un multidominio (si la cuenta tiene multidominios contratados). Para cuentas que no utilizan multidominios, no es necesario registrar más de un sitio en este módulo. Obtenga más información en [Crear multitienda/multidominio](/es/docs/tutorials/gestionar-multitienda).\n\n## Crear un nuevo sitio web\n\n1. En el Admin VTEX, accede a __Configuración de la tienda > Storefront > Checkout__, o escribe __Checkout__ en la barra de búsqueda en la parte superior de la página.\n2. Haga clic en el botón `Nuevo sitio`.\n3. Rellene los siguientes campos:\n\n
\n - **Nombre**: ingrese aquí el nombre deseado para el sitio.
\n - **Tienda**: complete con el nombre de la cuenta, que se puede encontrar en **Configuraciones de la Cuenta > Gestión de la Cuenta > Cuentas > Nombre de la Cuenta**.
\n
\n4. Haga clic en `Guardar`.\n\nCreación del nuevo sitio web: \n\n \n\nAcceso a __Nombre de cuenta__:\n\n\n\n## Editar y configurar sitio\n\n1. En el Admin VTEX, accede a __Configuración de la tienda > Storefront > Checkout__, o escribe __Checkout__ en la barra de búsqueda en la parte superior de la página.\n2. Haga clic en el icono del sitio deseado.\n3. Al acceder al menú de opciones azul ubicado en la parte superior de la página, puede realizar las siguientes acciones:\n - __Sitios__: volver a la pantalla de inicio de los sitios registrados.\n - __Editar__: edite el \"Nombre\" y la \"Tienda\".\n - __Checkout__: realizar configuraciones básicas, como Cálculo de envío, Google Tag Manager, entre otras.\n - __Pedidos__: configurar los motivos de cancelación y sustitución del pedido.\n - __Código__: mostrar y crear templates relacionadas con el sitio.\n - __Páginas__: mostrar páginas existentes para el sitio. \n\nEjemplo de sitios existentes en la misma cuenta:\n\n\nSi desea __eliminar__ un sitio web, haga clic en el botón Eliminar del sitio web deseado, como en el siguiente ejemplo:\n\n\nSi desea __eliminar__ una página existente, haga clic en el botón indicado en la imagen de abajo:\n\n\n\nA continuación, pasaremos a la configuración paso a paso de las opciones del menú: __Código__ y __Checkout__ - pues configuran las páginas de *Checkout* y *Order Placed*.\n\n## Configurar Checkout\n\n> ⚠️ Los usuarios que realizan configuraciones de checkout deben tener un rol con el [recurso de License Manager](/es/docs/tutorials/recursos-del-license-manager) **Manage portal**. A su vez, este nuevo rol deben crearlo usuarios que tengan acceso **Owner (Admin Super)**.\n\n1. En el Admin VTEX, accede a __Configuración de la tienda > Storefront > Checkout__, o escribe __Checkout__ en la barra de búsqueda en la parte superior de la página.\n2. Haga clic en el icono del sitio deseado.\n3. En el menú de opciones azul ubicado en la parte superior de la página, haga clic en __Checkout__ y configure los campos a continuación según sea necesario:\n\n
\n - **Título del sitio web**: si se informa, se mostrará en el título del carrito, el pago y las páginas de pedido confirmado.
\n - **Google Tag Manager**: ingrese el ID (en formato `GTM-XXXX`) de su contenedor [Google Tag Manager](https://www.google.com/tagmanager/), si quieres usarlo automáticamente.
\n - **Google Maps API Key**: la tecla se utiliza en dos situaciones: cuando la función de Entrega basada en coordenadas geográficas está activa o si la opción de **Recogida en tienda** está disponible.
\n - **Cálculo de las Opciones de Entrega (Beta y Stable)**: seleccione si el cálculo del flete se hará desde la hoja de cálculo o por geolocalización.
\n
\n\n\n\n## Configurar código\n\n1. En el Admin VTEX, accede a __Configuración de la tienda > Storefront > Checkout__, o escribe __Checkout__ en la barra de búsqueda en la parte superior de la página.\n2. Haga clic en el icono del sitio deseado.\n3. En el menú de opciones azul ubicado en la parte superior de la página, haga clic en __Código__. A la derecha se mostrará un menú de __Archivos__ y __Templates__ con todos los templates de su sitio web, configurados por el sistema.\n\nEjemplo:\n\n\n\n### Configurar templates del menú \"Código\"\n\nEs posible personalizar las páginas de su sitio, además de configurar otras funcionalidades HTML a través del menú __Archivos__ y __Templates__.\n\nEl código HTML completado en el template corresponde a lo que aparecerá en las páginas de __checkout__ y __order placed__ de su sitio.\n\nDe templates disponibles, los únicos que no se pueden cambiar son __vtex-checkout__ y __vtex-orderPlaced__. Estos corresponden al funcionamiento nativo de la plataforma, presentando el contenido principal de las páginas de __checkout__ y __order placed__.\n\n> ⚠️ La plataforma ignorará los Javascripts incluidos directamente en cualquier template del Portal. Es decir, en el momento de renderizar la página, la plataforma la eliminará. Esto se debe a que [SmartCheckout](/es/tutorial/smartcheckout-preenchimento-automatico-de-dados-do-cliente--2Nuu3xAFzdhIzJIldAdtan#) solo acepta scripts originados en Google Tag Manager. Por lo tanto, siempre que sea necesario realizar alguna personalización (o incluso la inserción de etiquetas específicas) a través de javascript, utilice [Google Tag Manager](/es/tutorial/integration-with-google-tag%20-%20gerente--frequentlyAskedQuestions_616#).\n\n### Ejemplos de cómo rellenar templates \n\nA continuación se muestran ejemplos de cómo se pueden llenar los códigos presentes en los templates __checkout-header__, __checkout-footer__, __vtex-checkout__ y __vtex-orderPlaced__ y su visualización correspondiente en el sitio web:\n\n- Template __checkout-header__ y la cabecera de página del sitio web:\n\n \n\n\n\n- Template __checkout-footer__ y pie de página del sitio web:\n\n\n\n\n\n- Template __vtex-checkout__ y página de carrito al finalizar la compra:\n\n \n\n\n\n- Template __vtex-orderPlaced__ y página de pedido confirmado:\n\n \n\n\n\n### Cuentas con multidominio \n\nLas cuentas que tengan multidominio pueden usar apenas un sitio web, si no hay necesidad de configuraciones específicas. Esto porque, aunque exista apenas un sitio web, la plataforma incluye una clase en el tag \"body\" de acuerdo al dominio accedido. Así, es sencillo aplicar layouts diferentes para el mismo sitio web.\n\nClase insertada en el tag \"body\" de acuerdo al dominio accedido:\n\n"}