Elemento Variantes y Muestras del Producto

Acerca del elemento Variantes y muestras del producto

A diferencia de la versión anterior del Editor, Editor v7 cuenta con un único elemento llamado Variantes y Muestras (P) para mostrar diversas opciones de un producto, como el tamaño, el color, los materiales, etc., con el fin de aumentar su tasa de conversión.

En GemPages V7, el elemento Variantes y Muestras de Producto le permite mostrar todas las opciones de variantes de productos en una única interfaz personalizable, desde menús desplegables hasta muestras de colores y miniaturas de imágenes.

Casos de uso frecuentes:

• Permitir a los clientes elegir el tamaño, el color o el material.
• Mostrar visualmente el estado de “agotado”.
• Utilizar imágenes de variantes o cargar imágenes de muestras personalizadas.

Cómo agregar variantes de productos en Shopify

Antes de mostrar variantes en el Elemento Variantes y muestras de producto, primero debes crear esas variantes en la configuración de tu producto de Shopify.

Siga estos pasos para agregar variantes de producto en Shopify:

Paso 1: Desde su administración de Shopify, vaya a la Productos.

Paso 2: Haga clic en el producto donde desea agregar variantes.

Paso 3: Desplácese hasta la sección variantes sección y clic + Agregar opciones como tamaño o color.

Paso 4: Escriba el nombre de la opción (por ejemplo: Tamaño, Color, Material).

Paso 5: Agregar el formulario valores de las opciones.

Ejemplo:

• Tamaño: S, M, L, XL
• Color: Rojo, Negro, Verde

Paso 6: Haga clic en Terminado, entonces Shopify generará automáticamente todas las combinaciones de variantes.

Paso 7: Configure detalles de variantes adicionales como:

• Precio
• (SKU)
• Inventario
• Imagen variante
• Disponibilidad

Paso 8: Haga clic en guarde.

Una vez creadas las variantes, aparecerán automáticamente dentro del Elemento Variantes y Muestras de Producto en GemPages, permitiendo a los clientes seleccionar diferentes opciones de productos en su página de producto.

¿Cómo agregar un elemento de variante de producto y muestras a su página?

Siga estos pasos para añadir un Variantes y Muestras del Producto a su página creada con GemPages.

Paso 1: Desde la Administración de Shopify, vaya a la aplicación GemPages > Páginas. Haga clic en la página de destino para entrar en el editor.

Paso 2: En la barra lateral izquierda, utilice la barra de búsqueda para encontrar los elementos Variantes y  Muestras del Producto (Product Variants & Swatches). A continuación, arrastre y suelte el elemento dentro de un Elemento Producto.

Paso 3: Haga clic en el elemento para abrir su configuración.

Configurar la pestaña Configuración

Desde aquí, puede configurar los ajustes del elemento, incluyendo:

Fuente del producto

Si ha asignado un producto a esta plantilla, este producto se sincronizará automáticamente como Fuente del producto.

Si desea asignar otro producto, coloque el cursor sobre el producto actual y haga clic en la flecha derecha para entrar a la configuración del Elemento Producto, donde podrá elegir el producto que prefiera.

Haga clic en el botón lápiz para editar la fuente del producto. Desde aquí, puede seleccionar manualmente su producto preferido.

Tipo

Puede seleccionar entre dos opciones:

• Combinado: Todas las variantes se consolidarán en un único menú desplegable.

• Separado: Las variantes se organizarán en categorías distintas.

Varias de las siguientes configuraciones se modificarán según el tipo que seleccione aquí.

• Si establece el Tipo a Combinado, haga clic aquí para obtener más información.
• Si establece el Tipo a Separado, haga clic aquí para obtener instrucciones detalladas.

#1. Tipo: Combinado

Si establece el Tipo a Combinado, continúe configurando cómo se muestran las opciones de variantes para su producto.

Estilo de Texto

El Estilo del Texto le permite controlar el aspecto del texto de las variantes de sus productos, lo que le ayuda a mantener la coherencia con el diseño de su marca.

