Configuración de la tienda
Añade el botón Diseñar ahora a tus páginas de producto y activa la edición desde el carrito con bloques de aplicación de tema de Shopify, sin tocar código.
Customezo se instala en tu tienda como bloques de aplicación de tema. No se inyecta nada en el código de tu tema, no queda nada si desinstalas la aplicación y puedes activar o desactivar cada pieza desde el editor de temas de Shopify.
Hay dos piezas:
| Pieza | Dónde va | Qué hace |
|---|---|---|
| Botón Diseñar ahora | En la plantilla de producto, como bloque | Abre el diseñador de ese producto. |
| Customezo Cart UX | Incrustación de aplicación (en todo el sitio) | Añade los enlaces Editar diseño y Vista previa a las líneas del carrito. |
Añade el botón Diseñar ahora
- En el panel de control de Shopify, ve a Tienda online → Temas y pulsa Personalizar en tu tema publicado.
- En el selector superior, cambia a una plantilla Productos → Producto predeterminado (o a la plantilla concreta que usan tus productos personalizables).
- En el panel izquierdo, dentro de la sección de información del producto, pulsa Añadir bloque y elige Diseñar ahora en el grupo de aplicaciones de Customezo.
- Arrástralo a su sitio: justo encima o debajo del botón Añadir al carrito es lo que mejor funciona.
- Pulsa Guardar.
El botón solo aparece en los productos que tienen el diseñador activado en Customezo, así que puedes añadirlo sin problema a una plantilla que compartan todos los productos.
Ajustes del botón
| Ajuste | Qué hace |
|---|---|
| Texto del botón | La etiqueta que ven los compradores. Déjalo vacío para usar el texto predeterminado, que se traduce automáticamente. |
| Estilo del botón | Relleno o Contorno. |
| Color de fondo / Color del texto | Cambia los colores para que combinen con tu tema. |
| Tamaño de fuente | 12–24 px. |
| Radio del borde | 0–30 px. |
| Mostrar icono | Muestra un pequeño icono de diseño delante de la etiqueta. |
| Ancho completo | Estira el botón hasta el ancho del formulario del producto. |
| Alineación | Izquierda, centro o derecha cuando el botón no ocupa el ancho completo. |
| Abrir la herramienta de diseño en | Abre el diseñador en la misma pestaña o en una pestaña nueva. |
Que combine con tu tema
Usa como color de fondo el color del botón principal de tu tema y el mismo radio que tu botón Añadir al carrito. El estilo del diseñador se configura por separado: consulta Marca del diseñador.
Activa Customezo Cart UX
- Sin salir del editor de temas, abre la pestaña Incrustaciones de aplicaciones del panel izquierdo.
- Activa Customezo Cart UX.
- Pulsa Guardar.
Esta incrustación detecta las líneas personalizadas de tu carrito y añade los enlaces que necesitan tus compradores.
Ajustes de Cart UX
| Ajuste | Qué hace |
|---|---|
| Editar diseño | Muestra un enlace Editar diseño en los artículos personalizados del carrito para que los compradores puedan reabrir el diseñador. |
| Etiqueta del botón | Un texto propio para ese enlace. |
| Etiqueta de la insignia de bloqueo | El texto que se muestra cuando el diseño ya no se puede editar, por ejemplo cuando ha empezado la producción. |
| Enlace de vista previa del diseño | Muestra un enlace que abre la vista previa a tamaño completo del diseño del cliente. |
| Etiqueta del enlace de vista previa | Un texto propio para el enlace de vista previa. |
| ID de secciones del carrito (avanzado) | Solo hace falta si tu tema usa nombres de sección del carrito no estándar y los enlaces no aparecen. |
| Analíticas | Envía eventos de interacción anónimos para que las estadísticas de tu panel sean exactas. |
Comprueba que todo está activo
De vuelta en Customezo, el panel muestra una tarjeta Estado del tema:
- Tema: el tema publicado que Customezo ha revisado.
- Botón de diseño: detectado o no detectado.
- Cart UX: detectado o no detectado.
- Volver a comprobar: vuelve a ejecutar la detección después de guardar cambios en el tema.
Plantillas Liquid antiguas
Si tu página de producto usa una plantilla Liquid antigua en lugar de una plantilla JSON, Shopify no ofrece información suficiente para la detección automática. Añade el bloque como siempre y después marca el paso de configuración con Lo he instalado. Si más adelante la detección funciona, sustituye automáticamente tu confirmación manual.
Cómo probarlo
- Abre en tu tienda un producto que tenga el diseñador activado.
- El botón Diseñar ahora debería aparecer donde lo colocaste.
- Diseña algo, añádelo al carrito y comprueba que los enlaces Editar diseño y Vista previa aparecen en la línea del carrito.
- Reabre el diseño desde el carrito, cambia algo y actualiza el carrito: la línea y su precio deberían actualizarse.
Resolución de problemas
El botón no aparece.
- Comprueba que el diseñador está activado para ese producto en Customezo (Productos → el producto → Activar herramienta de diseño).
- Comprueba que el estado del producto es Activo y que el producto está publicado en el canal de ventas Tienda online.
- Comprueba que añadiste el bloque a la plantilla que usa realmente ese producto.
- Pulsa Volver a comprobar en la tarjeta Estado del tema del panel.
El botón aparece en productos que no deberían tenerlo. El bloque se oculta solo en los productos sin configuración de diseñador. Si aun así aparece, lo más probable es que el producto tenga el diseñador activado: desactívalo en la página del producto en Customezo.
No aparecen los enlaces del carrito. Comprueba que la incrustación de aplicación está activada y guardada. Si tu tema muestra el carrito con nombres de sección personalizados, indícalos en el ajuste ID de secciones del carrito.
El estilo no encaja. Ajusta los colores, el radio y el ancho completo en los ajustes del bloque en lugar de añadir CSS. Si tu tema sobrescribe los estilos de los botones de forma global, cambia el bloque a Contorno y define los colores explícitamente.
Más soluciones: Resolución de problemas.