Este artículo ofrece soluciones a problemas comunes al usar Personalization Studio. Trata temas como solucionar fallos en la vista previa en tiempo real, resolver la ausencia de botones "Personalizar", corregir errores al añadir productos al carrito y entender los temas de Shopify compatibles. La guía incluye instrucciones paso a paso e información sobre limitaciones conocidas.
Guía de resolución de problemas para Personalization Studio
Compatibilidad del tema con Personalization Studio
Para disfrutar de una experiencia fluida con Personalization Studio, es clave usar un tema de Shopify compatible. Aquí tienes un resumen de la compatibilidad de temas:
Temas totalmente compatibles:
Craft, Dawn, Debut, Editorial, Minimal, Motion, Prestige, Simple, Spark, Streamline, Studio, Symmetry
Temas con compatibilidad parcial:
Estos temas generalmente admiten vistas previas, pero pueden presentar pequeñas distorsiones o un comportamiento inconsistente: Beyond, Brooklyn, Envy, Impulse, Parallax, Supply
Temas no compatibles:
Loft, almacén, enfoque
Solución de problemas con la vista previa en vivo
Si tienes problemas con la función de vista previa en tiempo real, sigue estos pasos:
Inspeccionar el selector correcto
Abre las herramientas para desarrolladores de tu navegador. Puedes hacerlo haciendo clic derecho en la página web y seleccionando "Inspeccionar" o "Inspeccionar elemento".
Usa la herramienta de selección de elementos (normalmente representada por un icono de flecha) para resaltar el área específica de tu página de producto donde debería mostrarse la vista previa en vivo.
Copia el nombre del selector. Es el código que identifica el área seleccionada (p. ej.,
.product-media).
Integrar el Selector en Personalization Studio
Accede a tu panel de administración de Shopify y ve a la app Personalization Studio.
Busca los ajustes de inserción de la app.
Pega el nombre del selector copiado en el campo indicado para obtener vistas previas en tiempo real.
Guarda los cambios que has hecho.
Si no encuentras .product-media u otros selectores similares, intenta inspeccionar áreas específicas como .product-gallery, .product-image-container o .product-page__media. La ubicación exacta puede variar según la estructura de tu tema.
Solución de problemas del botón "Personalizar"
Si el botón "Personalizar" no aparece o no responde como debería, prueba estas soluciones:
Añadir el selector de clase CSS btn-addtocart
Asegúrate de que tu botón "Add to Cart" incluya la clase btn-addtocart. Puedes encontrar instrucciones sobre cómo añadir esta clase consultando la documentación del tema de Shopify o contactando con el desarrollador de tu tema.
Verificar la Etiqueta de personalización de Gelato
Inspecciona el HTML de la descripción de tu producto para confirmar la presencia de la siguiente etiqueta: . Si esta etiqueta falta, vuelve a insertarla en el HTML de la descripción de tu producto para restaurar la funcionalidad.
Cómo resolver errores de "El carrito está vacío"
Si ves el mensaje "Tu carrito está vacío" después de hacer clic en "Añadir al carrito", asegúrate de haber seguido estos pasos:
Inicia sesión en tu panel de administración de Shopify.
Ve a "Online Store" en la sección de canales de ventas y selecciona "Themes".
Busca tu tema activo y haz clic en "Personalizar".
En el menú de la izquierda, abre la pestaña "App Embeds".
En "App Embeds", activa el Gelato Personalizer.
Guarda los cambios que has hecho.
Para que la pestaña "Personalizar" sea visible, actualiza cada uno de tus productos. Abre cada producto en tu Panel de administración de Shopify y haz clic en "Guardar" para volver a publicarlo. En los productos nuevos, las actualizaciones en tiempo real se activarán automáticamente.
Preguntas frecuentes
¿Por qué la vista previa en vivo funciona solo en una foto del producto?
Es una limitación conocida. Por ahora, la vista previa en vivo solo admite una imagen a la vez. No obstante, ya hemos compartido tus comentarios con el equipo de desarrollo para posibles mejoras en el futuro.
¿Qué pasa si el botón "Personalizar" desaparece después de actualizar mi tema?
Si el botón "Personalizar" desaparece después de una actualización del tema, vuelve a comprobar la clase btn-addtocart y la etiqueta de personalización de Gelato en tu HTML. Actualizar estos elementos suele ayudar a resolver el problema.