Variantes de producto

Enlaces destacados

1. Blog de Shopify: Muestras
2. Documentación para desarrolladores de Shopify sobre el objeto swatch
3. Documentación de MDN sobre colores con nombre
4. Documentación de Shopify sobre cómo añadir variantes
5. Aplicación Shopify Translate & Adapt
6. Documentación de Shopify sobre cómo añadir muestras de color mediante metacampos de categoría

Videos útiles

Vídeo de Shopify Academy: Personalización de su tienda

Vídeo de Shopify Academy: Personalización de su tienda

Utilice el bloque Variant selector de Align para que los clientes puedan elegir opciones de producto como la talla, el color o el largo de las mangas. Añada el bloque a la sección Product information de una plantilla de producto o a una sección Featured product de otra plantilla.

Para configurar productos y variantes en Shopify, consulte la documentación de Shopify sobre cómo añadir variantes

Los productos con opciones de variante necesitan un bloque Variant selector para que funcione la acción de añadir al carrito. El bloque no se muestra en los productos que no tienen opciones de variante.

Estilos del selector de variantes

Elija cómo aparecen las opciones de variante estándar en la plantilla de Align seleccionada. Cada bloque Variant selector tiene sus propios ajustes, por lo que puede adaptar la experiencia a distintos productos o colecciones.

Menús desplegables y botones tipo píldora

Utilice el ajuste Variant selector style para elegir uno de los siguientes diseños:

• Dropdowns es el diseño predeterminado y coloca opciones como Size, Color y Sleeves en menús de selección.

  Estilo de menú desplegable

• Pills muestra las opciones como botones seleccionables.

  Estilo de botones tipo píldora

Muestras

Las muestras son controles visuales de variantes que pueden facilitar la comparación de opciones frente a los menús desplegables o botones que solo contienen texto. Pueden proporcionar información visual, permitir un diseño más compacto y ayudar a los clientes a identificar rápidamente colores, patrones o imágenes de productos.

Align admite dos tipos de muestras:

1. Muestras de color muestran un color para un valor de opción.
2. Muestras de imagen muestran la miniatura asignada a una opción de variante.

Muestras de color

Las muestras de color intentan asociar automáticamente un valor de opción con un color CSS con nombre. Por ejemplo, el valor de opción Black utiliza #000000 de forma predeterminada. Añada definiciones de colores personalizados cuando los valores de opción necesiten un tratamiento de color específico.

Activar las muestras de color

1. Abra una plantilla de producto en el editor de temas de Shopify.

2. En la sección Product information, seleccione el bloque Variant selector.

3. Active las muestras de color.

   [!NOTE] Las muestras de color anulan el ajuste Variant selector style seleccionado, por lo que la opción afectada deja de utilizar controles de menú desplegable o de botones tipo píldora.

4. Introduzca el option name de la variante o varios nombres en Color swatch Option names.

   • Utilice el nombre de la opción, como Color, en lugar de sus valores, como Black, Brown, Blue.
   • Puede introducir varios nombres de opción separados por comas.
   • También funcionan los nombres de opción traducidos. Por ejemplo, las tiendas que utilizan la aplicación Shopify Translate & Adapt pueden usar Color, Couleur o Spalva.

5. Obtenga una vista previa de las muestras. De forma predeterminada, cada muestra utiliza su valor de opción como nombre de color. Consulte los colores CSS con nombre para conocer los colores disponibles.

6. Añada valores de color personalizados cuando sea necesario.

   1. Abra Theme settings en el editor de temas.
   2. Abra Colors y busque Custom color swatches.
   3. Introduzca pares de valor de opción y color HEX separados por comas; por ejemplo: Black: #000, Red: #ff0000.

Para configurar colores mediante metacampos de categoría, consulte la documentación de Shopify sobre cómo añadir muestras de color mediante metacampos de categoría

Si utiliza una opción que no sea un color, como Material, a modo de muestra de color, defina cada valor en Custom color swatches. Si no hay una definición coincidente, las muestras aparecen vacías.

Muestras de imagen

Las muestras de imagen muestran la miniatura asignada a cada opción de variante. Las opciones sin una imagen asociada aparecen vacías. Cuando se aplican muestras de color y de imagen a la misma opción, las muestras de imagen tienen prioridad.

Activar las muestras de imagen

1. Abra una plantilla de producto en el editor de temas de Shopify.

2. En la sección Product information, seleccione el bloque Variant selector.

3. Active las muestras de imagen.

   [!NOTE] Las muestras de imagen anulan el ajuste Variant selector style seleccionado para la opción afectada.

4. Introduzca el option name de la variante o varios nombres en Image swatch Option names.

Comportamiento de las muestras de imagen

• Las muestras de color y de imagen se pueden combinar. Un producto puede utilizar distintos tipos de muestras para diferentes grupos de opciones.
• Cada variante admite una muestra de imagen.
• Las combinaciones de variantes utilizan su imagen específica. Por ejemplo, una variante con las opciones Small y Black utiliza la imagen asignada a esa combinación exacta.
• Las imágenes repetidas se muestran una sola vez. Si varios grupos de opciones fueran a utilizar la misma imagen, solo la opción que aparece primero en el ajuste muestra una muestra de imagen. Los grupos de opciones posteriores utilizan la interfaz predeterminada para evitar mostrar repetidamente la misma imagen.

Ajustes de estilo de las muestras

Tanto las muestras de color como las de imagen incluyen ajustes de visualización para modificar su forma y diseño.

Estilo de las muestras

Elija un estilo de muestra que se adapte a las imágenes del producto y al espacio disponible:

• Default muestra las muestras de imagen con su relación de aspecto natural. Esta opción solo está disponible para las muestras de imagen.
• Circle
• Landscape
• Portrait
• Square
• Widescreen

Número de columnas

Utilice ajustes de columnas independientes para ordenadores y dispositivos móviles con el fin de controlar el ancho de las muestras en un diseño adaptable. Un número mayor de columnas crea muestras más estrechas, mientras que un número menor crea muestras más anchas.

1. Elija entre una y ocho columnas.
2. Compruebe las vistas para ordenador y dispositivos móviles y, a continuación, ajuste cada opción para que los elementos sean fáciles de tocar y el diseño resulte legible.
3. El número de columnas controla el ancho de las muestras de color y de imagen y utiliza automáticamente un tamaño de imagen adecuado.

Consejo

Obtenga siempre una vista previa de las muestras en dispositivos móviles, especialmente cuando los productos tengan muchos valores de opción. Un número de columnas adecuado para ordenadores puede hacer que las muestras sean demasiado pequeñas o queden demasiado juntas en pantallas más pequeñas.

Notas de uso

1. Mantenga disponible un bloque selector. Los productos con variantes necesitan el bloque Variant selector para que los clientes puedan añadir la variante seleccionada al carrito.
2. Utilice nombres de opción exactos. Al activar las muestras, introduzca etiquetas de opción como Color o Material, no valores de opción individuales.
3. Defina los colores no estándar. Añada definiciones de colores personalizados para los valores que no sean nombres de colores reconocidos, a fin de evitar muestras de color vacías.
4. Asigne las imágenes de variantes con cuidado. Las muestras de imagen dependen de las imágenes asignadas a las combinaciones de variantes correspondientes.
5. Compruebe los diseños para dispositivos móviles. Revise el número de columnas y el tamaño de las muestras en dispositivos móviles antes de publicar los cambios.