> For the complete documentation index, see [llms.txt](https://wiki.spiritshop.com.br/portal-bridgestone-b2c/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.spiritshop.com.br/portal-bridgestone-b2c/design/banner.md).

# Banner

Cómo registrar un banner

En este tutorial aprenderás cómo registrar un **banner principal** tanto para **la versión de desktop** como **para la versión móvil** de tu tienda online.

***

**Guía de tallas creativas**

Nuestro sistema de imágenes convertirá automáticamente tus imágenes al formato webp. Sin embargo, si no puedes subir la imagen, te recomendamos comprimirla manualmente antes de enviarla. Puedes usar un servicio en línea como tinypng.com.

1 - Plantilla de imagen **Desktop** (**1734 px x 500px**)

2 - Plantilla de imagen de **teléfono móvil** (**593 px x 630px**)

***

#### 1 - Inicia sesión con tu **nombre de usuario** y **contraseña** en **el panel** de administración de tu tienda . <a href="#id-1-entre-com-seu-login-e-senha-no-admin-de-sua-loja" id="id-1-entre-com-seu-login-e-senha-no-admin-de-sua-loja"></a>

<div data-full-width="true"><figure><img src="https://2892729283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGFWy3qnL2JMOrtbz6MW1%2Fuploads%2FfPbEzMvdg7IPC8R6k9P3%2Fimage.png?alt=media&amp;token=80f7cf58-5a31-4b4c-8ee4-4ca47ff0c46f" alt=""><figcaption></figcaption></figure></div>

* 2 - Navegue a **Design → Banners** en el menú principal.

<div data-full-width="true"><figure><img src="https://2892729283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGFWy3qnL2JMOrtbz6MW1%2Fuploads%2FkdRCcmVp7XthioolLOvb%2Fimage.png?alt=media&amp;token=eb3b635c-4def-46e7-b9b6-f49614a3ec2f" alt=""><figcaption></figcaption></figure></div>

* 3 - Seleccione el área del banner principal ( **Banner Home topo B2C** ) y haga clic en **Editar**.

<div data-full-width="true"><figure><img src="https://2892729283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGFWy3qnL2JMOrtbz6MW1%2Fuploads%2FImkzIV9WIMQE4KOx1dZK%2Fimage.png?alt=media&amp;token=66750e8d-cb5b-43b8-a5f6-23cfb0f9abe9" alt=""><figcaption></figcaption></figure></div>

#### 2 - Registra tu banner. <a href="#id-2-cadastre-seu-banner" id="id-2-cadastre-seu-banner"></a>

* 4 - Haga clic en **Imagen de escritorio** para agregar su nuevo banner ( **Escritorio** y **Móvil** ).

<div data-full-width="true"><figure><img src="https://2892729283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGFWy3qnL2JMOrtbz6MW1%2Fuploads%2FKzXFl94Bo86RnWkpCdRc%2Fimage.png?alt=media&amp;token=a114741c-6ab2-4848-9cec-9127d495dc18" alt=""><figcaption></figcaption></figure></div>

* 5 - En el **Administrador de archivos,** debes subir **ambas imágenes a la misma carpeta en el servidor** . Una para la \[ **versión de escritorio]** y otra para la \[ **versión móvil]** del mismo **banner,** y hacer clic en **Guardar.**

***

#### 3 - Actualizar la caché del banner <a href="#id-3-atualize-o-cache-dos-banners" id="id-3-atualize-o-cache-dos-banners"></a>

* ( **ATENCIÓN** ) → Después de realizar cambios en este módulo, debe actualizar la **caché del banner** de inicio de su tienda: - En la página de inicio de su **administrador** , busque el botón **Más acciones** en la esquina superior derecha y siga los pasos de la imagen a continuación.

<div data-full-width="true"><figure><img src="https://2892729283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGFWy3qnL2JMOrtbz6MW1%2Fuploads%2FteHclDt3F5YJeCHxLgFT%2Fimage.png?alt=media&amp;token=1a7c0289-408c-415b-913b-b30ae721d692" alt=""><figcaption></figcaption></figure></div>

* Marque la casilla \[ **Banners** ] , introduzca la **URL de su tienda** y haga clic en **Limpiar**.