Elemento de campo personalizado del producto

¿Qué es el elemento de campo personalizado de producto?

El Elemento de campo personalizado de producto Es una herramienta flexible que permite obtener información adicional de los clientes al comprar un producto. Según sus necesidades, puede mostrar diferentes tipos de campos, como cuadros de texto, casillas de verificación, menús desplegables o botones de opción, para recopilar información específica.

Algunos ejemplos son:

• Recopilación de notas personalizadas o grabado de texto.
• Solicitar instrucciones de entrega a los clientes.
• Ofreciendo opciones de personalización (color, tamaño, embalaje).
• Capturar información que no está cubierta por las opciones de producto predeterminadas de Shopify.

Todos los datos recopilados a través de los campos personalizados del producto se adjuntarán al pedido y se mostrarán en su Administración de Shopify > Pedidos Una vez confirmado el pedido.

Cómo agregar un campo personalizado de producto

Nota: Puesto que el Campo personalizado del producto es un elemento secundario del módulo Módulo de Producto, siempre debe colocarse dentro de un módulo Producto para que funcione correctamente.

Siga estos pasos:

Paso 1En el Panel de Control de GemPages, seleccione la página en la que desea trabajar e ingrese al Editor.

Paso 2: Si no tienes un Módulo de Producto, arrastra y suelta uno en tu página.

Paso 3:Arrastre y suelte el elemento de campo personalizado dentro del módulo Producto, en el lugar que prefiera.

Una vez añadido, haga clic en el elemento para abrirlo. panel de Configuración En la barra lateral izquierda. Este panel contiene dos pestañas: Configuración y Avanzado:

Configurar la Pestaña de Configuración

1. Escribe

Elija el estilo de entrada. Puede elegir entre:

• Texto:Entrada de una sola línea para notas breves.
• Área de texto:Cuadro de varias líneas para comentarios más largos.
• Correo electrónico:Campo de entrada formateado para direcciones de correo electrónico.
• Casilla de verificación:Permite a los clientes seleccionar múltiples opciones.
• Boton de radio:Los clientes solo pueden seleccionar una opción de un grupo.
• Menú Desplegable:Un cuadro de selección compacto para opciones de elección única.
• Oculto:Invisible para los clientes, pero aún así envía un valor predefinido con el pedido.

2. Fuente de Producto

Muestra a qué producto pertenece el campo personalizado. Para cambiarlo, abra el Selector de Producto en el módulo Producto.

3. Gestión de opciones

Disponible para Casilla de verificación, radio y menú desplegable Tipos. Aquí puedes:

• Agregar o quitar opciones.
• Editar etiquetas de opciones.
• Reordenar las opciones para controlar la secuencia de visualización.

4. Tamaño

(No disponible para el tipo Oculto)

• Ancho: De forma predeterminada, los campos abarcan el 100 % del contenedor. Puedes cambiar a Ajustar contenido (automático) si lo prefiere.
• Altura: El valor predeterminado es automático. Ajuste el tamaño del campo de entrada si desea un tamaño mayor.
• Espacio entre iconos y texto: Controla el espaciado entre el ícono y el texto en diseños de casillas de verificación o de radio.

5. Fondo

(No disponible para el tipo Oculto)
Establezca un color o patrón de fondo para su campo de entrada.

6. Forma

(No disponible para el tipo Oculto)
Estas configuraciones controlan la forma general y el estilo del campo de entrada:

• Borde: Ajuste el grosor del borde, el estilo (sólido, discontinuo, punteado) y el color.
• Esquina: Establezca el radio del borde.
• Sombra: Aplique sombras paralelas para agregar profundidad y hacer que el campo se destaque.

7. Estilo de texto de entrada

Disponible para Texto, área de texto y correo electrónico tipos. Las opciones incluyen:

• Marcador de posición: Texto predeterminado que se muestra antes de la entrada.
• Fuente: Elija entre las fuentes disponibles o aplique una fuente personalizada.
• Tamaño, color y peso: Ajuste la tipografía para facilitar la legibilidad y la marca.
• Altura de línea y espaciado entre letras: Ajustar el espaciado del texto.
• Transformación de texto: Convierte texto a mayúsculas, minúsculas o mayúsculas.

Para los campos de casilla de verificación, opción y menú desplegable, esta sección personaliza las etiquetas de las opciones.

8. Etiqueta

(No disponible para el tipo Oculto)
Mostrar u ocultar la etiqueta del campo. Puedes personalizar:

• Texto de contenido.
• Fuente, tamaño, color, peso.
• Espaciado y transformación de texto.

9. Efecto de desplazamiento

Controla cómo se ve el campo cuando pasas el cursor sobre él:

• Color de fondo.
• Color de texto.
• Estilo de borde.
• Radio de esquina.
• Oscuridad.

10. Efecto de enfoque

Personaliza el estilo cuando un campo está activo o seleccionado:

• Fondo.
• Color de texto.
• Frontera.
• Radio de esquina.
• Sombra

11. Configuración

• Nombre del campo: Asigna un identificador para la referencia del backend.
• Obligatorio:Active este interruptor para evitar que los usuarios omitan esta información.
• Solo numero:Habilite esta opción para permitir exclusivamente entradas de números.
• Min/Max carácter(es):Utilice el control deslizante para ajustar los caracteres mínimos y máximos permitidos según lo desee.

12. Mensaje de error

Ingrese un mensaje de error personalizado para entradas no válidas o campos obligatorios faltantes.

13. Alineación

Alinee el campo a la izquierda, al centro o a la derecha dentro del contenedor.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.