Producto de ejemplo: https://customix-demo-store.myshopify.com/products/jd002-god-says-i-am-name-letter-in-bible-toile-de-jouy-style-personalized-jewelry-dish
Paso 1: Preparar los recursos de diseño
Para activar la visualización dinámica de diseños según el número de caracteres, tienes que preparar dos conjuntos de recursos de diseño. Estos recursos determinan cómo se muestran los distintos diseños en función de los caracteres que introducen los clientes.
a. Imágenes del alfabeto grande (carácter principal)
Este conjunto de recursos controla el carácter grande principal que se muestra en el diseño.
Estructura del orden de los archivos:
- Archivo 1 → Imagen vacía (marcador de posición obligatorio)
- Archivos 2–27 → Letras minúsculas
a–z - Archivos 28–54 → Letras mayúsculas
A–Z - Archivos 55–64 → Números
0–9(opcional)
b. Carpetas de diseños de citas
Prepara 54 carpetas que correspondan a los 54 casos de caracteres, siguiendo la misma lógica que en la parte 1:
- 27 carpetas para las letras minúsculas
a–z - 27 carpetas para las letras mayúsculas
A–Z
Cada carpeta representa el diseño de la cita para un carácter concreto.
Paso 2: Añadir elementos a la plantilla
Una vez preparados todos los recursos de diseño, el siguiente paso es añadir estos elementos a una plantilla y configurar los diseños.
a. Subir los recursos a la biblioteca de recursos
- Sube todos los archivos y carpetas preparados a Recursos → Imágenes
- Asegúrate de que la estructura de carpetas (fondos, alfabetos, citas) se sube correctamente
b. Crear una plantilla de ejemplo
Crea una plantilla nueva y empieza a añadir elementos; el primero es el fondo, con 3 colores: azul, rojo y negro.
A continuación, añade 3 capas de alfabeto y luego cambia su tamaño y colócalas en la posición que quieras dentro del diseño.
Después, añade 3 capas de citas, que correspondan a los mismos 3 colores, y alinéalas y colócalas también en relación con las capas de alfabeto
c. Crear el diseño
Selecciona las 6 capas y haz clic en el icono Crear diseño para agruparlas en el Diseño 1.
Haz clic en el Diseño 1 y pulsa la combinación de teclas Ctrl + C and Ctrl + V para duplicarlo como Diseño 2 con la misma estructura
A continuación, despliega el Diseño 2 y selecciona las 6 capas correspondientes al primer carácter; usa también la combinación Ctrl + C and Ctrl + V para crear 6 capas adicionales para el segundo carácter, como se muestra en la imagen de referencia de abajo.
Guarda la plantilla para conservar la estructura actual antes de pasar al siguiente paso de configuración
Paso 3: Asignación y lógica del conjunto de opciones
En este paso configuraremos los conjuntos de opciones y la lógica para cambiar automáticamente los diseños, alfabetos y citas según el texto que introduzcan los clientes.
a. Añadir una opción de campo de texto
- Ve a Conjuntos de opciones → Añadir → Campo de texto
- Este campo servirá para que los clientes introduzcan su texto (por ejemplo, un nombre)
b. Activar las muestras basadas en caracteres
En los ajustes del campo de texto, activa Mostrar muestras por caracteres y asigna:
- Blue Alphabet → Carácter 1
- Blue Alphabet 2 → Carácter 2
c. Activar el cambio de diseño según la longitud del texto
Activa la función Mostrar muestras de diseño según la longitud del texto, que permite que los diseños se ajusten automáticamente según el número de caracteres que introduzca el cliente.
- Longitud del texto = 1 carácter → Mostrar Diseño 1
- Longitud del texto = 2 caracteres → Mostrar Diseño 2
d. Definir el Global ID para sincronizar los caracteres
Ahora tienes que definir el Global ID de todas las capas que se verán afectadas por el primer carácter que introduzcan los clientes:
- Blue Alphabet
- Black Alphabet
- Red Alphabet
- Blue Quotes
- Black Quotes
- Red Quotes
⚠️ No selecciones valores de opciones anidados dentro de los conjuntos de opciones de citas y define Global ID = 1
Cuando Blue Alphabet cambie al carácter A, todas las demás capas con Global ID = 1 cambiarán automáticamente al valor A correspondiente. Repite el mismo proceso para el segundo carácter.
e. Definir las condiciones de visualización según el color de fondo
Para que los colores coincidan correctamente, selecciona todas las capas Black (alfabeto + citas) y añade la condición: Mostrar solo cuando Background = Black
Repite la misma configuración con los caracteres rojos y azules. Así se garantiza que solo se muestren los recursos del color correcto según el fondo seleccionado.
f. Ocultar las opciones innecesarias
Resultado final
Cuando el cliente introduce 1 carácter (por ejemplo, c), solo se muestra el Diseño 1 y se muestran la cita y el alfabeto de la C
Cuando el cliente introduce 2 caracteres (por ejemplo, cd), se muestra el Diseño 2 y se muestran las citas y los alfabetos de la C y la D correspondientes.
Actualizado el: 18/08/2026