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é mostrar: todos los 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.
Personalizar una galería cuadrícula
Personaliza las galerías tipo 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 de cuadrícula.
- Haz clic en Ajustes o 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 qué elementos 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, como filtros, cintas u opciones de productos.
Consejo: Cuando muestras las opciones de productos, solo se muestran 2 opciones. Por ejemplo, si tu producto tiene opciones de color, tamaño y forma, solo se mostrarán las 2 primeras que hayas creado.
Haz clic en la pestaña Ajustes y personaliza las opciones disponibles.
- Opciones de producto: selecciona qué opciones de producto se muestran.
Consejo: Esto es relevante si habilitaste las opciones de producto y si algunos productos tienen varias opciones, como color, tamaño y forma. - 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.
- Efectos de imagen de producto: establece lo que sucede cuando un cliente pasa el cursor sobre un producto.
Haz clic en la pestaña Estilo y personaliza la galería con las siguientes opciones:
Consejo: Las opciones varían según los elementos que hayas habilitado.
- General: haz clic en la palanca para estirar la galería a todo el ancho del navegador. Si está habilitada, establece el tamaño del margen (relevante solo para el Editor de Wix, no para los editores de Wix Studio ni de Wix Harmony).
Nota: Si está habilitado, se recomienda seleccionar Adaptativo en Comportamiento de la cuadrícula. - Cuadrícula de productos:
Consejo: Con el ajuste Fijo en Comportamiento de la cuadrícula, los ajustes se mantienen iguales independientemente del tamaño de la pantalla del visitante. Con el ajuste 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. Más información sobre cómo mostrar imágenes
- Botón Agregar al carrito: elige dónde se coloca el botón.
Nota: Si el botón se coloca sobre la imagen, el botón Vista rápida no se mostrará. - Panel de compra rápida: alinea y personaliza el espaciado del panel de compra rápida.
- Información del producto: elige una opción para el estilo de la tarjeta del producto y personalízala.
- Opciones del producto: haz clic en las palancas para mostrar solo las opciones de color o limita las opciones de color y selecciona cómo se muestran las opciones de texto.
- Cantidad: establece el ancho del selector de cantidad de productos.
- 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.
- Opciones de producto: personaliza cómo se muestra el texto y el color de las opciones de producto.
- Cantidad: personaliza el diseño del selector de cantidad de productos.
- Cintas: selecciona una forma, un color y una fuente para la cinta.
- Divisor de nombre y precio: personaliza la línea divisora entre el nombre del producto y el precio.
- 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. - Botón Agregar al carrito: selecciona un diseño para cada vista: predeterminado, efecto cursor y desactivado (es decir, agotado).
- Panel de compra rápida: personaliza el diseño del panel de compra rápida.
- Botones cargar más/anteriores o Paginación: personaliza el diseño del 'Botón Cargar más' o 'Paginación'.
Haz clic en la pestaña Texto y personaliza cualquier parte del texto que aparece en la galería de cuadrícula.
Personalizar el comportamiento del botón 'Agregar al carrito'
Si aún no está habilitado, haz clic en Botón Agregar al carrito para mostrar el botón en la galería.
Por último, elige a dónde se dirige a los clientes después de hacer clic en el botón:
- Mostrar pop-up de éxito: aparece una notificación emergente.
- Abrir carrito lateral: el carrito lateral 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
Ordenar para habilitar y personalizar los filtros. Permite que los clientes clasifiquen los productos por precio, por nombre o según lo nuevos que son. Aprende cómo
agregar y configurar opciones de clasificación.
Habilitar y personalizar la '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, el botón Vista rápida no se mostrará.
- Para ver el botón Vista rápida en acción, obtén una vista previa de tu sitio o dirígete a 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:
Personalizar una galería tipo cinta
Personaliza la galería tipo cinta de productos 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:
- Ve a la página del editor que contiene la galería que deseas personalizar.
- Haz clic en la galería tipo cinta de productos.
- Haz clic en Ajustes o en el icono Ajustes .
- Elige lo que quieres hacer:
Elige qué productos se muestran
Puedes usar esta galería de 3 maneras:
- Mostrar 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 "Novedades" y coloca todas las novedades en ella. Luego, selecciona esa categoría en el menú desplegable. - Mostrar 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 mostrarán los productos relacionados o la categoría Todos los productos. - Mostrar productos relacionados:
Muestra los productos que les interesan a los clientes, según lo que estén mirando en ese momento. Puedes seleccionar el tipo de galería de productos relacionados que deseas mostrar.
- De categorías similares: funciona mejor cuando se agrega a la página de 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.
Consejo: Cuando muestras las opciones de productos, solo se muestran 2 opciones. Por ejemplo, si tu producto tiene opciones de color, tamaño y forma, solo se mostrarán las 2 primeras que hayas creado.
Haz clic en la pestaña Ajustes y personaliza las siguientes opciones:
- Opciones de producto: selecciona qué opciones de producto se muestran.
Consejo: Esto es relevante si habilitaste las opciones de producto y si algunos productos tienen varias opciones, como color, tamaño y forma. - Comportamiento del control deslizante: habilita el bucle infinito para permitir que los clientes sigan desplazándose por los productos.
- Efectos de imagen de producto: establece lo que sucede cuando un cliente pasa el cursor sobre un producto.
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 a todo el ancho del navegador. Si está habilitada, establece el tamaño del margen (relevante solo para el Editor de Wix, no para los editores de Wix Studio ni de Wix Harmony).
Nota: Si está habilitado, se recomienda seleccionar Adaptativo en Comportamiento de la cuadrícula. - Título de la galería: edita la alineación del título
- Cuadrícula de productos:
Consejo: Con el ajuste de comportamiento de cuadrícula Fijo, los ajustes siguen siendo los mismos sin importar el tamaño de 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. Más información sobre cómo mostrar imágenes
- Botón Agregar al carrito: elige dónde se coloca el botón.
Nota: Si el botón se coloca sobre la imagen, el botón Vista rápida no se mostrará. - Panel de compra rápida: alinea y personaliza el espaciado del panel de compra rápida.
- Información del producto: selecciona un estilo y una alineación para la información del producto.
- Opciones de producto: haz clic en las palancas para mostrar solo las opciones de color o limita las opciones de color y selecciona cómo se muestran las opciones de texto.
- Cantidad: establece el ancho del selector de cantidad de productos.
- 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 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.
- 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.
- Opciones de producto: personaliza cómo se muestra el texto y el color de las opciones de producto.
- Cantidad: personaliza el diseño del selector de cantidad de productos.
- Cintas: selecciona una forma, un color y una fuente para la cinta.
- 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 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: selecciona un diseño para cada vista: predeterminado, efecto cursor y desactivado (es decir, agotado).
- Panel de compra rápida: personaliza el diseño del panel de compra rápida.
Haz clic en la pestaña Texto y personaliza cualquier parte del texto que aparece en la galería tipo cinta.
Personalizar el comportamiento del botón 'Agregar al carrito'
Si aún no está habilitado, haz clic en Botón Agregar al carrito para mostrar el botón en la galería.
Por último, elige a dónde se dirige a los clientes después de hacer clic en el botón:
- Mostrar pop-up de éxito: aparece una notificación emergente.
- Abrir carrito lateral: el carrito lateral 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.
Habilitar y personalizar la '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, el botón Vista rápida no se mostrará.
- Para ver el botón Vista rápida en acción, obtén una vista previa de tu sitio o dirígete a 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 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.
