Página del catálogo de 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. 

Nos llevará a la siguiente 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.

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

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. Comprar ahora lleva directamente al formulario para finalizar la compra.
• Vista rápida: iconos o un botón con el texto Vista rápida.

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

• 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 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.