Las galerías de productos son una excelente manera de mostrar los productos que ofreces. Puedes agregar una galería a cualquier página del sitio y luego decidir qué quieres mostrar: todos tus productos o una categoría específica.
Elige entre una galería de cuadrícula (una galería con varias filas) o una galería tipo cinta por la que puedan desplazarse los clientes.
En este artículo, obtén más información sobre lo siguiente:
Personalizar una galería cuadrícula
Personaliza las galerías cuadrícula para obtener el aspecto adecuado para tu tienda.
Para personalizar una galería cuadrícula:
- Ve a la página del editor que contiene la galería que deseas personalizar.
- Haz clic en la galería y luego haz clic en el icono Ajustes
. - Elige qué ajustes quieres personalizar:
Elige qué productos se muestran
Haz clic en la pestaña Categoría para elegir la categoría de producto que deseas mostrar.
Consejo: De forma predeterminada, cada galería muestra la categoría "Todos los productos".
Elige lo que quieres mostrar
Haz clic en la pestaña Mostrar y luego selecciona o desmarca las casillas de verificación para mostrar u ocultar elementos de la galería.
Haz clic en la pestaña Ajustes y personaliza las opciones disponibles.
- Comportamiento de desplazamiento:
- Selecciona lo que sucede cuando los clientes se desplazan hasta la parte inferior de la página. Más información.
- Habilita la palanca Barra lateral adhesiva para mantener los filtros visibles durante el desplazamiento. Si está habilitada, personaliza la distancia de la barra lateral desde la parte superior.
- Efecto cursor en imágenes: establece lo que sucede cuando un cliente pasa el cursor sobre un producto.
- Botón Agregar al carrito: si habilitaste el botón en la pestaña Mostrar, personaliza lo que sucede cuando se hace clic en el botón:
- Mostrar pop-up de éxito: aparece una notificación emergente.
- Abrir el minicarrito: el carrito lateral (minicarrito) se abre a un lado de la pantalla.
- Ir a la página del carrito: se dirige a los clientes directamente a la página del carrito.
- Permanecer en la página actual: los clientes permanecen en la misma página. El botón muestra una marca de verificación para indicar que el producto se agregó correctamente.
Haz clic en la pestaña Estilo y personaliza la galería con las siguientes opciones:
- General: haz clic en la palanca para estirar la galería al ancho total del navegador. Si está habilitada, establece el tamaño del margen.
Nota: Si la opción está habilitada, se recomienda seleccionar Adaptativo en Cuadrícula de productos. - Cuadrícula de productos:
Consejo: Con el ajuste Comportamiento de la cuadrícula fijo, los ajustes permanecen iguales sin importar el tamaño de la pantalla del visitante. Con la función Adaptativo, el número de filas y columnas se ajusta al tamaño de la pantalla, pero esta configuración solo funciona cuando la galería se estira al ancho total. - Imágenes del producto: selecciona cómo se muestran las imágenes que subiste. Más información
- Botón Agregar al carrito: elige dónde se coloca el botón.
Nota: Si el botón se coloca en la imagen, el botón Vista rápida no se mostrará. - Información del producto: elige una opción para el estilo de la tarjeta del producto y personalízala.
- Opciones de producto: haz clic en las palancas para mostrar solo las opciones de color o para limitar el número de muestras visibles.
- Cintas: selecciona dónde aparece la cinta y ajusta el relleno.
Haz clic en la pestaña Diseño y personaliza la galería con las siguientes opciones:
Consejo: Las opciones varían según los elementos que hayas habilitado.
- General: selecciona el fondo que aparece detrás de las tarjetas de productos.
- Filtros y clasificación: si habilitaste los filtros o la clasificación, personaliza el fondo y el texto.
- Tarjetas de producto: agrega un fondo y un borde a la tarjeta y personaliza el radio de las esquinas de la imagen.
- Información del producto: personaliza el texto de la galería.
- Cantidad y opciones del producto: si habilitaste el botón Agregar al carrito y el selector de cantidad o las opciones de producto, puedes diseñarlas.
- Cintas: selecciona la forma, el color y la fuente de la cinta. Más información
- Divisor de nombre y precio: personaliza la línea divisora entre el nombre del producto y el precio.
- Botón Agregar al carrito: selecciona un diseño para cada vista: predeterminado y efecto cursor.
- Botón Vista rápida: si la Vista rápida está habilitada, diseña el botón.
Consejo: Para personalizar la Vista rápida, ve a la pestaña Vista rápida. - Botones Cargar más/Anterior o Paginación: personaliza el diseño de "Botón Cargar más" o "Paginación".
Haz clic en la pestaña Texto y personaliza cualquiera de las siguientes opciones:
- Texto del botón Agregar al carrito: disponible si el botón Agregar al carrito está habilitado.
- Texto del botón de pedido anticipado: más información sobre los pedidos anticipados de productos.
- Texto Agotado: el mensaje aparece cuando el inventario de productos es cero.
- Botones Cargar más/anterior: relevantes si elegiste Botón Cargar más o Desplazamiento infinito como comportamiento de desplazamiento en la pestaña Ajustes.
Habilitar y personalizar "Vista rápida"
Vista rápida permite a los clientes ver los detalles del producto en una ventana emergente sin salir de la página de tu tienda.
Notas:
- Si colocaste el botón "Agregar al carrito" en la imagen, no se mostrará el botón Vista rápida.
- Para ver el botón de vista rápida en acción, haz una vista previa de tu sitio o mira tu sitio online.
Para habilitar o deshabilitar Vista rápida:
- Haz clic en la pestaña Mostrar.
- Selecciona o desmarca la casilla de verificación junto a Botón de vista rápida.
Próximos pasos:
- Para personalizar el botón Vista rápida, ve a la pestaña Diseño.
- Para personalizar la ventana emergente de vista rápida, ve a la pestaña Vista rápida. Más información.
Personalizar una galería tipo cinta
Personaliza tu galería de productos tipo cinta para obtener el aspecto perfecto. Puedes personalizar el texto y el diseño de la galería, elegir qué elementos mostrar (por ejemplo, un botón Agregar al carrito) y más.
Para personalizar una galería tipo cinta:
- Haz clic en la galería de productos tipo cinta.
- Haz clic en Ajustes.
- Elige lo que quieres hacer:
Elige qué productos se muestran
Puedes usar esta galería de 3 maneras:
- Muestra productos seleccionados:
Muestra una categoría específica o la categoría "Todos los productos".
Por ejemplo, si deseas mostrar las novedades, crea una categoría llamada "Novedades" y pon todos los productos nuevos en ella. Luego, selecciona esa categoría en el menú desplegable. - Muestra automáticamente los productos más vendidos:
Elige esta opción para mostrar automáticamente los ítems más vendidos. Ten en cuenta que si aún no has tenido suficientes ventas para calcular qué productos son los más vendidos, se muestran los productos relacionados o la categoría Todos los productos. - Muestra productos relacionados: muestra los productos que les interesan a los clientes, según lo que están viendo. Puedes seleccionar el tipo de galería de productos relacionados que deseas mostrar.
- De las mismas categorías: funciona mejor cuando se agrega a la página del producto, al carrito o a la página de agradecimiento.
- Comprados frecuentemente juntos: funciona mejor cuando se agrega a la página del producto.
- Vistos frecuentemente juntos: funciona mejor cuando se agrega a la página del producto.
Elige qué elementos mostrar
Haz clic en la pestaña Mostrar y luego selecciona o desmarca las casillas de verificación para mostrar u ocultar elementos de la galería.
Haz clic en la pestaña Ajustes y personaliza las siguientes opciones:
- Comportamiento del control deslizante: habilita el bucle infinito para permitir que los clientes sigan desplazándose por los productos.
- Efecto cursor en imágenes: establece lo que sucede cuando un cliente mueve el cursor sobre un producto.
- Botón Agregar al carrito: si habilitaste el botón en la pestaña Mostrar, personaliza lo que sucede cuando se hace clic en el botón:
- Mostrar pop-up de éxito: aparece una notificación emergente.
- Abrir el minicarrito: el carrito lateral (minicarrito) se abre a un lado de la pantalla.
- Ir a la página del carrito: se dirige a los clientes directamente a la página del carrito.
- Permanecer en la página actual: los clientes permanecen en la misma página. El botón muestra una marca de verificación para indicar que el producto se agregó correctamente.
Haz clic en la pestaña Estilo y personaliza la galería con las siguientes opciones:
- General: haz clic en la palanca para estirar la galería al ancho total del navegador. Si está habilitada, establece el tamaño del margen.
Nota: Si la opción está habilitada, se recomienda seleccionar Adaptativo en Cuadrícula de productos. - Título de la galería: edita la alineación del título
- Cuadrícula de productos:
Consejo: Con el ajuste Fijo en Cuadrícula de productos, los ajustes permanecen iguales sin importar el tamaño de la pantalla del visitante. Con el ajuste Adaptativo, el número de columnas se ajusta al tamaño de la pantalla, pero esta configuración solo funciona cuando la galería se estira al ancho total. - Imágenes del producto: selecciona cómo se muestran las imágenes que subiste. Más información
- Botón Agregar al carrito: elige dónde se coloca el botón.
Nota: Si el botón se coloca en la imagen, el botón Vista rápida no se mostrará. - Información del producto: selecciona un estilo y una alineación para la información del producto.
- Cintas: selecciona dónde aparece la cinta y ajusta el relleno.
- Flechas de navegación: personaliza la ubicación de las flechas.
- Puntos de paginación: selecciona una opción de alineación y personaliza la distancia desde la galería.
Haz clic en la pestaña Texto y personaliza cualquiera de las siguientes opciones:
- Texto del título de la galería: disponible si el título está habilitado.
- Texto del botón Agregar al carrito: disponible si el botón Agregar al carrito está habilitado.
- Texto del botón de pedido anticipado: más información sobre pedidos anticipados.
- Texto Agotado: el mensaje aparece cuando el inventario de productos es cero.
Haz clic en la pestaña Diseño y personaliza la galería con las siguientes opciones:
Consejo: Las opciones varían según las funciones que habilitaste en las pestañas Ajustes y Vista rápida.
- General: selecciona un color de fondo para la galería, elige una fuente y un color para el título y personaliza las flechas de la galería tipo cinta.
- Tarjetas de producto: selecciona un color de fondo para los productos, agrega un borde y personaliza el texto de la galería.
- Información del producto: personaliza las fuentes que muestras en la información del producto.
- Cantidad y opciones del producto: personaliza el selector de cantidad y la visualización de las opciones de producto.
- Cintas: selecciona la forma, el color y la fuente de la cinta. Más información
- Flechas de navegación: personaliza el diseño de las flechas de navegación.
- Puntos de paginación: personaliza el color y la opacidad de los puntos de paginación.
- Divisor de nombre y precio: personaliza la línea divisora entre el nombre del producto y el precio.
- Botón de vista rápida: si la Vista rápida está habilitada, diseña el botón.
Consejo: Para personalizar la Vista rápida, ve a la pestaña Vista rápida. - Botón Agregar al carrito: personaliza el aspecto del botón de forma predeterminada y cuando se pasa el cursor sobre él.
Habilitar y personalizar "Vista rápida"
Vista rápida permite a los clientes ver los detalles del producto en una ventana emergente sin salir de la página de tu tienda.
Notas:
- Si colocaste el botón "Agregar al carrito" en la imagen, no se mostrará el botón Vista rápida.
- Para ver el botón de vista rápida en acción, haz una vista previa de tu sitio o mira tu sitio online.
Para habilitar o deshabilitar Vista rápida:
- Haz clic en la pestaña Mostrar.
- Selecciona o desmarca la casilla de verificación junto a Botón de vista rápida.
Próximos pasos:
- Para personalizar el botón Vista rápida, ve a la pestaña Diseño.
- Para personalizar la ventana emergente de vista rápida, ve a la pestaña Vista rápida. Más información.
Personalizar una galería en la versión móvil
Asegúrate de que tus galerías se vean bien cuando los clientes las vean en dispositivos móviles. Puedes ajustar el diseño para que se ajuste a pantallas más pequeñas y permitir que los clientes agreguen rápidamente productos al carrito sin tener que salir de la galería.
- Ve al editor.
- Haz clic en el icono Cambiar a la versión móvil
en la parte superior del editor. - Ve a la página con la galería de cuadrícula o la galería tipo cinta que deseas personalizar.
- Haz clic en la galería.
- Haz clic en Ajustes.
- Personaliza la galería con las opciones disponibles.
