Page History

...

Contruir mapas de imágenes

Image mapping consists of assigning multiple clickable zones to an image so that different product pages can be opened by clicking on one single image. This feature makes your site very attractive by easing your customers' navigation.

Before creating an image map, you must have an image which features variations of a product, or different products altogether.

Clicking on the "Image Mapping" menu option takes you to a new page, which lists the currently-registered image maps, if any.

To create a new map, click on the "Add new image map" button. You are taken to the creation screen.

• Image map name. Enter a name for the image map.
• Status. Whether the image map is available or not. You can choose to delay its availability until you are done settings all the links.
• Image to be mapped. Select the image that you want to represent the image map, then click "Save and stay". The page will then reload, with the photo that you uploaded and many more options.

Now we are going to learn how to set up an image map. Click anywhere on your image and drag your mouse over one of the products presented, in order to highlight/cut out the part of the image you want to be clickable to the user.

Image Removed

Your selection will be clear and illuminated while the rest of the image will darken. Pay attention to carefully align the frame of your selection with the zone onto which your customer will be able to click.

Once this is done:

1. In the field just underneath the image, type the first few letters of the product associated with your selected zone.
   In our example, we would type "dress" and several choices would appear. We would then choose "Printed dress".
2. Confirm your choice by clicking "OK". Your image map is now created.

Repeat this process for all of the products on this image that you wish to make accessible with a click.

Finally, you must assign your Image Map to a category. This is done by checking the boxes on the "Categories" table.

Once all of the modifications have been done, save all of your settings.

...

Los mapas de imágenes son muy útiles para dividir una imagen en diferentes regiones, las cuales podrán ser abiertas al hacer clic sobre ellas. Con esto puede lograr que diferentes páginas de productos puedan abrirse haciendo clic sobre esta única imagen. Esta característica hace que su sitio sea muy atractivo y facilite la navegación a sus clientes.

Antes de crear un mapa de imagen, debe tener una imagen que cuente con variaciones de un producto, o diferentes productos en conjunto.

Al hacer clic en la opción de menú "Mapas de imágenes" será redireccionado a una nueva página, la cual muestra una lista de los mapas de imágenes registrados actualmente, si hubiese alguno creado.

Para crear un nuevo mapa, haga clic en el botón "Añadir nuevo". A continuación aparecerá la pantalla de creación.

• Nombre del mapa de imagen. Introduzca un nombre para el mapa de imagen.
• Estado. Si el mapa de imagen está disponible o no. Puede optar por aplazar su disponibilidad hasta que haya terminado la configuración a todos los enlaces.
• Imagen para el mapa. Seleccione la imagen que desea que represente al mapa de imagen, a continuación haga clic en "Guardar y permanecer". La página actual será recargada, con la imágen que ha subido, y muchas más opciones.

Ahora vamos a aprender a crear un mapa de imagen. Haga clic en cualquier parte de la imagen y arrastre el ratón sobre uno de los productos presentados, con el fin de resaltar/cortar la parte de la imagen que quiere que sea clickable por el usuario.

Image Added

Su selección pasará a ser clara y luminosa, mientras que el resto de la imagen se oscurecerá. Preste atención y alinee cuidadosamente el marco de la selección con la zona en la que el cliente podrá hacer clic.

Una vez realizado esto:

1. En el campo justo debajo de la imagen, escriba las primeras letras del producto asociado con la zona seleccionada.
   En nuestro ejemplo, podríamos escribir "vestido" y nos aparecerían varias opciones. A continuación podríamos seleccionar el producto "Vestido estampado".
2. Confirme su selección haciendo clic en "Aceptar". Su mapa de imagen habrá sido creado.

Repita este proceso para todos los productos de esta imagen que desea que sean accesibles con un clic.

Por último, debe asignar el mapa de imagen a una categoría. Esto se hace marcando las casillas de la tabla de "Categorías".

Una vez realizadas todas las modificaciones, guarde todos sus cambios.

Su mapa de imagen estará ahora disponible en su tienda, en las categorías seleccionadas.