Página del producto

productos | tienda online | presentación | ventas

Para definir el aspecto y las funciones que van a tener las páginas de todos los productos iremos a Tienda>Diseño y estilo.

Diseño de la página del producto

Nos llevará a una página que incluye un widget llamado Producto 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ágina del sistema: Producto de tienda

Cuando clicamos en el widget vemos la siguiente pantalla con las siguientes opciones:

Aquí definimos el formato y el aspecto que tendrán todas las fichas de producto. Se aplican los mismos ajustes a todos los productos.

- Dónde que aparecerá la imagen: arriba, abajo, derecha o izquierda. Con efecto barrado o no.

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

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

- Producto a altura completa: la ficha del producto ocupa todo el alto de la pantalla.

- SKU: es el número de catálogo o de producto.

- Breadcrumbs, o migas de pan: orienta al usuario de dónde se encuentra en la tienda.

- Botón de "Añadir a carrito" en móvil: solo cuando el tipo de tienda online tenga carrito (y no se compre directamente sin pasar por el carrito).

- Botones para compartir el producto en redes sociales como Facebook o Instagram.

Estilos de la ficha del producto

En estos dos menús, Estilos en detalles del producto y en Estilo de imagen del producto, definimos y configuramos todos los estilos y el formato de los elementos:

Estilos de la caja del producto y de la imagen
  • 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, de las imágenes, posicionamiento de los elementos.

  • Sombras de las cajas.

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

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

Última actualización