Plantilla de producto

Este componente es el que te permite mostrar y personalizar la sección principal de la página de tus productos dentro del tema.

Funciona usando varios subcomponentes que muestran diferentes informaciones y detalles sobre cada producto, los cuales puedes reordenar, ocultar (1) o eliminar (2).

Nota (1): Todos los subcomponentes dentro de este componente pueden ocultarse.

Nota (2): Algunos subcomponentes pueden eliminarse por completo, mientras que otros no, ya que son necesarios para el funcionamiento correcto de la página.

Para efectos de este componente, nos referiremos como Contenido a la columna que contiene todos los detalles del producto, como Nombre, Precio, Formulario, etc.; y como Galería a la que muestra la o las imágenes del producto.

Configuración del componente

Al hacer clic en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán cómo se verá y comportará la sección. Las opciones disponibles para este componente son las siguientes:

Alineación del contenido

Permite elegir la alineación para todos los elementos dentro de la columna Contenido, como por ejemplo el nombre, precio, etc.

Galería de imágenes

El siguiente grupo de opciones te permitirá personalizar ciertos aspectos de la Galería, que afectarán a todos los productos de la tienda:

Formatear imágenes

Permite formatear y redimensionar automáticamente las imágenes que subas a los productos, según las siguientes opciones que encontrarás más abajo.

Nota: Puedes encontrar los tamaños en los que las imágenes se mostrarán en esta sección.

Al habilitarlo, se mostrarán las siguientes opciones para que puedas personalizarlas:

Dimensión

Permite definir cómo se mostrarán las imágenes dentro del componente, según las siguientes opciones:

• Horizontal: una forma ancha y no tan alta, ideal para un estilo panorámico. Usa una proporción de aspecto de 16:9.
• Vertical: una forma alta y estrecha, ideal para mostrar imágenes verticales, como afiches. Usa una proporción de 3:4.
• Rectangular: una forma equilibrada, ligeramente alargada, adecuada para la mayoría de las imágenes. Usa una proporción de 4:3.
• Cuadrada: una forma con igual altura y ancho, perfecta para imágenes donde ambas dimensiones sean iguales. Usa una proporción de 1:1.

Visualización

Recortar: Crea una versión miniatura de la imagen, recortándola para ajustarse exactamente al tamaño definido en la opción Dimensión, manteniendo centrada la parte más importante.

Por ejemplo, si definiste una dimensión cuadrada, esto garantizará que siempre mantenga esa forma, incluso si la imagen original era rectangular.

Redimensionar: Mantiene las proporciones originales de la imagen (sin recortarla) y simplemente la reduce para ajustarse al espacio disponible, adaptándose automáticamente sin cortar nada.

En resumen:

• Recortar hace que tu imagen se ajuste a dimensiones exactas.
• Redimensionar mantiene las proporciones originales y la reduce.

Ancho en escritorio

Permite definir el ancho al que las imágenes dentro de la galería serán Recortadas o Redimensionadas.

La dimensión que definas aquí está directamente relacionada con la Anchura máxima del contenedor que definas en Configuración del tema > Diseño, ya que deberás aumentarla si eliges un ancho de contenedor mayor a Pequeño.

Nota: Si Formatear imágenes está deshabilitado, las imágenes se mostrarán en el formato original en el que fueron subidas. Si tienen alturas distintas, la galería se adaptará automáticamente a la altura de cada una.

Mostrar miniaturas de la galería

Permite mostrar una segunda Galería con miniaturas de todas las imágenes del producto junto con la principal, con las que los usuarios podrán hacer clic para verlas. Incluirá flechas de control a la izquierda y derecha.

Nota: Si esta opción está deshabilitada, la Galería principal mostrará flechas dentro de ella para que los usuarios puedan navegar entre las imágenes.

Posición de miniaturas en escritorio

Permite definir la posición de las Miniaturas en dispositivos de escritorio con un ancho igual o mayor a 992px.
En dispositivos con ancho menor, se colocarán automáticamente debajo de la imagen principal.

Habilitar zoom en imágenes

Permite que los usuarios hagan zoom sobre las imágenes del producto al pasar el cursor sobre ellas.

Nota: Es recomendable subir imágenes de mayor resolución que las visibles en la tienda, para que el zoom no las pixele.

Cantidad de zoom

Permite definir el nivel de zoom aplicado a las imágenes del producto, si la opción anterior está habilitada.

Galería fija

Permite que la Galería se mantenga fija en la parte superior del Encabezado del tema (si también está fijado) o del Navegador, siguiendo al usuario mientras hace scroll.

Puedes leer más sobre los tamaños y dimensiones recomendadas en esta sección.

Apariencia

Este grupo contiene las siguientes opciones para personalizar el componente:

• Margen superior: permite controlar el margen superior de la sección.
• Margen inferior: permite controlar el margen inferior de la sección.
• Colores del contenido: permite elegir el Pack de colores para el componente.

Animaciones

La opción Personalizar opciones permite ajustar las animaciones para este componente específico. Puedes leer cuáles están disponibles en esta página.

Subcomponentes

El componente Plantilla de producto funciona permitiéndote elegir qué contenido mostrar en él, mediante varios subcomponentes que representan los detalles del producto.

Cada uno de ellos puede editarse, moverse, ocultarse y/o eliminarse. Los disponibles son los siguientes:

