Cómo Añadir Vista Previa en Tiempo Real a Productos en Shopify (2026)

Por qué la vista previa en tiempo real importa

Tres razones, en orden de impacto sobre la conversión:

• Reduce el miedo del cliente. Cuando el cliente ve exactamente cómo quedará la taza con el nombre de su madre, la camiseta con el logo del equipo, o el cartel con el texto del local, deja de tener dudas. Las dudas matan conversiones.
• Baja las devoluciones. Los clientes que vieron antes de comprar reciben lo que esperan. Las devoluciones por "no era como lo imaginaba" caen significativamente cuando hay vista previa visual.
• Sube el AOV. Los clientes que diseñan su producto suelen aceptar tarifas adicionales (fuente premium, segunda cara, foto en alta calidad) que no aceptarían en un formulario plano sin previsualización.

El efecto compuesto: en productos personalizables, la vista previa en tiempo real es la diferencia entre una página de producto que convierte al 1–2% y una que convierte al 4–6%.

Paso 1: Instalar la app (~1 minuto)

1. Desde el admin de Shopify, ve a Apps → Shopify App Store.
2. Busca Print It My Way (u otra app personalizadora con canvas en vivo).
3. Haz clic en Instalar. Aprueba los permisos estándar de Shopify.
4. Aterrizarás en el admin de Print It My Way.

El plan gratuito cubre 1 personalizador + 1 conjunto de opciones + 10 asignaciones a productos. Es suficiente para probar el tutorial completo sin tarjeta de crédito.

Alternativas que siguen un flujo similar: Customily ($49/mes + tarifas por artículo según customily.com/pricing), Zakeke ($29.99/mes + 1.7–1.9% por artículo según zakeke.zendesk.com), Inkybay, Teeinblue. Ver nuestra comparativa de las 8 mejores apps si quieres comparar antes de instalar.

Paso 2: Crear el personalizador (~1 minuto)

1. En el admin de Print It My Way, haz clic en Crear Personalizador.
2. Dale un nombre descriptivo, por ejemplo "Taza personalizada" o "Camiseta con nombre".
3. Sube la imagen del producto que servirá como fondo del canvas. Idealmente 1200×1200 px o superior — las imágenes pequeñas se pixelan cuando el cliente hace zoom.
4. Define la zona de diseño: arrastra un rectángulo sobre la imagen marcando dónde aparecerá la personalización del cliente. Para una taza, la zona típica es un rectángulo en la cara frontal de la taza; para una camiseta, un rectángulo de ~12×16 cm centrado bajo el cuello.

La zona de diseño es donde el texto, logo o foto del cliente se renderizará durante la vista previa. Todo lo que esté fuera de la zona permanece intacto (la forma de la taza, el resto de la camiseta).

Paso 3: Añadir el campo de texto con vista previa (~1 minuto)

1. Dentro del personalizador, haz clic en Añadir campo → Área de Texto.
2. Etiqueta el campo: "Tu texto personalizado".
3. Establece el límite de caracteres — 20 caracteres es un buen valor por defecto para tazas y camisetas. Textos más largos se ven apretados en la zona de impresión.
4. Activa el selector de fuente. Para uso general, ofrece 35 fuentes balanceadas entre serif, sans-serif, script y display. Print It My Way incluye 35+ fuentes de Google Fonts.
5. Activa el selector de color. Añade 6–8 colores prácticos: negro, blanco, oro, plata, rojo, azul marino, azul royal, verde. Evita pasteles que se vean apagados sobre fondos oscuros.
6. Guarda. El cliente ya verá el texto renderizado sobre el producto mientras escribe.

Nota práctica: demasiadas fuentes paralizan al cliente. 35 fuentes agrupadas en 4 categorías es el equilibrio entre variedad y simplicidad. Más allá de 50 fuentes, la tasa de abandono del personalizador empieza a subir.

Paso 4: Añadir subida de imagen (~1 minuto, opcional)

Si quieres permitir que el cliente suba su propia foto, logo o diseño:

1. Haz clic en Añadir campo → Subida de Logo.
2. Etiqueta el campo: "Sube tu foto o logo (opcional)".
3. Tipos de archivo permitidos: PNG, JPG, SVG. PNG con transparencia es el estándar para impresión textil.
4. Tamaño máximo: 10 MB. Cubre fotos de móvil de alta resolución y archivos de diseño.
5. Activa la advertencia de DPI bajo: avisa al cliente si la imagen subida tiene menos de 150 DPI al tamaño de impresión. Las imágenes de baja resolución son la primera fuente de quejas por calidad.
6. Asigna el campo a la misma zona de diseño que el texto (o a una zona separada si quieres permitir texto y foto en diferentes partes del producto).

Los clientes en móvil podrán subir directamente desde la galería de su teléfono. El soporte para HEIC (formato por defecto del iPhone) es automático: el servidor convierte el archivo a JPG sin que el cliente tenga que hacer nada.

Paso 5: Configurar el precio (~30 segundos, opcional)

Si vas a cobrar por la personalización:

1. Abre la pestaña Precio dentro del personalizador.
2. Para "Texto personalizado", establece una tarifa fija de personalización (ejemplo: +$3.00 USD) o una tarifa por carácter (ejemplo: +$0.20 por carácter después de los 10 primeros).
3. Para "Subida de logo", añade una tarifa adicional (ejemplo: +$5.00 USD).
4. Para fuentes premium (Script o Display), activa una sobrecarga (ejemplo: +$2.00 USD si se selecciona una fuente del grupo premium).
5. Guarda. Cart Transform de Shopify se encarga de añadir las tarifas como líneas separadas y limpias en el carrito.

El cliente verá el desglose en su carrito:

Artículo	Precio
Taza personalizada — Café	$24.99
Personalización — Texto frontal "Feliz cumpleaños mamá"	$3.00
Fuente premium (Script)	$2.00
Subtotal	$29.99

Limpio, transparente, sin precios inflados ni variantes ocultas. Los códigos de descuento, impuestos y devoluciones funcionan correctamente línea por línea.

Paso 6: Elegir el diseño de presentación (~30 segundos)

Print It My Way ofrece tres diseños listos para usar:

• Popup: se abre en una ventana modal al pulsar "Personalizar". Útil para páginas de producto donde el personalizador no debe dominar la pantalla.
• Drawer (cajón lateral): se desliza desde la derecha. El diseño más común para personalizadores de productos visuales — mantiene la imagen del producto visible mientras el cliente personaliza.
• Pantalla completa: ocupa toda la pantalla. Bueno para productos de alto valor donde el cliente debe enfocarse en la personalización.

Para móvil, el cajón lateral y pantalla completa funcionan mejor que el popup (los popups en móvil son incómodos de cerrar).

Paso 7: Asignar al producto (~30 segundos)

1. Haz clic en Asignar a productos.
2. Selecciona el producto o productos donde quieras el personalizador.
3. Si tienes una colección entera de productos personalizables (50+ tazas con foto, por ejemplo), usa la asignación masiva por colección.
4. Guarda. El personalizador está activo.

Abre la página del producto en otra pestaña para verificar que el botón "Personalizar" o el canvas aparece correctamente.

Paso 8: Probar con un pedido borrador (~1 minuto)

Antes de lanzar a tus clientes reales:

1. Abre la página del producto en una ventana de incógnito.
2. Personaliza el producto: añade texto de prueba, elige una fuente, cambia el color. Verifica que la vista previa se actualiza en tiempo real.
3. Añade al carrito. Verifica que el carrito muestra las líneas correctas con los precios.
4. Desde el admin de Shopify, crea un pedido borrador con ese carrito y márcalo como pagado (sin procesar el pago real).
5. Revisa el pedido en el admin de Shopify — las propiedades de línea deben mostrar el texto, la fuente y los archivos subidos.
6. Si todo está correcto, publica. El personalizador está listo para clientes reales.

Problemas comunes y soluciones

"La vista previa no actualiza al escribir"

Causa típica: conflicto con el tema cuando el campo de texto está fuera del bloque de app. Solución: usa el bloque de app de Print It My Way dentro del editor de temas de Shopify; no edites Liquid manualmente.

"El canvas no carga en móvil"

Causa típica: la imagen del producto está cargada con loading="lazy" a un tamaño demasiado pequeño. Solución: usa imágenes de al menos 1200×1200 px y verifica que el bloque del personalizador esté visible en la primera pantalla móvil.

"Las fotos del iPhone no suben"

Causa: el archivo es HEIC (formato Apple) y el navegador móvil no lo previsualiza. Solución: Print It My Way convierte HEIC a JPG en el servidor automáticamente — el cliente solo necesita aceptar el permiso de cámara/galería cuando el navegador lo pide.

"Las tarifas no aparecen en el checkout"

Causa típica: Cart Transform deshabilitado o el tema antiguo no soporta el bloque. Solución: confirma que tu tema está en Online Store 2.0; verifica en el admin de la app que Cart Transform está activado.

Preguntas frecuentes