Inicia sesión en la administración de tu tienda y, en el menú lateral izquierdo, haz clic en "Extensiones" > "Tienda". Escribe en el campo de búsqueda de arriba el nombre de nuestra app, en este caso "Animated Hotspots (Cloud)". La app aparecerá en un recuadro debajo del filtro de categorías, en la pestaña "Apps". Haz clic en el recuadro para ver la descripción detallada de la app. En esa vista, haz clic en el botón azul "Añadir extensión" arriba a la derecha. Se abrirá una ventana en la que tienes que marcar las casillas para poder añadir la extensión a tu tienda con el botón "Añadir extensión de forma gratuita".
Cuando hayas añadido la app desde la tienda, ya puedes instalarla. Para ello, haz clic en "Extensiones" > "Mis extensiones" en el menú lateral izquierdo de la administración. Ahora puedes instalar la app en tu tienda con el enlace "Instalar app".
A continuación te explicamos cómo configurar la app después de instalarla.
Cuando hayas instalado la app, actívala en la administración, en "Extensiones" > "Mis extensiones", pestaña "Apps", con el interruptor a la izquierda del nombre de la app. Cuando la app está activa, el interruptor se vuelve azul.
Para añadir imágenes con marcadores a tu tienda, ve en la administración a "Contenidos" > "Mundos de experiencias" y abre la Shopping Experience en la que deben aparecer los marcadores. Arrastra el bloque "Animated Hotspots" a la Shopping Experience. Lo encontrarás en la categoría "Texto e imagen". Al pasar el ratón por encima del elemento aparece un icono de ajustes; haz clic en él para editar el elemento.
En las opciones del elemento, elige la imagen en la que deben aparecer los marcadores. Para que se vea bien, te recomendamos una resolución de 1920 x 960 píxeles. Lo ideal es comprimirla antes de subirla. Guarda los ajustes con el botón "Terminado".
Sobre la imagen verás entonces una cuadrícula. Con ella decides en qué posición de la imagen aparece cada marcador. Apunta las posiciones que quieras, p. ej. "marcador 1, posición G3" o "marcador 2, posición C21". Cada posición se compone de una letra para la fila (A-T) y un número para la columna (1-32). Si quieres, por ejemplo, que el marcador 1 aparezca en la esquina inferior izquierda de la imagen, apunta la fila "T" y la columna "1". Más adelante introducirás estas posiciones en la configuración de la app. Para terminar, guarda la Shopping Experience.
Cuando hayas elegido la imagen, configura la app en la administración, en "Extensiones" > "Mis extensiones". Abre el menú contextual de la app con el botón de los tres puntos ("…") junto al nombre de la app y haz clic en "Configuración".
Ahí encontrarás las opciones de los marcadores animados: los textos, la posición de cada marcador y otros ajustes. Como en el paso 3, la posición se compone de una letra para la fila (A-T) y un número para la columna (1-32). Si quieres, por ejemplo, que el marcador aparezca en la esquina inferior izquierda de la imagen, elige la letra "T" para la fila y el número "1" para la columna. Cuando lo tengas todo listo, haz clic en "Guardar".
Como ciertas combinaciones de tema, apps y configuración de la tienda pueden afectar al funcionamiento de la app, te recomendamos comprobar después que los marcadores funcionan en tu tienda como quieres.
Elige una imagen de tus carpetas de medios o sube una nueva. Para que se vea bien, te recomendamos una resolución de 1920 x 960 píxeles. Lo ideal es comprimir la imagen antes de subirla.
Elige entre 3 diseños para los marcadores.
El contenido que se muestra en cada marcador.
Elige en qué posiciones de la imagen aparecen los marcadores. La posición se define con nuestra cuadrícula de filas y columnas.
Puedes dar a los marcadores el color que quieras.