Cómo vender fundas de móvil con foto personalizada en Shopify
Configura una funda de iPhone en Shopify: selector de modelo, colores, foto recortada a la funda, extras de texto e imagen y vista previa en vivo.
En resumen: Para vender fundas de móvil personalizadas con Podifai, reúne todos los modelos en un solo producto de Shopify. Un desplegable Model cambia la foto de la funda, la opción Design Type alterna entre una funda de color liso y una impresión de foto completa, y la foto del cliente se recorta al contorno exacto de la funda con una máscara de imagen. El texto y las ilustraciones pequeñas son extras de pago, con su propio color y fuente. Parte de la plantilla Custom iPhone 17 Phone Case; todas las funciones que se usan aquí están en el plan Free.
¿Qué ve el cliente?
- Haz clic en Customize para abrir la ventana del personalizador.
- Elige el modelo: iPhone 17, iPhone 17 Pro o iPhone 17 Pro Max. La vista previa cambia a esa funda.
- Elige Solid Color para escoger el color de la funda (Oat, Slate Blue o Graphite), o Custom Photo para imprimir tu propia foto en toda la funda.
- En una funda de color liso, si quieres, añade Text Only (+$1.00), Image Only (+$1.00) o Text & Image (+$1.50).
- Escribe hasta 20 caracteres y elige color y fuente del texto. La vista previa y el precio se actualizan sobre la marcha, y después añade al carrito.
Pruébalo tú mismo en el producto de la demo en vivo.
¿Qué necesitas antes de empezar?
1. Instala Podifai y activa el app embed
Instala Podifai desde la Shopify App Store, abre Online Store > Themes > Edit theme > App embeds y activa Podifai Customizer. Los embeds se guardan por tema, así que repite este paso si cambias de tema. Consulta Enable App Embed.
2. Crea un solo producto para todos los modelos
Añade un único producto de Shopify, por ejemplo "Custom iPhone 17 Case", con tu precio base ($19.99 en la demo). Los modelos y los diseños se configuran en Podifai, así que no necesitas decenas de variantes de Shopify.
3. Prepara tres tipos de imágenes
Necesitas una foto frontal de cada funda en blanco en cada color (mismo tamaño y ángulo), un PNG transparente con el contorno del área imprimible de cada modelo para la máscara y, si quieres, un diseño de ejemplo como marcador de posición. Exporta los contornos de la plantilla de impresión de tu proveedor, para que la foto recortada coincida con lo que realmente puedes imprimir. Consulta Image & Asset Requirements.
¿Los modelos de móvil deben ser variantes de Shopify u opciones de Podifai?
La demo mantiene el modelo, el color y el diseño en Podifai, así que un solo producto de Shopify cubre todas las combinaciones. Es la configuración más rápida, pero no sirve para todas las tiendas:
| Tu situación | Qué usar | Qué te aporta |
|---|---|---|
| Cada modelo y color es un artículo de stock aparte, con su propio SKU | Variantes de Shopify | Shopify controla el stock por SKU; Podifai solo añade la foto y el texto |
| Las fundas se imprimen bajo demanda a partir de unidades en blanco que no cuentas | Dropdown y Color Swatch de Podifai (como en la demo) | Un solo producto, sin límite de variantes, y la vista previa sigue cada elección |
| Tienes fundas en blanco en stock pero quieres una página de producto sencilla | Opciones de Podifai con Track inventory | Enlaza cada valor de modelo o color con una variante de Shopify, o define un Custom count |
Si usas variantes de Shopify para el color, ajusta el Background de la vista a Variant image para que la vista previa siga la variante seleccionada y no un swatch de color.
¿Cuál es la forma más rápida de configurarlo?
Podifai incluye una plantilla lista, Custom iPhone 17/17 Pro/17 Pro Max Phone Case, con las mismas 13 opciones que la demo. Abre Templates > Podifai Templates, búscala y haz clic en Copy to Product. En Choose a product, busca tu producto de funda y haz clic en Apply (u Override si ya tiene opciones de Podifai, que las reemplaza). La copia es única, así que los cambios posteriores en la plantilla no afectan a tu producto. Después, cambia las fotos de funda y los contornos de máscara por los tuyos, ajusta colores y precios, y guarda. Los pasos siguientes explican cada ajuste.
¿Qué opciones necesitas?
Todo el personalizador son 7 opciones de Podifai en un único producto de Shopify:
| Opción | Tipo de Podifai | Ajustes clave | Precio |
|---|---|---|---|
| Model | Dropdown | Un valor por modelo, cada uno con la foto de la funda en blanco; capa de vista previa en vivo a tamaño completo | Sin cargo |
| Design Type | Badge Group | Solid Color o Custom Photo | Sin cargo |
| Case Color (one per model) | Color Swatch | Código de color más una foto de funda por color; condición: ese modelo y Solid Color | Sin cargo |
| Upload Image (one per model) | Image Upload | Máscara con el contorno de la funda; condición: ese modelo y Custom Photo | Sin cargo |
| Customization | Badge Group | Blank, Text Only, Image Only, Text & Image; condición: Solid Color | +$1.00 a +$1.50 |
| Upload Image (artwork) | Image Upload | Zona pequeña para ilustraciones; condición: se elige una opción de imagen | Incluido arriba |
| Text, Text Color, Text Style | Text Input, Color Swatch, Font Swatch | 20 caracteres, color y fuente enlazados, ancho fijo con reducción | Incluido arriba |
Cómo configurarlo en Podifai, paso a paso
Estos pasos corresponden al producto de la demo en vivo. Los recuadros rojos marcan lo que hay que cambiar y los números siguen el orden del texto del paso.
Paso 1: Añade los tipos de opción
Abre el producto en el editor de Podifai y haz clic en el icono de menú de la izquierda. En Option Type, añade un Dropdown para el modelo, Badge Groups para el tipo de diseño y los extras, Color Swatches para los colores de la funda y del texto, Image Uploads para la foto y las ilustraciones del cliente, un Text Input y un Font Swatch. Añadirás un swatch de color de funda y una subida de foto por modelo, porque cada modelo tiene sus propias fotos y contorno.
Paso 2: Haz que el desplegable de modelo cambie la foto de la funda
Añade un valor de Dropdown por modelo y asigna a cada uno una foto de esa funda en blanco, para que el desplegable muestre una miniatura. Abre la pestaña Live Preview del desplegable, activa Live customizer y ajusta Width/height al 100%. La foto del modelo elegido llena ahora la vista previa.
- Exporta las fotos de todos los modelos con el mismo tamaño de lienzo, para que al cambiar de modelo no se mueva el diseño.
- Define tu modelo más vendido como Default option.
Paso 3: Muestra cada color de funda con una foto real
Añade un Color Swatch para los colores de funda de cada modelo ("iPhone 17 Case Color", etc.). Haz clic en un valor para abrir Edit option value, define el código de color del punto del swatch y sube la foto de la funda en ese color como Preview image. Con Live customizer activado al 100%, al elegir un color se cambia toda la foto de la funda, lo que resulta más realista que teñirla.
Paso 4: Muestra los campos correctos para cada modelo y diseño
En la subida de foto del iPhone 17, activa Condition, ajusta Show this when a All y añade dos reglas: Model contains iPhone 17 y Design Type contains Custom Photo. Repite para la subida y el swatch de color de cada modelo, usando Solid Color en los swatches. Los clientes solo verán el campo que corresponde a su móvil.
Paso 5: Recorta la foto al contorno de la funda
Abre la pestaña Live Preview de la subida. Activa Apply image mask/shape, haz clic en + PNG para subir el contorno de la funda de ese modelo y selecciónalo. La foto del cliente se recorta ahora al área imprimible, incluido el hueco de la cámara. Si quieres, activa Enable placeholder image y elige un patrón de ejemplo para que la funda no se vea vacía antes de subir nada.
- Usa un contorno por modelo; el bloque de cámara cambia entre iPhone 17, 17 Pro y 17 Pro Max.
- Deja algo de sangrado en tu archivo de impresión aunque la vista previa se recorte al ras.
- En Automatic image processing también puedes quitar el fondo o convertir las imágenes a blanco y negro al subirlas.
Paso 6: Cobra los extras de texto e ilustración
Añade un Badge Group llamado Customization con cuatro valores: Blank, Text Only, Image Only y Text & Image. Haz clic en un valor de pago para abrir Edit option value y ajusta Price adjustment a Increase by fixed amount ($1.00 o $1.50 en la demo). Dale la condición Design Type contains Solid Color, ya que una funda con foto completa no tiene espacio para más texto.
Paso 7: Enlaza el texto con su color y su fuente
Selecciona el Text Input y abre Live Preview. Ajusta Color a Link color swatch y elige Text Color, luego ajusta Font a Link font swatch y elige Text Style. Activa Fixed width (320px en la demo) con Shrink text, para que un nombre largo se reduzca hasta caber en la funda en lugar de salirse por el borde. Dale a los campos de texto, color y fuente la condición Customization contains Text Only o Text & Image.
- Antes de guardar, recorre todos los modelos con Solid Color y Custom Photo en la vista previa del editor: solo debe verse un swatch de color o una subida a la vez, y el precio de arriba debe cambiar con cada extra.
- Haz clic en Save y repite la misma comprobación en tu tienda publicada, en el ordenador y en el móvil.
¿Qué pasa en el carrito y después del pedido?
- El modelo, el tipo de diseño, el color de la funda, el extra, el texto, el color y la fuente se guardan en la línea del pedido como propiedades del artículo, visibles en Shopify Admin > Orders.
- El precio del extra se cobra en la misma línea, así que no hay productos ocultos de recargo que gestionar.
- La foto original del cliente y un enlace a la vista previa final se guardan con el pedido.
- Con Generate print-ready files activado, Podifai crea un PNG transparente del diseño en cada pedido. Compáralo con la plantilla de tu proveedor antes de imprimir.
Solución de problemas
Aparecen dos swatches de color o dos botones de subida
A uno de los campos por modelo le falta una regla. Abre cada swatch de color de funda y cada subida de foto y comprueba que Show this when esté en All y que estén las reglas de Model y de Design Type. Consulta Conditional Logic.
La foto se sale por la zona de la cámara o por los bordes
El contorno de la máscara no coincide con la foto de la funda. Exporta el contorno desde el mismo lienzo que la foto de la funda, con el mismo tamaño, y vuelve a seleccionarlo en Apply image mask/shape. Consulta Image masks.
El texto largo se sale de la funda
Activa Fixed width en Live Preview del Text Input y elige Shrink text, o reduce el límite de caracteres.
Consejos de venta
- Pide una foto de alta resolución. Añade una nota de ayuda bajo la subida, como "Use a photo at least 1500 px tall". Las fotos del móvil suelen servir; las capturas de pantalla y las imágenes de redes sociales, muchas veces no.
- Mantén sencillos los precios de los extras. Los recargos fijos pequeños, como +$1.00 por el texto, se aceptan con facilidad. Fija el precio base de la funda para cubrir la impresión y usa los extras solo para trabajo adicional.
- Confirma el modelo antes de imprimir. Los pedidos con el modelo equivocado son la devolución más habitual en fundas de móvil. Pon el modelo primero en el formulario y muéstralo en el correo de confirmación del pedido.
¿Qué más puedes vender con esta configuración?
El mismo selector de modelo, la misma máscara y la misma subida de foto sirven para cualquier producto con una forma imprimible fija:
- Fundas para Samsung y Pixel
- Estuches de AirPods y fundas de tableta
- Fundas y skins para portátil
- Posavasos y adornos con foto
- Placas para mascotas y llaveros con foto
Preguntas frecuentes
Sí. En Podifai, abre Templates > Podifai Templates, busca Custom iPhone 17/17 Pro/17 Pro Max Phone Case, haz clic en Copy to Product y aplícala a tu producto con Apply. Después sustituye las fotos de funda y los contornos por los tuyos.
Activa Apply image mask/shape en la pestaña Live Preview del Image Upload y sube con + PNG un contorno transparente de la funda. La foto se recorta a ese contorno en la vista previa.
Sí. Añade un Dropdown con un valor por modelo y usa condiciones para que cada modelo muestre sus propios colores y su propia subida. Usa variantes de Shopify si cada modelo tiene su propio SKU y stock.
Asigna a cada valor del Color Swatch una foto de la funda en ese color como Preview image y activa Live customizer con ancho y alto al 100%. Al elegir un color, cambia la foto de la funda.
Sí. Pon las opciones en un Badge Group y define un ajuste de precio fijo en los valores de pago. La demo cobra $1.00 por texto o ilustración y $1.50 por ambos.
Sí. En Automatic image processing del Image Upload, elige Remove background on upload. La imagen procesada se usa en la vista previa y en el archivo de producción.
Todas las funciones que se usan aquí, incluidas las máscaras de imagen y las condiciones, están en el plan Free, que cubre hasta 3 productos personalizados. Starter ($7.9/mes) cubre 30 productos y Growth ($15.9/mes) es ilimitado.
Más casos de uso de Podifai
- Cómo vender bandanas personalizadas con nombre bordado para perros en Shopify
- Cómo vender llaveros de cuero con monograma en Shopify
- Cómo vender letreros de neón personalizados en Shopify
- Cómo crear un configurador de pulseras con charms en Shopify
- Cómo vender sudaderas personalizadas con estampado delante, detrás y en las mangas en Shopify
- Cómo vender palas de pickleball personalizadas en Shopify
- Cómo vender invitaciones de boda personalizadas en Shopify
- Cómo vender bolígrafos personalizados con grabado de pago como extra en Shopify
- Cómo vender gorras trucker personalizadas en Shopify
Documentación relacionada (en inglés)
Crea este personalizador en tu tienda
Gratis para 3 productos personalizados. Empieza con la plantilla lista y cambia lo que necesites.
Instalar Podifai gratis