> 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/producto/imagenes.md).

# Imágenes

Registra las imágenes de tus productos en el portal.

Es hora de hablar de las imágenes de nuestros productos.

En este listado, podemos ver que hay una animación: al mover el ratón, la imagen cambia. Este cambio es perceptible e indica que el cursor está sobre el producto, además de mostrar otra vista del mismo.

<figure><img src="https://wiki.spiritshop.com.br/bridgestone-br-adm/~gitbook/image?url=https%3A%2F%2F2909013334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F97qx69MNSxJKLPcQgomI%252Fuploads%252FtMRxdcNVDxbEeYse0cx1%252Fimage.png%3Falt%3Dmedia%26token%3D24e50b68-e265-434f-b1d4-0bd5db924c64&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=16328ee9&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Ahora, accedamos al producto. Al entrar, vemos la foto principal y las fotos adicionales.

<figure><img src="https://wiki.spiritshop.com.br/bridgestone-br-adm/~gitbook/image?url=https%3A%2F%2F2909013334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F97qx69MNSxJKLPcQgomI%252Fuploads%252FruuGzOoMHJ89EXFwwN1b%252Fimage.png%3Falt%3Dmedia%26token%3Db438561f-2e1d-4738-83e9-b40719fe35c1&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=225c0be0&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Aprendamos cómo registrar estas imágenes en el catálogo de productos. Tenemos la **pestaña Imágenes;** al acceder a ella, se muestran todas las fotos vinculadas a este producto.

<figure><img src="https://wiki.spiritshop.com.br/bridgestone-br-adm/~gitbook/image?url=https%3A%2F%2F2909013334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F97qx69MNSxJKLPcQgomI%252Fuploads%252FrJOTAefahlEfUa3ByKW8%252FCaptura%2520de%2520Tela%25202025-12-08%2520a%25CC%2580s%252016.24.53.png%3Falt%3Dmedia%26token%3Def4029ba-be8b-4835-8779-dd5c2415ddf0&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=af53b50b&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Podemos observar que hay algunas fotos adicionales. Estas imágenes son las responsables de la animación que vimos anteriormente en la lista.

<figure><img src="https://wiki.spiritshop.com.br/bridgestone-br-adm/~gitbook/image?url=https%3A%2F%2F2909013334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F97qx69MNSxJKLPcQgomI%252Fuploads%252FEFXJMrbb0mRuGDhWrgGF%252Fimage.png%3Falt%3Dmedia%26token%3D99abd696-2883-42ae-a517-e05e636156dd&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=bf2ade2a&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Observe que están marcadas como **imágenes aleatorias** .

Es necesario vincularlos dos veces, ya que son los que aparecen en nuestro catálogo, realizando ese intercambio visual.

Dentro del producto:

* Esta es la **foto principal** .
* Y estas son las **dos fotos adicionales** .

La foto principal se muestra en todo el sistema: se redimensiona para aparecer en el carrito de compra, en la factura y sirve de base para todas las visualizaciones de productos. Es importante destacar esto.

Ahora, aprendamos cómo **agregar una imagen adicional** . Esta imagen no tendrá el mismo peso que las marcadas como aleatorias en la lista. Recuerda: al agregar un producto por primera vez, **no es necesario marcar las imágenes como adicionales** , solo las aleatorias. El sistema identifica automáticamente cuáles son las imágenes adicionales y cuál es la principal.

También podemos **invertir la posición de la imagen en la portada** : basta con mantener pulsada la celda deseada y arrastrar. El cambio se aplicará en cuanto guardemos.

Ahora, aprendamos cómo **agregar una imagen destacada** . Esta imagen modificará ligeramente el diseño del producto.

Antes de insertarlo, revisemos el producto: al acceder a él, vemos la imagen principal, las imágenes adicionales y ninguna otra imagen en el cuerpo, ¿correcto?

Vamos a insertar una nueva imagen. Seleccionamos la imagen en el ordenador, accedemos al **panel de administración** y la arrastramos al grupo. Ahora marcamos esta nueva imagen como **destacada** y guardamos los cambios.

Nuestro portal utiliza un **sistema de almacenamiento en caché** ; aún no hemos hablado de él, pero ahora vamos a aprender a usarlo.

Seleccionamos la **URL** del producto , accedimos al **panel de administración** , pulsamos el botón para **actualizar la caché** , pegamos la URL seleccionada, volvimos al producto, recuperamos el **SKU** y lo vinculamos al campo "ID del producto". Después, lo actualizamos.

Al realizar este proceso, borramos la caché del producto y necesitamos actualizar la página.

Ahora, veamos la actualización: las imágenes siguen siendo las mismas, ¡y aquí está la **nueva imagen destacada** ! Observen que no aparece con las imágenes adicionales; se mostró en una ubicación específica porque seleccionamos esa opción en el panel de administración.

Al volver al registro, accedemos de nuevo a la pestaña de imágenes y vemos que está marcada como **imagen destacada** , a diferencia de las imágenes adicionales.

Con esto, concluimos esta etapa del producto. Estas son las opciones para **categorizar las imágenes según las necesidades de diseño** de tu maquetación.