Nota: Algunos de estos subcomponentes no tendrán opciones dentro de su configuración, ya que solo muestran información. Por lo tanto, su apariencia o comportamiento puede gestionarse desde la sección Configuración del tema del Editor visual, ya que afectan también a otras páginas o componentes del tema.

Atributos

Permite mostrar el SKU y la Marca del producto, junto con otras opciones para personalizar su visualización:

Nota: Si un producto no tiene alguno de estos atributos, no se mostrará nada. Si tiene ambos y eliges mostrarlos, se separarán con una línea vertical. El orden siempre será primero SKU y luego Marca.

Mostrar antes de la galería en móvil

Por defecto, los Atributos se mostrarán después de la Galería en dispositivos móviles. Esta opción permite cambiarlos de lugar y mostrarlos antes.

Mostrar SKU

Permite definir si el SKU del producto se mostrará o no.

Mostrar texto antes del SKU

Permite mostrar un texto antes del SKU del producto, como por ejemplo “SKU: 1234”.

Mostrar marca

Permite definir si la Marca del producto se mostrará o no.

Nombre

Muestra el nombre o título del producto.

Reseñas

Permite mostrar las reseñas y la calificación del producto si el tema o las apps instaladas las soportan.

Precio

Muestra el precio del producto, el precio anterior (si existe) y los descuentos aplicados.

Formulario

Este subcomponente muestra el formulario de compra principal, con las siguientes secciones:

• Selector de variantes (si el producto tiene opciones, como color o tamaño).
• Campo de cantidad.
• Botón de compra (Agregar al carrito o Comprar ahora).
• Botones secundarios, como “Añadir a favoritos” (si están habilitados en el tema).

Nota: Si un producto tiene varias variantes, el formulario se actualizará dinámicamente al cambiar cualquiera de ellas, mostrando su precio, disponibilidad y SKU.

Descripción

Muestra la descripción del producto, tal como fue añadida en el panel de administración (Productos > Todos los productos > Descripción).

Etiquetas

Permite mostrar las etiquetas que el producto tenga asignadas.

Nota: Las etiquetas funcionan como metadatos que permiten agrupar productos similares o generar enlaces dinámicos dentro del tema. Pueden añadirse desde el panel de administración.

Compartir

Muestra los botones de compartir en redes sociales, que permiten al visitante publicar el producto en su cuenta de Facebook, Pinterest, X (Twitter) o WhatsApp.

Separador de línea

Añade una línea visual para dividir los bloques dentro de la plantilla.

Productos relacionados

Muestra productos similares al actual, basados en la misma categoría o etiquetas compartidas.

Pestañas de información

Permite agrupar información adicional del producto (como envío, materiales, política de devoluciones, etc.) dentro de pestañas horizontales o verticales, según la configuración del tema.

Código personalizado

Permite insertar un bloque de código HTML personalizado, útil para widgets externos o scripts específicos del producto.

Tamaños de imágenes

Los tamaños de las imágenes dentro de este componente o del Producto seleccionado variarán según las opciones que elijas a continuación:

• Si habilitas la opción Formatear imágenes.
• La opción Dimensión de la imagen.
• La opción Ancho en escritorio, que afectará las imágenes en dispositivos de escritorio con un ancho ≥ 992px.

Además, el tema cargará automáticamente diferentes tamaños de imagen dependiendo del ancho de la ventana del navegador desde la cual se visita la tienda, para que se optimicen según cada tipo de dispositivo.

También debes considerar que al habilitar la opción Zoom, puede que necesites subir imágenes un poco más grandes que los tamaños sugeridos a continuación, para que no se pixelen cuando se haga zoom sobre ellas.

Tamaños predeterminados

A continuación detallamos las dimensiones mínimas sugeridas en las que puedes subir las imágenes de tus productos, considerando el valor predeterminado de la opción Ancho en escritorio, que es 760.

Los valores de la siguiente tabla consideran únicamente la dimensión en escritorio, ya que será la que tenga el mayor tamaño de todas:

Nota: Las imágenes se redimensionarán o recortarán automáticamente según lo que elijas en la opción Visualización, dentro de la configuración del componente.

Tamaños personalizados

Si cambias el valor predeterminado en la opción Ancho en escritorio, junto con la opción Dimensión, y necesitas calcular cómo deberían ser tus imágenes, puedes hacerlo fácilmente de las siguientes formas:

RatioBuddy

Esta herramienta te permite definir la proporción de aspecto (por ejemplo, 4 por 3, que sería rectangular) y proporcionar el ancho y/o alto.

Visita el sitio web de RatioBuddy.

ChatGPT

También puedes usar ChatGPT para hacer los cálculos por ti, proporcionando un prompt como el siguiente:

Chat, necesito calcular dimensiones de imagen basadas en ancho y proporciones.

Las proporciones son las siguientes:

- Horizontal: 9 ÷ 16
- Vertical: 4 ÷ 3
- Rectangular: 3 ÷ 4
- Cuadrada: 1 ÷ 1

El tamaño de mi imagen es 760px.

Quiero saber las combinaciones tanto para el ancho de mi imagen como para la proporción que estoy usando [tu proporción], para determinar cuál debería ser la altura de mis imágenes. Por favor, redondea los resultados para no incluir dimensiones con decimales.

Debería entregarte un resultado similar a la siguiente imagen: