# Imágenes 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.
Ahora, accedamos al producto. Al entrar, vemos la foto principal y las fotos adicionales.
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.
Podemos observar que hay algunas fotos adicionales. Estas imágenes son las responsables de la animación que vimos anteriormente en la lista.
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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wiki.spiritshop.com.br/portal-bridgestone-b2c/producto/imagenes.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.