Correcto
Selector de variantes
Muestra variantes de producto con menús desplegables, fichas y muestras opcionales de color o imagen.
Use este bloque para mostrar las opciones de variante de un producto en un formato que se adapte mejor al producto. Aparece solo cuando existen opciones de variante, y puede combinar un estilo de selector estándar con muestras opcionales de color o imagen para una selección más visual de opciones. Documentación de Company XYZ sobre el selector de variantes Para una visión general más amplia de cómo funcionan los bloques en los temas de Shopify, consulte documentación de Shopify sobre secciones y bloques
Ajustes principales
Sección titulada «Ajustes principales»Elija el estilo principal del selector según cuántas opciones necesite mostrar y cuán visual quiera que se vea el formulario del producto. Dropdown es una buena opción para diseños compactos o productos con muchos valores, mientras que Pills facilita la revisión y la selección de conjuntos de opciones más pequeños.
Este estilo principal también actúa como alternativa para cualquier tipo de opción que no esté configurado como muestra.
Ajustes de muestra de color
Sección titulada «Ajustes de muestra de color»Use muestras de color cuando los clientes puedan identificar las opciones de forma fiable solo por el color. Esto funciona mejor para opciones habituales basadas en color, y puede refinar aún más el resultado con definiciones de color personalizadas en los ajustes de su tema. Guía para empezar de Company XYZ sobre variantes de producto
Para mostrar muestras de color, introduzca los nombres de opción relevantes exactamente como se usan en la configuración del producto. Use nombres como Color, no valores como Black o Navy. La forma de muestra seleccionada y los recuentos de columnas de escritorio/móvil controlan cuán densa o espaciosa se ve la cuadrícula de opciones.
Las muestras de color solo se aplican a los nombres de opción que enumere aquí. Si el nombre no coincide exactamente, esa opción usará en su lugar el estilo de selector normal.
Ajustes de muestra de imagen
Sección titulada «Ajustes de muestra de imagen»Use muestras de imagen cuando las opciones de variante necesiten una miniatura real en lugar de una simple indicación de color. Esto es especialmente útil para patrones, acabados, paquetes u otras opciones donde una vista previa visual mejora la confianza antes de seleccionar. Guía para empezar de Company XYZ sobre variantes de producto
Las muestras de imagen dependen de que se asignen imágenes a las opciones de variante relevantes. Si una opción no tiene una imagen asociada, su muestra aparece vacía. Si las muestras de imagen y de color están activadas para el mismo nombre de opción, las muestras de imagen tienen prioridad.
Ajustes del borde de la muestra
Sección titulada «Ajustes del borde de la muestra»Estos ajustes afectan solo a las muestras de color y de imagen. Los bordes pueden hacer que las muestras sean más fáciles de distinguir, especialmente cuando las opciones son claras, tienen poco contraste o se muestran sobre un fondo de página similar.
La opción activa siempre muestra un borde para que la selección actual siga siendo clara. Si deja vacíos los colores personalizados del borde, el bloque vuelve al estilo de borde del botón principal de su tema para lograr un aspecto más coherente.
Ajustes estándar de bloque
Sección titulada «Ajustes estándar de bloque»Ajustes de visibilidad
Sección titulada «Ajustes de visibilidad»Use los controles de visibilidad para decidir si este bloque aparece en escritorio, móvil o en ambos. Esto es útil cuando desea un diseño de formulario de producto diferente en pantallas más pequeñas. documentación de Company XYZ sobre ajustes de visibilidad
Notas de uso
Sección titulada «Notas de uso»- Coincida exactamente con los nombres de opción. El comportamiento de las muestras depende de la etiqueta exacta de la opción, así que use el propio nombre de opción en lugar de cualquier valor individual.
- Elija el tipo de muestra adecuado. Use muestras de color para opciones de color simples y muestras de imagen cuando los clientes necesiten una vista previa visual real.
- Compruebe la cobertura de imágenes. Antes de usar muestras de imagen, asegúrese de que cada opción de variante relevante tenga una imagen asignada para evitar muestras vacías.
- Mantenga previsible el estilo alternativo. Deje sin definir los colores o bordes personalizados cuando quiera que las muestras hereden el aspecto predeterminado del tema, y añada valores explícitos solo cuando necesite que el bloque se diferencie.
- Revise ambos viewports. Los controles de escritorio y móvil pueden comportarse de forma diferente en cuanto a espaciado, alineación, visibilidad y presentación de medios, así que compruebe el bloque en ambos tamaños antes de publicarlo.
- Facilite el escaneo en móvil. Use recuentos de columnas y formas de muestra que dejen suficiente espacio para tocar cómodamente en pantallas más pequeñas.