Skip to main content

Apariencia - Introducción

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


image.png


Observaciones sobre el tema

La plantilla del tema ha sido diseñada empleando como base el Framework de diseño Bootstrap 5, lo que significa que cada fila soporta un máximo de 12 columnas.


Los cambios en esta página se guardan automáticamente.


Personalización más compleja (Sólo expertos).
Se pueden introducir reglas de css  propias empleando la herramienta de scripts de terceros.


Estructura
Desde aquí se modifica el color primario del tema y el el color de fondo. 

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



Más ajuste del tema (apariencia)
Radio
  • En la sección Ajustes>Ajustes generales>Tema>Se presentan más opciones de laspersonalización esquinas

El siguiente parámetro permite cambiarde la aparienciaapariencia.

  • En la sección de losAjustes> ángulosScripts de terceros se pueden añadir elementos, modificar la apariencia, aplicar estilos, enlaces externos a archivos JavaScript y CSS, más etiquetas meta adicionales para incluir en aquellosel head. Perfecto para cargar bibliotecas externas como Bootstrap, jQuery o archivos SDK de redes sociales.

  • Con el maquetador Builder disponible en paginas de contenido y desplegable de elementos del temamenú 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



    Tipografías

    Desde el siguiente panelprincipal se puede actualizartambién modificar la tipografíaapariencia. delPor 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


    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. No requieren guardado.

    image-1666096659086.png


    Barras laterales

    Desde aquí actualizamos las barras laterales como activar o desactivarejemplo; 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


    Encabezado principal

    Ajuste para dos opciones:

    •  Al activarlo, el encabezadocuerpo de la página se mantendrá en la parte superior al hacer scroll sólo en la vista de escritorio.
    • Al activarlo, el encabezado de la página se mantendrá en la parte superior al hacer scroll solo en la vista móvilinicio.

    image.png


    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 mostrará al cliente el producto sin ninguna opción seleccionada y 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

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

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

        Normal
        image.png

    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

      •  Botón par usar o no usar carrusel de imágenes para el modo de dos columnas
      • 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.
      • 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.
      • 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



    Listado de productos

    image-1666097242334.png


    Página de categorías

    image-1666097310070.png


    Textos

    Cada sección es un editor de textos. En cada una se editan los textos generales que se presentan en distintas secciones en la vista pública. Cada actualización del texto requiere guardado desde el botón "Guardar" del editor actualizado.

    image-1666097763255.png

    Información adicional del pedido se muestra en zona inferior del pedido en la vista pública. Su propósito es mostrar contenido de interés al cliente en relación con el pedido.

    image-1666097997248.pngEditor de texto con el propósito de redactar una breve descripción de la empresa y mostrarlo en el pie de página de la vista pública.

    image-1666098032127.png

    image-1666098390113.png

    Editor de texto con el propósito de editar el mensaje para mostrar al público cuando la tienda esté en modo mantenimiento

    image-1666098453513.png


    Logos

    Desde esta sección se cargan las diferentes imágenes para los logotipos. Cada carga de imagen requiere guardado con el botón correspondiente de la sección actualizada.

    image-1666098693638.png

    Cada sección de ajuste presenta indicaciones de las imágenes a cargar. 

    Carga de imagen del logo para cabecera de la página.

    image-1666098801980.png

    Vista del cliente con ejemplo de logo en la cabecera de la página

    image-1666099132154.png


    Carga de imagen de imagen del logotipo para mostrar en los PDF. Presupuestos y facturas entre otros.

    image-1666099091572.png

    Vista pública del logo de ejemplo en el documento PDF

    image-1666099323807.png


    Carga de imagen para el logo en el pie de página. 

    image-1666099380494.png

    Vista pública del logo en el pie de página

    image-1666099455660.png

    Carga de imagen del logo para los emails

    image-1666099514951.png

    Vista del logotipo en el encabezado del email recibido por el cliente.

    image-1666099675709.png







    Carga de imagen del logotipo para el favicon.

    image-1666099730460.png

    Ejemplo de logotipo tipo favicon desde la vista del cliente

    image-1666099812734.png

    El menú de "Tamaño de imágenes" está disponible en un capítulo de este manual llamado "Imágenes". 

    • Back to top