Correcto
Información del producto
Personalice la página principal de producto con medios, variantes, controles de compra y detalles de apoyo.
- Documentación de Shopify sobre secciones y bloques
- Documentación de Shopify sobre metacampos y fuentes dinámicas
- Documentación de Company XYZ sobre el bloque de título
- Documentación de Company XYZ sobre el bloque de precio
- Documentación de Company XYZ sobre el bloque de selector de variantes
- Documentación de Company XYZ sobre el bloque de selector de cantidad
- Documentación de Company XYZ sobre el bloque de botones de compra
- Documentación de Company XYZ sobre el bloque de descripción
- Documentación de Company XYZ sobre el bloque de acordeón
- Documentación de Company XYZ sobre el bloque de productos complementarios
- Documentación de Company XYZ sobre los ajustes de espaciado de la sección
- Documentación de Company XYZ sobre los ajustes de fondos de sección
- Documentación de Company XYZ sobre los ajustes de separadores
- Documentación de Company XYZ sobre los ajustes de anchos de diseño
Esta sección es el área principal de detalles del producto en las plantillas de producto. Combina la galería de productos con una pila personalizable de bloques de contenido, para que pueda controlar cómo los compradores ven los medios, comparan opciones, leen detalles y avanzan hacia la compra. Para obtener una visión general más amplia de la creación del diseño del tema, consulte documentación de Shopify sobre secciones y bloques
Ajustes principales
Sección titulada «Ajustes principales»Esta sección está diseñada para reorganizarse bloque por bloque. En la mayoría de las configuraciones, la estructura de inicio más sólida es título, precio, selector de variantes, selector de cantidad, botones de compra y, después, contenido de apoyo como descripción, acordeones y bloques que generan confianza.
Si su catálogo incluye tipos de producto muy distintos, esta sección le ofrece suficiente flexibilidad para mantener una estructura de página coherente mientras ajusta el énfasis del contenido de cada producto.
Ajustes de galería
Sección titulada «Ajustes de galería»Los ajustes de galería controlan cómo aparecen los medios del producto en escritorio y móvil. Puede cambiar las proporciones de aspecto, el equilibrio entre la galería y las columnas de contenido, la posición de la galería en pantallas más grandes y el estilo de galería utilizado en cada dispositivo.
En escritorio dispone de más control sobre el diseño, incluido en qué lado aparece la galería y qué columna obtiene más espacio. En móvil, la sección siempre se apila en una sola columna, por lo que la decisión principal es qué estilo de galería resulta más fácil de explorar en una pantalla pequeña.
Use estilos de galería más visuales para productos que dependen de la fotografía, los acabados o los detalles cercanos. Use diseños más simples cuando la página deba dar prioridad a las especificaciones, las opciones de variantes o el texto largo del producto.
La galería también puede reaccionar a los cambios de variante. Esto es especialmente útil para productos basados en color o acabado, donde la opción seleccionada debe cambiar inmediatamente los medios visibles.
El comportamiento de la galería basado en variantes requiere un bloque Selector de variantes en esta sección. Sin él, la galería no se actualizará a partir de los cambios de opción.
Los controles de zoom y video ayudan a refinar la experiencia de los medios. El zoom de caja de luz es una buena opción cuando los clientes necesitan inspeccionar la textura o el detalle, mientras que el video con reproducción automática funciona mejor para clips cortos en lugar de demostraciones largas.
Ajustes de presentación
Sección titulada «Ajustes de presentación»Estos ajustes se aplican cuando la galería usa un diseño de presentación. Puede controlar el ancho visible de la diapositiva, el estilo y la velocidad de la animación, la reproducción automática, el bucle, la navegación y la paginación.
Una presentación con vistas previas parciales de la siguiente diapositiva puede hacer que los conjuntos grandes de medios se sientan más interactivos. Si cambia a una animación de fundido, la galería se comporta más como una presentación de una sola diapositiva, por lo que algunas opciones de interfaz de varias diapositivas se vuelven menos útiles.
La reproducción automática es mejor para secuencias visuales cortas. Para productos en los que los compradores necesitan comparar imágenes fijas con atención, la navegación manual suele ser la opción más segura.
Tipos de bloque admitidos
Sección titulada «Tipos de bloque admitidos»- App
- Acordeón
- Botones de compra
- Benefits
- Button
- Productos complementarios
- Formulario de contacto
- Custom liquid
- Descripción
- Heading
- Icon with text
- Image
- Precio
- Selector de cantidad
- Rich text
- Separador
- Iconos de redes sociales
- Título
- Testimonial
- Selector de variantes
- Video
Orientación clave sobre los bloques
Sección titulada «Orientación clave sobre los bloques»El bloque Título muestra el nombre del producto y también puede mostrar acciones para compartir o imprimir. Por lo general, funciona mejor en la parte superior de la pila de contenido. Más información sobre el bloque Título.
El bloque Precio muestra el precio actual y mensajes opcionales de la política. Colóquelo cerca del título y de los controles de compra para que los compradores puedan comparar el precio y las opciones sin volver a subir y bajar en la página. Más información sobre el bloque Precio.
Selector de variantes
Sección titulada «Selector de variantes»El bloque Selector de variantes permite a los compradores elegir opciones del producto y también puede mostrar muestras de color o de imagen. También habilita el comportamiento de la galería basado en variantes de la sección. Más información sobre el bloque Selector de variantes.
Los menús desplegables suelen ser más fáciles para listas largas de opciones, mientras que las píldoras o las muestras son mejores para conjuntos de opciones cortos y visuales. Si usa muestras, asegúrese de que los nombres de las opciones coincidan exactamente con la nomenclatura de las opciones de su producto.
Selector de cantidad
Sección titulada «Selector de cantidad»El bloque Selector de cantidad añade controles de cantidad y mensajes opcionales de disponibilidad. Es más útil cuando se coloca directamente encima o debajo de los botones de compra. Más información sobre el bloque Selector de cantidad.
Si activa los mensajes de existencias bajas, establezca el umbral lo suficientemente bajo como para que resulte creíble y específico del producto.
Botones de compra
Sección titulada «Botones de compra»El bloque Botones de compra es el área principal de acción de compra. También puede mostrar botones de pago adicionales, detalles de envío gratuito, información de recogida local, iconos de pago, opciones de destinatario de tarjeta regalo, mensajes de pago a plazos y una barra fija al desplazarse. Más información sobre el bloque Botones de compra.
Use los detalles de compra de apoyo de forma selectiva. Demasiados complementos alrededor del botón principal pueden hacer que el área de compra se sienta abarrotada, especialmente en móvil.
Si sobrescribe aquí los colores del botón, compruebe tanto el estado predeterminado como el estado al pasar el cursor para asegurarse de que la acción principal siga siendo visible y legible.
Descripción
Sección titulada «Descripción»El bloque Descripción muestra la descripción principal del producto y puede hacerse desplegable. Más información sobre el bloque Descripción.
Las descripciones desplegables son una buena opción para textos de producto largos. Para descripciones más cortas, mostrar todo el texto de inmediato suele resultar más sencillo.
Acordeón
Sección titulada «Acordeón»El bloque Acordeón es útil para preguntas frecuentes, materiales, instrucciones de cuidado, orientación sobre tallas y detalles de envío. Puede usar contenido introducido directamente o extraerlo de otras fuentes de contenido. Más información sobre el bloque Acordeón.
Separe los temas en filas distintas en lugar de combinar todo en un solo panel largo. Así los detalles secundarios son más fáciles de revisar rápidamente. Para contenido que proviene de datos de producto, consulte la documentación de Shopify sobre metafields y fuentes dinámicas
Productos complementarios
Sección titulada «Productos complementarios»El bloque Productos complementarios añade artículos relacionados que combinan con el producto actual. Funciona bien para accesorios, recambios o complementos habituales. Más información sobre el bloque Productos complementarios.
Elija un diseño compacto si este bloque aparece dentro de una página de producto densa. Si usa un diseño de presentación, mantenga visible la navegación para que las recomendaciones no parezcan ocultas.
Bloques de contenido de apoyo
Sección titulada «Bloques de contenido de apoyo»Use los bloques restantes para adaptar la página a la historia del producto y al flujo de compra.
- Use Benefits, Icon with text o Testimonial para reforzar la confianza y el valor.
- Use Image o Video para añadir contenido visual secundario dentro de la columna de información.
- Use Rich text, Heading y Separator para estructurar con más claridad el contenido más largo.
- Use Button para acciones secundarias como guías de tallas o páginas de cuidado.
- Use los bloques Social media icons, Contact form, Custom liquid o App solo cuando respalden un objetivo claro de la página de producto.
Ajustes estándar de sección
Sección titulada «Ajustes estándar de sección»Ajustes de espaciado
Sección titulada «Ajustes de espaciado»Ajustes de espaciado controlan el espacio encima y debajo de esta sección. En las páginas de producto, un espaciado más ajustado suele mantener la galería y los controles de compra más cerca de la parte superior, mientras que un espaciado mayor crea una sensación más editorial.
Ajustes de fondo de sección
Sección titulada «Ajustes de fondo de sección»Ajustes de fondo de sección le permiten añadir un color, degradado, imagen o video detrás de toda la sección de producto. Esto puede ayudar a crear un aspecto de marca más sólido, pero los tratamientos sutiles suelen funcionar mejor en una sección que ya contiene mucho contenido funcional.
Ajustes de separador
Sección titulada «Ajustes de separador»Ajustes de separador añaden una línea opcional en la parte superior o inferior de la sección. Son más útiles cuando el área de producto necesita una separación visual más clara del contenido cercano.
Ajustes de ancho
Sección titulada «Ajustes de ancho»Ajustes de ancho controlan tanto el ancho del contenido como el ancho exterior de la sección. Los diseños más anchos son adecuados para productos centrados en imágenes, mientras que los diseños más estrechos pueden mejorar la legibilidad en páginas de producto con mucho texto.
El editor puede dificultar la evaluación precisa de los cambios de ancho, así que revise los cambios importantes de diseño en la página en vivo antes de finalizarlos.
Notas de uso
Sección titulada «Notas de uso»- Mantenga juntas las acciones de compra. Coloque el título, el precio, el selector de variantes, el selector de cantidad y los botones de compra cerca unos de otros para que los compradores puedan actuar sin buscar por la página.
- Adapte los medios al producto. Use diseños de galería más ricos para productos visuales y galerías más simples cuando las opciones, las especificaciones o el texto necesiten más atención.
- Use acordeones para detalles secundarios. Mueva las preguntas frecuentes, los materiales, las notas de envío y la información de cuidado a filas de acordeón separadas para mantener centrada el área principal de contenido.
- Compruebe el flujo móvil. Como la sección se convierte en una sola columna en pantallas pequeñas, revise con cuidado el orden de los medios, la apilación de bloques y la visibilidad de los botones de compra.
- Revise ambos tamaños de vista. Los controles de escritorio y móvil pueden cambiar de distintas maneras el diseño, la alineación y el comportamiento de los medios, así que compruebe ambas vistas antes de publicar.
- Vigile los cambios impulsados por bloques. Añadir o reorganizar bloques puede cambiar de forma material el equilibrio de la página de producto, así que vuelva a comprobar la sección cuando cambie la pila de contenido.
- Confirme las recomendaciones con datos reales del producto. El contenido de productos complementarios solo aparece cuando están disponibles el contexto del producto y los artículos devueltos, así que los estados vacíos no deben tratarse como un fallo de configuración.
- Obtenga una vista previa de los diseños estilizados fuera del editor. Los cambios de ancho, fondo y espaciado pueden sentirse distintos en la página en vivo que en el editor.