Regresar a la documentación

Plantilla Woozom: Personalización

En este tutorial vamos a aprender a personalizar correctamente nuestra plantilla más usada hasta el momento. Woozom.
Antes de iniciar, deberás activar la plantilla en el menú lateral izquierdo de tu pantalla: Diseño > Plantillas

Sólo deberás pasar el cursor sobre el grid de la plantilla Woozom y dar click en el botón activar.
Una vez activada la plantilla, vamos a dar click en el enlace Personalizar: Diseño > Personalizar

Ya adentro del personalizador de nuestra tienda, vamos a ir paso por paso con las opciones disponibles a configurar que salen en la parte derecha. Empecemos con la sección Diseño de la tienda.

Diseño de la tienda


1- En esta zona seleccionaremos el color del encabezado de nuestra tienda. A medida que cambies el color, en la parte derecha de tu pantalla, podrás observar cómo está quedando tu diseño. Consejo: Jugar con colores oscuros seguro mejorará tu diseño.
2- Ahora deberás seleccionar el color de los textos y enlaces del encabezado de tu tienda online. Si usas color oscuro en tu fondo de encabezado, aconsejamos dejar esta zona con color blanco.
3- Color segundario. En esta zona podemos seleccionar un color que resalte el menú de tu tienda cuando se posiciona el cursor sobre alguna sección, como también en el borde que cubre el buscador del encabezado de tu tienda.
4- Si contamos con un Logo para nuestra tienda online lo podemos agregar en esta opción. Tendremos que dar click en el botón Seleccionar imagen y cargar el logo que tengamos previamente guardado en nuestro equipo.
5- Ya por último, en esta zona, lo que tendremos que hacer es seleccionar la casilla en caso de que hayamos utilizado un logo (imagen). Esto lo que hará es esconder el texto (nombre de la tienda) que sale por defecto al activar la plantilla Woozom. Este paso es indispensable definirlo.

Redes sociales


Ahora estamos en las redes sociales de nuestra tienda online. Asignar correctamente nuestras redes sociales es muy fácil.
1- Suministramos la URL de nuestra red social. (En este ejemplo solo se muestra Instagram).
2- Seleccionamos la casilla para que se active el icono de la red social correspondiente en el encabezado de nuestra tienda.

Slider de imágenes

Si observas en el inicio de esta plantilla Woozom (Click aquí)  podrás ver que hay un slider interesante justo debajo del menú de la página. Este slider se puede aprovechar para promocionar nuevos productos, lanzamientos, formas de pago, etc…
Sigamos las siguientes instrucciones para asignar imágenes en el slider…

1- Debes activar la casilla que señalamos en el punto uno de la imagen. Activando dependerá de mostrar o no el slider en el inicio de nuestra tienda online.
2- En esta sección cargamos la imagen que queramos mostrar en el slider 1. (Misma actividad para hacer en el slider 2, 3 y 4 que salen en esta zona).
IMPORTANTE:
Hasta la versión actual de esta plantilla, sólo está habilitado usar 4 imágenes en el slider.
+ En caso de que no vayas a usar las 4 sliders, deberás repetir una o más, ya que es obligatorio tener todos los sliders completados.
+ Las medidas de todos las imágenes recomendamos que sean exactamente iguales.
 

Módulos informativos

Los módulos informativos son 3 bloques que se encuentran en el inicio de la plantilla de tu tienda online, como también en el pie de página de la misma. Míralos en este link, o en la siguiente imagen:
Grid inicio

Pie de página
Estos módulos informativos son fáciles de configurar y son pilares indispensable para ofrecer información relevante a tus clientes. Desde garantías, entregas, descuentos, etc…
En este apartado te enseñaremos a editar el Grid Inicio y el Pie de página.
Grid de Inicio

1- En este espacio agregamos el título del grid. Procura ser corto y muy muy directo.
2- Agrega la descripción de este grid. Puedes extenderte un poco pero no abuses 🙂
3- Acá agregamos algún link que tengamos a la mano. Ya sea directo a un producto o a una página interna.
4- Texto del botón que llevará a la acción.
Deberas hacer esto mismo también con el Grid , 2 y 3 que salen en tu pantalla.
Pie de página

1- En este punto seleccionamos un ícono que queramos para ilustrar nuestro mensaje.
2- Esta zona se usa para el título del contenido.
3- Por último está el segundo título título del mismo módulo en caso de que sea necesario.
Esta misma tarea la tendrás que hacer para el módulo 2, 3 y 4 que se encuentra en tu pantalla.
 

Códigos externos

Esta sección son campos en donde agregar código externos a la plantilla. Ya sea modificaciones (nivel programador) o códigos externos como chats, banners, Analytics, etc…

Cuando algún proveedor te ofrece un código para agregar en cierta zona de tu tienda, lo agregarás en alguna de estas según lo indicado. Pedimos poner mucha atención y no pegar toda clase de códigos desconocidos que puedan dañar el diseño de tu tienda.

Identidad del sitio

La identidad del sitio es un apartado obligatorio que deberías siempre definir.

1- El título que tendrá tu tienda. Es el que mostrará en los buscadores, redes sociales y demás sitios o redes sociales.
2- Descripción de tu tienda que se mostrará en los resultados de búsqueda.
3- El icono o el favicon es ese icono que muestran todos los navegadores cuando se navega una página. Por ejemplo la F de facebook o la G de Google.

Esto sería todo para editar el diseño de nuestra tienda. Capitulo aparte merece el módulo de Woocommerce que si bien su configuración por defecto es estable, podrás explorar cada una de ellas y editar funciones como ¿Cuántos artículos mostrar en la página principal? ¿Mostrar los productos en la página principal bajo qué categorías (Popular, ventas, nuevos, precios alto primero, precio bajo primero, etc).

Regresar a la documentación