Skip to main content

2.8.5.2 Apariencia - Estructura

Desde la sección del gestor Otros>Apariencia>Estructura se accede al menú de ajustes de estructura del tema (afectan a la vista pública). 

image.png


1. Se modifica el color primario del tema y el el color de fondo. 


image.png




Para modificar hacer clic en el círculo de color. Mostrará un selector de color. El color se puede especificar en hexadecimal, en RGB, en HSL y mediante selector.


image.png


2. Radio de las esquinas

El siguiente parámetro permite cambiar la apariencia de los ángulos en aquellos elementos del tema que se muestran ligeramente redondeados, pudiendo seleccionar entre ángulos rectos, ángulos ligeramente redondeados (por defecto) o ángulos muy redondeados. 

Esto cambiará, por ejemplo, la apariencia de los campos de formulario y los botones de la interfaz del cliente.

image.png


3. Tipografías

Desde el siguiente panel se puede actualizar la tipografía del tema y la de los encabezados. En los selectores de tipografías están disponibles la mayor parte de las tipografías de Google.


image-1666096424024.png


4. Anchos

Aquí se actualizan los anchos del encabezado, contenido y pie de página de forma independiente.
Ofrece dos modos de ancho. Ancho completo o Encajado. 
Ésta y las siguientes interfaces de Apariencia presentan una previsualización esquemática inmediata de los cambios. 

image-1666096659086.png



5. Barras laterales

Para actualizar las barras laterales como activar o desactivar el menú de navegación lateral, especificar el ancho a ocupar entre otros. La interfaz presenta indicaciones para comprensión de los ajustes posibles.

image-1666096838425.png



Ajuste Funcionalidad
5.1 Habilitar el navegador lateral
  • Botón para mostrar el navegador lateral recogido. 
  • Se ve el primer nivel de categorías.
  • Para ver las categorías descendientes requiere hacer clic en la del nivel superior.
  • En magenta está activo.
  • En la vista escritorio se muestra en el lateral derecho cuando el cliente está dentro de una categoría o subcategoría o producto.
  • En la vista móvil se muestra después de los productos cuando se accede a una categoría o a un  producto.
5.2 Navegación lateral ampliada
  • Botón para mostrar el navegador lateral abierto.
  • Se ve todo el árbol de categorías y categorías descendientes.
  • En magenta está activo.
  • En la vista escritorio se muestra en el lateral derecho cuando el cliente está dentro de una categoría o subcategoría o producto.
  • En la vista móvil se muestra después de los productos cuando se accede a una categoría o a un  producto.
5.3 Productos en la navegación lateral
  • Botón para mostrar el navegador lateral abierto que muestra también productos. 
  • Se ven todo el árbol de categorías y los productos que están en las categorías y subcategorías. 
  • No recomendado para tiendas con muchas categorías.
  • En magenta está activo.
  • En la vista escritorio se muestra en el lateral derecho cuando el cliente está dentro de una categoría o subcategoría o producto.
  • En la vista móvil se muestra después de los productos cuando se accede a una categoría o a un  producto.
5.4 Habilitar los filtros
  • Botón para mostrar la búsqueda por filtros (facetas).
  • La aplicación por defecto mostrará como filtros todas las características con sus valores (opciones) que tienen los productos, salvo que desde Catálogo>Características, se desactive el botón llamado Mostrar en búsqueda por facetas" en las que no se quiere que aparezcan como filtros.
  • En magenta está activo.
  • En la vista escritorio se muestra en el lateral derecho cuando el cliente está dentro de una categoría o subcategoría o producto. En el lugar de o después del navegador lateral.
  • Se pueden mostrar el navegador lateral y los filtros. O solo el uno o el otro.
  • En la vista móvil se muestra después de los productos cuando se accede a una categoría o a un producto. En el lugar de o después del navegador lateral.
5.5  Habilitar mostrar color en filtro (Búsqueda por facetas)
  • Botón para añadir a la búsqueda por filtros las características de tipo color y sus valores de color.
    Misma forma de visualización que los filtros salvo porque se muestra recuadro del color. 
5.6 Ancho de la columna lateral
  • Para definir el ancho que va a ocupar el navegador lateral.
  • A tener en cuenta,  concretamente en vista escritorio,  que el máximo son 12 unidades. Si ocupa 3 unidades el resto del contenido en la horizontal tendrá disponible 9 unidades de espacio y el contenido se adaptará.

6. Encabezado principal

Ajuste para dos opciones:

  • Encabezado flotante cuando se hace scroll en escritorio.
    Al activarlo, el encabezado de la página se mantendrá en la parte superior al hacer scroll sólo en la vista de escritorio.

  • Encabezado flotante cuando se hace scroll en móvil.
    Al activarlo, el encabezado de la página se mantendrá en la parte superior al hacer scroll solo en la vista móvil.

image.png


7. Página del producto

Aquí se puede ajustar la vista de la ficha de producto con dos opciones. Destacado y columna central o Dos columnas. 
En ignorar valores por defecto en el configurador si el botón está activo se cargará el producto en la vista del cliente sin ninguna opción seleccionada. No mostrará el precio hasta que el cliente seleccione en cada característica una opción.

Ajuste de apariencia de ficha de producto en destacado y columna central


image.png


7.1 .Ajuste de apariencia de ficha de producto en dos columnas. Este modo de ficha de producto dispone de los siguientes ajustes:

7.1.1 Modo de presentación del producto.
Ajuste para elegir entre mostrar todas las opciones directamente o que se muestre un botón y este abra el panel de personalización.

7.1.1.1 Normal

image.png


7.1.1.2 Abrir con botón (Requiere hacer clic en el botón de presupuestar para acceder a las opciones de configuración del producto)

image.png


 7.1.2 Botón para usar o no usar carrusel de imágenes para el modo de dos columnas

 7.1.3 Botón flotante de añadir al carrito (activar o desactivar).
Si se activa, el usuario verá una barra inferior que incluye el precio y el botón de comprar. Esta barra solo se muestra cuando el botón original de añadir al carrito no está en pantalla y el usuario no ha navegado más abajo de dicho botón.

 7.1.4 Ancho de la columna en el modo de producto e dos columnas.
Cambia la anchura de la columna que aparece junto al configurador de producto para hacerla más ancha o estrecha.
Se recomienda un valor no mayor de 6 ni menor de 3.

 7.1.5 Invertir sentido de las columnas en ubicación horizontal en la página del producto.
Afecta a los dos modos de ficha de producto.

image.png


8. Listado de productos

8.1 Ajuste Productos por fila. Numero de elementos a mostrar por fila cuando se visualiza la lista de productos

8.2 Productos por fila en móvil. Número de productos a mostrar por fila en móvil.

image-1666097242334.png



9. Página de categorías

Botón para mostrar o no la imagen de la categoría cuando se está en ella. En magenta muestra la imagen.

image.png