• Estilos: Elija un estilo de texto predefinido, como Encabezado o Párrafo, para mantener la coherencia tipográfica con el resto de su tienda.
• Fuente: Seleccione una fuente en el menú desplegable o utilice una personalizada de Estilos globales. Use la misma familia tipográfica que en las páginas de sus productos para lograr un aspecto coherente.
• Tamaño: Ajuste el tamaño de la fuente para que los nombres y precios de las variantes destaquen claramente en el diseño.
• Color: Elija un color de texto en el selector de colores o introduzca un código HEX (por ejemplo, #3B3B3B). Use un tono oscuro para mejorar la legibilidad.
• Alineación: Alinee el texto a la izquierda, al centro o a la derecha, según sus preferencias de diseño. La alineación a la izquierda suele funcionar mejor para las listas de variantes.
• Grosor de la fuente: Controle el grosor del texto, desde ligero hasta extra grueso. Para las variantes de productos, lo ideal suele ser un grosor medio o grueso.
• Altura de la línea: Ajuste el espaciado vertical entre las líneas de texto (por ejemplo, 150 %) para mejorar la legibilidad del texto en varias líneas.
• Espaciado de letra: Ajuste el espacio entre las letras para conseguir un aspecto más compacto o más abierto
• Transformar: Cambie las mayúsculas y minúsculas del texto a mayúsculas, minúsculas o mayúsculas en cada palabra. Esta opción es ideal para nombres de variantes de tipo SKU o etiqueta.
• Sombra: Añada una sutil sombra al texto para aumentar el contraste o dar profundidad cuando este se superponga con fondos claros.

Estilo de la Opción

El Estilo de la Opción le permite personalizar el aspecto del selector de variantes de producto, incluyendo su tamaño, fondo y aspecto general.

• Ancho: Ajuste el ancho del cuadro de opciones. Puede establecer un valor fijo en píxeles o utilizar un porcentaje (por ejemplo, 100%) para que se extienda por todo el contenedor.
• Altura: Defina el tamaño vertical del selector de variantes (por ejemplo, 45px) para lograr un mejor equilibrio visual con otros elementos de la página del producto.
• Fondo: Elija un color de fondo para el cuadro de opciones. Utilice tonos sólidos (como negro o blanco) o el color de acento de su marca para lograr un mayor contraste.
• Borde: Añada o elimine un borde alrededor del selector. Puede elegir entre estilos de línea continua, discontinua o punteada, y ajustar el color para que coincida con su diseño.
• Esquina: Eedondee los bordes del cuadro de opciones estableciendo valores de radio de esquina (por ejemplo, 18px). Esto crea una apariencia más suave y moderna.
• Sombra: Añada una sutil profundidad aplicando efectos de sombra detrás del cuadro. Es ideal para resaltar el estado activo o al pasar el cursor por encima.

Efecto al Pasar el Cursor

El Efecto al pasar el cursor le permite definir cómo reacciona la opción de variante cuando los compradores colocan el cursor sobre ella.

• Fondo: Cambie el color de fondo que aparece al pasar el cursor sobre la variante. Utilice el color de acento de su marca (por ejemplo, #EC6448) para que destaque.
• Color del texto: Establezca el color del texto al pasar el cursor. Un color claro, como blanco (#FFFFFF), funciona mejor sobre fondos oscuros o llamativos.
• Borde: Personalice el estilo del borde (línea continua, discontinua o punteada) para que el estado al pasar el cursor sea más evidente. También puede ajustar el color del borde para complementar el fondo.
• Esquina: Mantenga o aumente el redondeo de las esquinas para una transición visual más suave al pasar el cursor.
• Sombra: Añada un sutil efecto de sombra para que la opción parezca elevada o interactiva. Esto ayuda a mejorar la percepción de respuesta al clic.

#2. Tipo: Separado

Si establece el Tipo a Separado, continúe configurando cómo se muestran las opciones de variantes para su producto.

Espacio entre Opciones

Ajuste el espacio entre opciones introduciendo un número exacto en el cuadro o arrastrando el control deslizante.

Título de la Opción

En la sección Título de la Opción , seleccione la posición del título. En la sección Título de la opción, selecciona la posición del título. Puede elegir entre dos opciones: vertical y horizontal.

• Posición vertical:

• Posicion horizontal:

A continuación, ajuste el espacio entre el título y los valores para mejorar la legibilidad. Por ejemplo, establecemos el espacio de 40px.

A continuación, haga clic en la casilla situada junto a Estilo de Texto para abrir el panel de configuración del estilo del texto. Desde aquí, puede modificar el estilo, la fuente, el tamaño, el color del texto y el espaciado entre letras, o añadir un efecto de sombra al título de la variante.

Una vez que haya terminado con el Título de la Opción (Título de la Variante), puede configurar cada opción de variante en las siguientes secciones.

Por ejemplo, dado que tenemos tres variantes para esta Paleta de Gem, podemos modificar la visibilidad de cada una en el siguiente orden: Color, Acabado/Textura y Tamaño.

Opción: Color

En esta sección, puede configurar todas las opciones de color de este elemento.

Analicemos cada opción de configuración:

• Estilo: Elegir entre las opciones disponibles, que incluyen Menú Desplegable, Selección por botones, Imagen de Shopify, Muestra de color o Subir imagen.

Por ejemplo, si selecciona Estilo = Muestra de color, haga clic Editar color para abrir el panel Configurar estilo de variantes .

Si desea subir nuevas imágenes para cada opción de color, seleccione Estilo = Subir imagen.

Tenga en cuenta que solo se muestra una imagen para cada opción. Si prefiere añadir más imágenes, deberá añadir el mismo número de opciones variantes en Shopify.

• Ancho y Alto: Ajustar el ancho y el alto de la opción de color.
• Espacio entre valores: Cambiar el espacio entre cada opción.

• Borde: Añadir el borde para las opciones de color y cambie el color, el grosor y el trazo del borde según prefiera.

• Esquina: Ajustar el radio de la esquina. Por ejemplo, si desea mostrar opciones de color redondeadas, establezca el radio en 999999.
• Sombra: Para mejorar la interfaz de usuario, puede añadir un efecto de sombra a las opciones de color.

• Pasar el Cursor: Haga clic en el botón DE ESTILO RESORT junto a Hover para abrir su configuración, donde puede modificar el efecto al pasar el cursor sobre la opción.
• Activo: Personalizar la opción de color activo para que sea diferente de los demás.

Texto del Valor de la Opción

En esta sección, puede editar el valor del texto para las opciones de color de los estilos, la fuente, el tamaño, el grosor de la fuente, la altura de la línea, el espaciado entre letras y la transformación.

Estilo para Valor agotado

Elija el estilo visual cuando una opción de color esté agotada:

• Ninguno: No hay señal para la opción de color agotada.
• No seleccionable: Los visitantes no pueden hacer clic en la opción de color agotada.
• Tachado: La opción de color agotada aparecerá tachada.

Por ejemplo, establecemos el Tipo a No seleccionable:

Tamaño

Utilice el Tamaño para controlar el ancho del selector de variantes o del área de muestras.

Ancho: Ajuste el ancho del elemento utilizando un valor fijo en píxeles (por ejemplo, 500px) o un porcentaje (100%), dependiendo de su diseño.

• Los anchos mayores crean un menú desplegable de fila completa.
• Los anchos más pequeños son ideales para listas de variantes compactas.

Forma

El Forma le permite diseñar la apariencia de su contenedor de variantes, incluyendo bordes y esquinas.

• Borde: Añada o ajuste el estilo del borde (línea, guión, punteado) para delinear su selector de variantes.
• Esquina: Redondee los bordes del cuadro (por ejemplo, 18px) para conseguir un aspecto moderno y suave.
• Sombra: Añada profundidad con sombras sutiles para separar los cuadros de variantes del fondo. Elija entre Ligera, Media, or Fuerte , dependiendo del contraste deseado.

Opción de visualización

El Opción de Visualización controla cómo aparecen las variantes de su producto cuando se carga la página o cómo se seleccionan las variantes predeterminadas.

Variante predeterminada: Activa Sí para mostrar una opción preseleccionada (por ejemplo, “Verde/Adulto”) cuando se carga por primera vez la página del producto.

Para personalizar la opción predeterminada, debe cambiar la Fuente del Producto en el Elemento Producto a “Selección Manual" en lugar de "Asignado. Más información.

Alineación

El Alineación le permite controlar cómo se posicionan las opciones de sus variantes dentro de su contenedor, lo que le ayuda a ajustar el diseño general de la página. Puede seleccionar entre tres opciones: alinear a la izquierda, alinear al centro o alinear a la derecha, según prefiera.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la Avanzado y siga las instrucciones de este artículo.

Solución de Problemas Relacionados con Las Variantes de Color

Si una de sus muestras de color no funciona correctamente en GemPages, aquí tiene algunos pasos para solucionar y resolver el problema:

Configuración de Variantes en Shopify

Asegúrese de que las variantes de sus productos estén configuradas correctamente en Shopify:

• Estado Activo: Compruebe que el producto y sus variantes estén activos y disponibles en su tienda online.
• Canales de Venta: Confirma que el canal de venta “Tienda online” está seleccionado para el producto.
• Configuración de Variantes: Comprueba que cada variante tiene una combinación única de opciones, como el color y el tamaño.

Examinar la Configuración del Módulo de Producto

• En el Editor de GemPages, haga clic en el Módulo de Producto.
• En la sección Seleccionar producto , asegúrese de que se ha asignado el producto correcto.

Preguntas Frecuentes

1. ¿Puedo mostrar cada variante de producto como una página de producto independiente?

Shopify no admite mostrar variantes como páginas de productos independientes de forma predeterminada.

Sin embargo, una solución habitual es crear productos independientes para cada variante y, a continuación, vincularlos manualmente como un “grupo de variantes” utilizando metacampos o una sección personalizada.

2. ¿Cuál es la diferencia entre variantes y productos separados?

Las variantes comparten la misma página de producto y utilizan muestras/menús desplegables para cambiar entre opciones (por ejemplo, tamaños, colores).

Cada producto tiene su propia página y URL. Esto suele usarse cuando cada variante tiene fotos, precios o descripciones muy diferentes.

3. ¿Cómo puedo vincular páginas de productos independientes como variantes?

Puede usar:

• Conectar de manera manual en las descripciones de los productos o bloques personalizados (por ejemplo, “También disponible en…”)
• Aplicaciones de recomendación de productos
• Secciones Liquid personalizadas o metacampos (se requiere algunos conocimientos de Shopify)

4. ¿Cómo activo el zoom al pasar el cursor sobre la imagen de una variante?

El zoom se controla en el Elemento de imágenes de productos, no en las muestras variantes.
Para habilitarlo:

• Haga clic en el botón Imágenes de Producto. elemento en el editor.
• En Imagen destacada > Acción de pasar el cursor, escoger Zoom.
• Ajuste el tipo de zoom y el valor de zoom según sea necesario.

5. ¿Por qué no se activa Zoom cuando paso el cursor sobre una muestra variante?

Solo muestras variantes cambiar la imagen del producto seleccionado, no controlan el comportamiento del zoom.
Para activar el efecto zoom, configúrelo en Imágenes de Producto. > Acción de pasar el cursor, no dentro de la configuración del elemento de muestra.

6. ¿Cómo edito el precio de las variantes de producto en Shopify?

Puedes actualizar los precios de las variantes directamente en tu panel de control de Shopify. Ve a Productos, seleccione el producto con variantes, luego en el variantes sección actualizar la Precios campo para la variante y haga clic guardeEl nuevo precio aparecerá automáticamente en la página de tu producto, incluidas las páginas creadas con GemPages.