Este artículo te guía para configurar el Personalization Studio de Gelato en tus temas de Shopify. Explica cómo activar las vistas previas en vivo de los productos, ocultar elementos de forma estratégica e integrar sin complicaciones un botón de edición en tus páginas de producto y del carrito, incluso si tu tema no es compatible de forma nativa.
Mostrar vistas previas de producto en vivo
Imagina que tus clientes ven cómo sus productos personalizados cobran vida ante sus propios ojos. Aquí tienes cómo hacerlo posible:
Inspeccionar para localizar
Abre las herramientas de desarrollador de tu navegador web (haz clic con el botón derecho en la página y selecciona "Inspeccionar" o "Inspeccionar elemento").
Usa la herramienta de selección de elementos (normalmente un icono de flecha) para elegir la zona exacta de la página de tu producto donde quieres que aparezca la vista previa en vivo.
Copia el nombre del selector. Este es el código que identifica el área seleccionada (p. ej., ".product-media").
Integra el Selector
Ve al panel de administración de Shopify y navega hasta la app Personalization Studio.
Busca la configuración de inserción de la aplicación.
Pega el nombre del selector copiado en el campo indicado para obtener vistas previas en tiempo real.
Guarda tu configuración.
Vive la magia
Actualiza la página de tu producto. ¡Voilà! Ahora deberías ver las previsualizaciones en vivo en acción.
Consejo: Para un targeting preciso, evita selectores genéricos como "col-2", "col-4" o "container". Opta por selectores específicos.
Oculta elementos sin complicaciones
Mantén una página de producto limpia y centrada ocultando los elementos innecesarios. Así es como hacerlo:
Inspecciona para elegir
Abre las herramientas para desarrolladores de tu navegador (clic derecho + inspeccionar).
Usa el selector de elementos para señalar el elemento que quieres ocultar.
Copia el nombre del selector de ese elemento específico.
Configura el Selector
Ve a la configuración de inserción de la app dentro de Personalization Studio.
Localiza la sección indicada para ocultar elementos.
Pega el nombre del selector copiado en el campo indicado.
Guarda tu configuración.
Sé testigo de la desaparición
Actualiza la página y el elemento seleccionado desaparecerá.
Mejora tu página del carrito con vistas previas personalizadas
Mejora la experiencia de compra mostrando vistas previas personalizadas de productos directamente en la página del carrito. Sigue estos pasos:
Inspecciona para identificar
Abre las herramientas de desarrollador de tu navegador y ve a la página del carrito.
Usa el selector de elementos para elegir el área donde quieres que aparezca la vista previa personalizada. Suele estar dentro del contenedor de imagen del artículo del carrito.
Copia el nombre del selector y asegúrate de apuntar al propio elemento de imagen para que la vista previa se muestre de forma óptima.
Configura el selector
Ve a la configuración de inserción de la app en Personalization Studio.
Pega el nombre del selector copiado en el campo indicado para las vistas previas de la página del carrito.
Guarda tus ajustes.
Vista previa en el carrito
Actualiza la página del carrito. Ahora deberías ver las vistas previas del producto personalizado dentro de los artículos del carrito, como recordatorio visual de sus elecciones personalizadas.
Consejo: Para obtener vistas previas personalizadas precisas, apunta específicamente a la imagen del carrito, no a todo el div. Te recomendamos apuntar a la etiqueta de imagen dentro del div cart-item, por ejemplo, ".cart-item img".
Potencia la edición con un botón de editar en la página del carrito
Dales a tus clientes la libertad de hacer cambios incluso después de añadir artículos a su carrito. Esta guía paso a paso te ayudará a añadir un botón "Editar" a tu página del carrito:
Inspeccionar y localizar
Abre las herramientas para desarrolladores de tu navegador y ve a la página del carrito.
Usa el selector de elementos para elegir la ubicación exacta donde quieres que aparezca el botón "Editar" en cada artículo del carrito.
Copia el nombre del selector. Puede que tengas que usar seudoselectores como :nth-child() para apuntar al elemento correcto dentro de una lista de artículos del carrito.
Integra el Selector
En la configuración de tu app Personalization Studio, busca la sección dedicada al botón de edición de la página del carrito.
Pega el nombre del selector copiado en el campo correspondiente.
Guarda tu configuración.
Actualizar y revisar
Actualiza la página del carrito. Ahora deberías ver el botón "Editar" colocado a la perfección, lo que permite a los clientes modificar sus productos personalizados sin salir del carrito.
Dominar los selectores para un targeting preciso
Piensa en los selectores como tus coordenadas de GPS en el mundo del desarrollo web. Así es como puedes usarlos de forma eficaz:
Entender "div:nth-child()" Esta combinación es clave para identificar elementos concretos dentro de un grupo. El selector ':nth-child()' te ayuda a apuntar a elementos hijos individuales anidados dentro de un elemento padre.
Identifica el elemento padre: Empieza por localizar el elemento padre que actúa como contenedor de los elementos hijos que quieres orientar. Por ejemplo, un div con la clase "cart-item" puede contener varios elementos hijos como imagen, título y precio.
Cuenta los elementos hijos: Una vez que hayas identificado al elemento padre, cuenta los elementos hijos que contiene. El número que uses dentro del selector ':nth-child()' corresponde a la posición del elemento hijo que quieres seleccionar. Por ejemplo, ':nth-child(2)' selecciona el segundo elemento hijo dentro del padre especificado.
Para ver la lista de temas compatibles de forma nativa con Personalization Studio, haz clic aquí.