La función Mapa de calles te permite crear productos personalizados basados en mapas integrando Customix con Mapbox. Los clientes pueden escribir su propia ubicación y, si quieres, elegir entre tus estilos de mapa personalizados al diseñar el producto.

1. Conecta Customix a tu cuenta de Mapbox

Primero, inicia sesión en tu cuenta de Mapbox: https://console.mapbox.com/ y, en la sección Token, crea y copia un token público:

Ve a Ajustes → Servicios, busca Mapbox en Servicios disponibles e introduce tu token de acceso de Mapbox. Una vez conectado, la tarjeta muestra el estado Conectado en verde.

2. Guarda los estilos de mapa en tu biblioteca de recursos

Realiza este paso solo si quieres que los clientes puedan elegir entre varios estilos de mapa en la tienda. Sáltalo si solo necesitas un único estilo.

  • Ve a Recursos → Mapas.
  • Haz clic en Añadir mapa → Añadir carpeta, ponle nombre a la carpeta (por ejemplo, Map Styles) y ábrela.
  • Haz clic en Añadir mapa, y luego selecciona la opción Añadir mapa
  • En Mapbox Studio, abre el estilo que quieras → Share → Production → desplázate hasta Developer resources y copia la Style URL (mapbox://styles/...).
  • Pégala en el campo URL de estilo de mapa de Customix y haz clic en Guardar.

Repite el proceso con cada estilo que quieras ofrecer.

3. Añade el elemento Mapa de calles a una plantilla

  • Abre una plantilla y haz clic en el icono Elementos de la barra lateral izquierda.
  • Selecciona Mapa de calles. El elemento se añade al lienzo y sus ajustes aparecen a la derecha.
  • En Contenido, configura Ubicación inicial: escribe las coordenadas o haz clic en Seleccionar en el mapa.
  • En Estilo de mapa, elige un estilo predeterminado (Calles, Satélite, Exteriores, Claro, Oscuro) o selecciona Personalizado:

Si eliges Personalizado, vuelve a Mapbox Studio → abre el estilo → Share → copia la URL de Preview only (https://api.mapbox.com/styles/v1/...), pégala en el campo URL de estilo de mapa personalizado y haz clic en Aplicar estilo

4. Activa la personalización para los clientes

En la sección Personalización de los ajustes del Mapa de calles:

  • Personalizar con ubicación: marca esta casilla para que los clientes puedan buscar y seleccionar su propia dirección en la tienda. Puedes definir una Etiqueta (por ejemplo, Your address) y un Texto de ayuda opcional.
  • Personalizar con estilo de mapa: marca esta casilla para que los clientes puedan elegir entre varios estilos de mapa. En la ventana emergente que aparece, selecciona la carpeta que creaste en el paso 2 (por ejemplo, Map Styles) y haz clic en Listo

Guarda la plantilla. El elemento Mapa de calles ya está listo en tu tienda: los clientes pueden introducir su propia ubicación y, si lo has activado, elegir su estilo de mapa preferido:

5. Máscara del mapa de calles

Si quieres mostrar el mapa de calles con una forma personalizada, puedes usar la función Máscara. Una vez que subas una máscara, el mapa se adaptará automáticamente a la forma de la máscara subida.

Actualizado el: 23/09/2026