Página del catálogo de productos

listado | tienda online | todos los productos

Para definir el aspecto y las funciones que va a tener el Catálogo de la tienda, iremos a Tienda>Diseño y estilo.

Diseño del catálogo del e-commerce

Nos llevará a una página que incluye un widget llamado Catálogo de tienda. Este widget solo lo encontramos en esta página y no está disponible en la lista de widgets que incorporamos a las páginas arrastrando y soltando desde el menú lateral izquierdo.

También podemos acceder a esta página desde la carpeta de Páginas del sistema (páginas predeterminadas del sistema) que encontramos en el listado de páginas.

Páginas del sistema: Catálogo de la tienda

Al hacer doble clic sobre el widget vemos las siguientes opciones:

Ajustes del feed de productos

Aquí definimos el formato y el aspecto que tendrá el catálogo donde el usuario puede buscar cualquier producto:

  • Dónde aparecerá la imagen: arriba, abajo o con el texto superpuesto a la imagen.

  • Identificación de que el producto está en oferta o en promoción: se muestra la etiqueta de Oferta o el importe o porcentaje del descuento.

  • Orden de aparición los productos.

  • Botón Comprar ahora: el producto se añade al carrito para su compra.

  • Filtro avanzado de productos para buscar por variaciones o rangos de precios.

  • Añadir texto en el filtro: para buscar por palabras clave.

  • Ocultar variaciones de productos agotados: por ejemplo, si no quedan productos en una talla o color determinado.

  • Activar vista rápida: se abre una ventana emergente con información detallada del producto.

  • Mostrar existencias de productos: cuando la cantidad de productos en stock sea inferior a un número determinado, le saldrá un aviso al comprador.

  • Funcionamiento de la tienda: Añadir al carrito añade un paso previo al módulo de pago. O Comprar ahora lleva directamente al formulario para finalizar la compra.

  • Vista rápida: iconos o un botón con el texto Vista rápida.

Estilos del catálogo de productos

Finalmente, desde la parte inferior acceder a tres menús desde donde ajustar y configuración todos los estilos y formatos de los elementos:

  1. Estilo de la caja del producto.

  2. Estilo de imagen del producto.

  3. Estilo de texto.

Ajustes de la caja del producto, imagen y texto
  • Colores: de fondo, de letra, de sombras

  • Estilos del texto: tamaño de la letra, fuentes, colores, espaciados, etc.

  • Rellenos y márgenes de las cajas y de las imágenes y posicionamiento de los elementos.

  • Sombras de las cajas.

  • Radios: para que los bordes de las cajas sean redondeados.

  • Posición de la imagen y ratio (proporciones que tendrán las imágenes). Se recomienda que las imágenes tengan todas las mismas dimensiones de imagen para tu tienda tenga un aspecto atractivo y sea coherente visualmente.

Estos ajustes siguen el mismo esquema que el resto de ajustes de estilo en Multi Builder.

Última actualización