Las galerías de productos son la forma 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.
Dependiendo de tus preferencias, puedes elegir entre una galería de cuadrícula o una galería tipo cinta, como la que se muestra a continuación:
En este artículo, obtén más información sobre lo siguiente:
Mostrar una categoría en una galería de cuadrícula
Una galería de productos en cuadrícula es una excelente manera de mostrar una gran cantidad de productos. Los productos aparecen en una cuadrícula con varias columnas y filas.
Para agregar una galería de cuadrícula y seleccionar una categoría para mostrar:
- Ve a la página a la que deseas agregar una galería.
- Abre el panel Agregar elementos en el Editor:
- Editor de Wix: haz clic en Agregar elementos
a la izquierda del Editor. - Editor X: haz clic en Agregar elementos
en la parte superior del Editor X.
- Haz clic en Tienda.
- Haz clic en Galería de productos en cuadrícula .
- Arrastra la Galería cuadrícula a la ubicación correspondiente en la página de tu sitio.
- Haz clic en la galería en el Editor.
- Haz clic en Elige una categoría.
- Selecciona una opción:
- Para mostrar todos los productos: asegúrate de que la categoría Todos los productos esté seleccionada.
- Para mostrar una categoría: haz clic para seleccionar una categoría.
Personalizar una galería en cuadrícula
La galería es la primera parte de tu tienda que ven los clientes. Personalízala para asegurarte de que cause una gran impresión.
Para personalizar una galería de cuadrícula:
- Ve a la página del Editor que contiene la galería que deseas personalizar.
- Haz clic en la galería de productos.
- Haz clic en el icono Ajustes
. - Elige lo que deseas hacer:
Haz clic en la pestaña Estilo y personaliza la galería con las siguientes opciones:
- Estirar hasta ancho total de pantalla: haz clic en la palanca para estirar la galería a lo ancho de todo el navegador. Si está habilitada, establece el tamaño de los márgenes de la galería. Si habilitaste Estirar hasta ancho total de pantalla, te recomendamos que selecciones Adaptativo en Comportamiento de la cuadrícula en la sección Estilo de la galería.
- Estilo de la galería: selecciona un estilo de visualización y luego elige la alineación del texto, el número de columnas y filas, y cómo están espaciadas.
- Estilo de la imagen: selecciona cómo se muestran las imágenes que has subido. Más información
- Estilo de la cinta: selecciona dónde aparece la cinta.
- Paginación: selecciona un estilo de paginación y personaliza las flechas y la alineación.
Nota: Disponible solo si seleccionas la paginación en la pestaña Ajustes.
Haz clic en la pestaña Opciones y personaliza las siguientes opciones:
- Al pasar el mouse: establece lo que sucede cuando un cliente mueve el ratón sobre un producto.
- ¿Qué se muestra?: Muestra u oculta los elementos de la galería.
- Ver más productos: selecciona lo que sucede cuando los clientes se desplazan hacia abajo hasta la parte inferior de la página. Más información
Nota: En dispositivos móviles, el botón "Cargar más" siempre se muestra después de 10 productos. - Botón Agregar al carrito: muestra el botón para que los clientes puedan agregar productos al carrito sin tener que ir a la Página de productos. Si la palanca está seleccionada, personaliza el botón:
- Solo al pasar el mouse: selecciona esta opción para mostrar el botón solo cuando el cliente mueva el raón sobre él.
- Cuando se hace clic en el botón: selecciona a dónde se dirige al cliente después de hacer clic en el botón Agregar al carrito.
- Mostrar cantidad: selecciona esta opción para permitir que los clientes agreguen 2 o más productos al carrito.
- Mostrar opciones: habilita la palanca para mostrar las opciones del producto, como el color o el tamaño.
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 Agotado: el mensaje aparece cuando el inventario de productos es cero.
- Texto de Ver más productos: disponible si seleccionaste mostrar un botón para Mostrar más cuando los clientes se desplacen hacia abajo hasta la parte inferior de la página.
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 y personaliza el filtro y los diseños de clasificación.
- Botón de cargar más/Paginación: personaliza la opción que seleccionaste en la pestaña Ajustes, "Botón Cargar más" o "Paginación".
- Mostrar producto: selecciona un color de fondo para los productos, agrega un borde y personaliza el texto de la galería.
- Botón Agregar al carrito: selecciona un diseño para cada vista: predeterminado y Efecto cursor.
- Cintas: selecciona la forma, el color y la fuente de la cinta. Más información
- Opciones/cantidad de producto: personaliza ambos tipos de opciones de productos: color y menú desplegable.
- Divisor de nombre y precio: personaliza la línea divisora entre el nombre del producto y el precio.
- Botón de vista rápida: el botón de vista rápida aparece sobre la imagen cuando el cursor sobre ella. Para verlo, haz una vista previa de tu sitio.
Habilita filtros para ayudar a los clientes a encontrar los productos que buscan.
Aprende cómo
Agrega opciones de clasificación
Permite que los clientes clasifiquen tus productos por precio, nombre o en base a cuán nuevos son.
Aprende cómo
Personaliza la vista rápida
La 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.
Para deshabilitar la Vista rápida:
- Haz clic en la pestaña Vista rápida.
- Haz clic en la palanca Mostrar la vista rápida para desactivarla.
Para aprender a personalizar la Vista rápida, haz clic
aquí.
Personalizar la galería de cuadrícula para dispositivos móviles
Asegúrate de que la galería se vea bien cuando los clientes la vean desde un dispositivo móvil. Puedes ajustar el diseño para que coincida con pantallas más pequeñas y permitir que los clientes agreguen productos rápidamente al carrito sin tener que salir de la galería.
Para personalizar la Galería de cuadrícula para dispositivos móviles:
- Ve a la página con la Galería de cuadrícula que deseas personalizar.
- Haz clic en el icono Cambiar a la versión móvil
en la parte superior del Editor.
- Haz clic en la Galería de cuadrícula.
- Haz clic en Ajustes.
- Haz una de las siguientes acciones para personalizar tu galería para dispositivos móviles:
- Mostrar botón Agregar al carrito: habilita la palanca para permitir que los clientes agreguen productos al carrito sin tener que ir a la Página de productos. Si está habilitada, haz clic en la palanca Mostrar cantidad para permitir que los clientes agreguen más de un producto al carrito.
- Mostrar opciones del producto: habilita para mostrar opciones de productos, como tamaños o colores.
- Personaliza el estilo: muestra los productos en 1 o 2 columnas.
- Personaliza el diseño: arrastra los botones para ajustar el tamaño del texto para dispositivos móviles.
Mostrar una categoría en una galería de tipo cinta
Una galería tipo cinta es la manera perfecta de mostrar tus productos. Los clientes pueden hacer clic en las flechas de navegación para ver más productos.
Para agregar una galería tipo cinta y seleccionar una categoría para mostrar:
- Ve a la página a la que deseas agregar una galería.
- Abre el panel Agregar elementos en el Editor:
- Editor de Wix: haz clic en Agregar elementos a la izquierda del Editor.
- Editor X: haz clic en Agregar elementos en la parte superior del Editor X.
- Haz clic en Tienda.
- Haz clic en Galería de productos tipo cinta.
- Arrastra la Galería de productos tipo cinta a donde quieras colocarla.
- Haz clic en la galería en el Editor.
- Haz clic en Ajustes.
- Selecciona una opción:
- Para mostrar todos los productos: asegúrate de que la categoría Todos los productos esté seleccionada.
- Para mostrar una categoría: selecciona la categoría del menú desplegable ¿Qué categoría mostrar?.
Personalizar una galería tipo cinta
Personaliza una 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 mucho 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 deseas hacer:
Haz clic en la pestaña Estilo y personaliza la galería con las siguientes opciones:
- Estirar hasta ancho total de pantalla: haz clic en la palanca para elegir cómo se muestra la Galería tipo cinta.
- Habilitada: el elemento se estira a todo el ancho del navegador de tus visitantes.
- Márgenes: establece el tamaño de los márgenes en los bordes de la galería.
- Desactivada: el elemento no se estira en el navegador.
- Estilo de visualización del producto: selecciona cómo se muestra la información del producto.
- Alineación de info del producto: selecciona la alineación del texto: izquierda, derecha o centro.
- Alineación del título de la galería: el título se puede desactivar en la pestaña Ajustes.
- Número de productos: selecciona cómo se determina el número de productos mostrados:
- Fijo: el número de productos que seleccionas se muestra a todos los visitantes del sitio.
- Selecciona el número de productos a mostrar.
- Adaptativo: el número de productos que se muestran se ajusta de acuerdo con el tamaño de la pantalla de los visitantes. Esta configuración solo está disponible si seleccionaste Estirar hasta ancho total de pantalla más arriba.
- Espaciado entre productos: ajusta el tamaño del espacio en blanco entre los productos.
- Relleno de datos del producto: ajusta el relleno a la izquierda y a la derecha de la información del producto.
- Estilo de la imagen: selecciona cómo se muestran las imágenes que has subido. Más información
- Estilo de la cinta: selecciona dónde aparece la cinta. Más información
Haz clic en la pestaña Opciones y personaliza las siguientes opciones:
- Al pasar el mouse: establece lo que sucede cuando un cliente mueve el ratón sobre un producto.
- ¿Qué se muestra?: Muestra u oculta los elementos de la galería.
- Botón Agregar al carrito: muestra el botón para que los clientes puedan agregar productos al carrito sin tener que ir a la Página de productos. Si la palanca está seleccionada, personaliza el botón:
- Al pasar el mouse: selecciona la casilla de verificación para mostrar el botón solo cuando el cliente pase el ratón sobre él.
- Cuando se hace clic en el botón: selecciona a dónde se dirige al cliente después de hacer clic en el botón Agregar al carrito.
- Mostrar cantidad: selecciona esta opción para permitir que los clientes agreguen 2 o más productos al carrito.
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 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.
- Mostrar producto: selecciona un color de fondo para los productos, agrega un borde y personaliza el texto de la galería.
- Botón Agregar al carrito: selecciona un diseño para cada vista: predeterminado y Efecto cursor.
- 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 de vista rápida: el botón de vista rápida aparece sobre la imagen cuando el cursor sobre ella. Para verlo, haz una vista previa de tu sitio.
Personaliza la vista rápida
La Vista rápida permite a los clientes ver los detalles del producto en una ventana emergente sin salir de la página de la tienda.
Para deshabilitar la Vista rápida:
- Haz clic en la pestaña Vista rápida.
- Haz clic en la palanca Mostrar la vista rápida
para desactivarla.
Para aprender a personalizar la Vista rápida, haz clic
aquí.
