Regresar a la documentación

Plantilla Base: Personalización

En esta completa documentación aprenderemos a personalizar correctamente nuestra Plantilla Base. Si no la tienes activa, hazlo ahora mismo antes de seguir o  puedes aprender en este documento dando click aquí.

Personalizar nuestra plantilla Base es una tarea muy fácil. Tendremos que definir antes que nada el color primario y secundario que tendrá el diseño. También puedes usar un logo si lo tienes, un mensaje de bienvenida, administración de widgets, tus redes sociales y códigos de terceros como chat de soporte, flotantes, contador de visitas, etc..

Para ingresar al personalizador de nuestra plantilla, vamos a la siguiente ruta en el menú lateral del administrador de nuestra propia tienda virtual:
Diseño >  Personalizar 

Nos saldrá una pantalla muy similar a la que viene a continuación:

En el costado izquierdo podremos ver un listado de menú (lo remarcamos con ese color verde) que tiene diferentes funciones para personalizar nuestra plantilla Base activada en este momento.

Una de las interesantes funciones del personalizador de tu tienda virtual, es que podemos ver en vivo cada cambio que vayamos realizando en nuestra tienda virtual, y lo veremos reflejado sin necesidad de guardar los cambios y que nuestros clientes sean testigos de nuestros «experimentos». Solo cuando estés seguro de que el resultado es el esperado, le podremos dar click en el botón Publicar.

Título y descripción de nuestra tienda

El título de nuestra tienda virtual y su descripción son de vital importancia y editarlos es en realidad muy fácil de manipularlo. Para hacerlo debemos dar click en el botón del personalizador que dice Identidad del sitio.

Luego de dar click en Identidad del sitio nos mostrará un par de campos los cuales tendremos que editar de acuerdo a nuestra intención; Título de la tienda y descripción de la misma.

Una vez cambiado el título y descripción que vienen por defecto en tu plantilla, en la parte derecha de tu navegador podremos ver los cambios en vivo que vayamos haciendo. Si estás seguro con el resultado sólo deberás dar click en el botón Publicar que saldrá en la parte superior de nuestro personalizador.

Colores, logo y mensaje de bienvenida

En este punto vamos a dar un gran paso para llegar a ese nivel de personalizado que queremos en nuestra tienda virtual. Daremos color, pondremos nuestro logo (opcional pero recomendado) y daremos un mensaje de bienvenida a todos nuestros clientes.

Para lograr esto, ya situados en el personalizador, daremos click en Personalizar Plantilla como lo muestra la siguiente captura:

Nos saldrán diferentes campos a personalizar con sus respectivas funciones. Vamos a empezar con lo primero:

Colores

Esta plantilla cuenta con dos tipo de colores definidos: Primario y Segundario. Como sus nombres lo suponen, el primero es el más destacado y el segundo es un refuerzo con una presencia menor.

Para definir el  color primario, es cuestión que hagamos click en Elige un color y se nos abrirá una completa paleta de colores para que definamos el que más nos guste. Cada vez que asignemos un color, se reflejará en vivo el cambio en nuestra plantilla.

La misma tarea se hace para cambiar el color segundario. Los cambios lo veremos reflejados en algunos botones, enlaces y bordes de nuestra tienda virtual.

Una vez estemos satisfechos con nuestros colores. Basta con dar click en el botón Publicar que sale en la parte sueprior de nuestra pantalla.

🙂 Eso es todo. Ya los visitantes podrán ver reflejado en nuestra tienda virtual los colores que nos dan esa identidad que queremos trasmitirles.

Logo

Brindarle a nuestros clientes confianza debe ser una premisa que nosotros debemos tomarnos muy enserio. Y uno de esos pilares que juegan muy a favor, es tener una tienda organizada en todo sentido, como por ejemplo, un logo que nos identifique en todo momento. 😉

Continuando en nuestra sección de Personalizar Plantilla del personalizador, encontraremos las opciones de: Ocultar título, ocultar descripción y agregar LOGO.

Para continuar con este paso, debes tener en tus archivos ya definido el logo que vamos a usar. Los formatos permitidos son JPG PNG y GIF.

Para este ejemplo nosotros usaremos el siguiente logo. (Puedes descargarlo para seguir con este tutorial).

Bueno. Para montar nuestro logo, debemos hacer click en el botón Seleccionar Imagen como lo ilustramos en la siguiente captura:

Se nos abrirá una ventana emergente que contiene el diferente material multimedia que nuestra tienda va sumando durante el tiempo. Para cargar una nueva imagen daremos click en el enlace Subir archivos.

Luego nos mostrará una pantalla con un botón de Seleccionar Archivos. Al hacer click, buscaremos en nuestro equipo la imagen que usaremos como logo y lo cargamos.

Cuando la carga termina, nos mostrará la imagen sobre un marco azul (seleccionada). También en la parte inferior derecha del módulo mostrará un botón que dice Elige la Imagen. Daremos click en ese botón!

Una vez pinchado el botón de Elige la imagen, nos saldrá en el personalizador y en la vista previa de la tienda el logo recién seleccionado.

La tarea de montar nuestro logo está casi terminada. Ahora solo queda jugar con las casillas de validación que oculta o muestra el título y la descripción nuestra tienda. Nosotros aconsejamos que si tienes un logo, lo mejor sería activar la casilla de ocultar título te texto. Misma tarea podrás realizar a tu elección con la casilla de la descripción.

¡Listo! Ya entendido y operado la función de tu logo, recuerda guardar los cambios dando click en Publicar en el botón azul de la pate superior de tu pantalla.

 

Mensaje de bienvenida

La plantilla Base cuenta con un mensaje de bienvenida para todos tus clientes. Este campo lo podrás editar en cualquier momento a tu preferencia o momento de la tienda. Editarlo es muy fácil y te lo mostramos a continuación.

En el mismo módulo de Personalizar Plantilla, hacemos scroll hasta la parte final y encontraremos dos campos llamados título y mensaje de bienvenida. Por defecto tu plantilla tendrá un texto. Sólo tendrás que borrar lo que está en ambos campos y reemplazarlos por tus propias líneas.

 

Redes Sociales

Enlazar las redes sociales con nuestra tienda es de suma importancia. En la siguiente documentación aprenderemos a mostrar nuestras cuentas sociales de manera fácil y sin complicaciones. Si contamos con una App, también podremos enlazar el link directo a las tiendas iOS y Google Play.

Si todavía te encuentras en Personalizar Plantilla deberás regresar atrás dando click en la zona que te marcamos a continuación.

Bien, ahora ya situados en el Personalizador, vamos a dar click en el item que dice Redes Sociales.

Este módulo, para todos los items (redes) se maneja de la misma manera. Debes asignar la URL  de cada una de tus redes sociales y luego activar el botón de Mostrar icono correspondiente de cada una.

Por ejemplo:
Agregamos url de nuestro FansPage: https://facebook.com/wootiendas (Cambia Wootienda por la tuya) y activamos la casilla de mostrar icono.

En la anterior imagen, activamos el ícono de Facebook y también suministramos la URL de nuestro perfil en la red social. Ya usted deberá hacer lo mismo, claramente usando su propio perfil de FB.

Esta función es la misma para todas las redes sociales disponibles para su activación que se encuentran en la plantilla Base. Podrás activar cuantas redes quieras. 🙂

 

Códigos de terceros

Antes de iniciar con este otro item de la personalización de la plantilla Base, queremos primero aclarar qué son y para qué sirven los códigos de terceros.

¿Qué son los códigos de terceros?

Los códigos de terceros son pequeñas líneas de códigos que diferentes empresas en la red ofrecen a sus usuarios de acuerdo al servicio ofrecido. Un ejemplo claro puede ser Google Analytics.
GA es el sistema que te permite medir el tráfico que ingresa hacia tu web, tienda o aplicación de manera profesional. Es el más famoso de la industria.

Al momento de crear una cuenta en GA, la plataforma te pedirá que pongas unas línea de código en la web o aplicación que vas a realizar el seguimiento. Y es allí donde la posibilidad de pegar códigos externos en la plantilla Base entra en juego, para que al insertarlo, ya puedas hacer seguimiento a todas las visitas que ingresan en tu tienda virtual.

Este mismo procedimiento se hace con los códigos de terceros, que van desde medición de tráfico, chats de soporte, módulos flotantes, códigos de publicidad, píxeles de seguimiento, etc..

Importante: Muchos de los códigos de terceros te pedirán que pegues el mismo en una parte específica de tu tienda virtual.
1. Adentro de la etiqueta <head>
2. Adentro de la etiqueta <body>
3. Al final de la etiqueta </body>

Todas las plantillas de Wootiendas cumplen con esta característica y podrás agregar los códigos que sean necesarios según el requerimiento de tu proveedor de servicio.
Aviso: Aconsejamos usar esta herramienta con cuidado. También a usar aplicaciones reconocidas. Un mal uso de esta función podría poner en riesgo el diseño y funcionalidad de tu tienda virtual.

Conocido esto, ahora abramos el link de Códigos de Terceros en el personalizador.

Al abrir el enlace encontrarás los 3 campos en donde agregar código de terceros y según el requerimiento de tu proveedor. Adentro o antes de cerrar <head>, adentro de <body> y justo antes del cierre de </body>.

Una vez insertado el código deberás publicar e ir hacia el inicio de tu tienda virtual para ver los cambios o funcionalidades de la aplicación instalada. Recuerda que puedes eliminar códigos en cualquier momento también.

 

Fondo de tu tienda (Color o imagen)

Finalizando con la personalización de estilos en tu tienda virtual con la Plantilla Base, documentamos un paso a paso cómo podemos cambiar el fondo de nuestra tienda virtual.

Si bien los dos items tienen la misma función, en el personalizador lo encuentras de manera separada.

Ya identificados, iniciemos con el item Colores. Hacemos click en el mismo y nos encontraremos una paleta de color llamada Color de fondo.

Lo que tendremos que hacer es click en Elige un color  para que se nos abra la paleta de colores y seleccionamos el que más nos guste.

Dependiendo de la resolución de pantalla que tenga tu equipo, podremos ver en vivo el cambio de color del fondo. En caso de que estés con una resolución pequeña, deberás dar click en el enlace de Ocultar controles que se encuentra en la parte inferior de tu pantalla, para poder ver los cambios en vivo sin tener que guardar los ajsutes.

Una vez estés conforme con el color de fondo que tiene tu tienda virtual, deberás dar click en el botón de Publicar para hacerlo efectivo.

Ahora veamos cómo activar una imagen de fondo

Jugar con los fondos es importante. En especial con una imagen que podríamos personalizar de acuerdo a diferentes momentos y entornos de nuestra tienda virtual. Navidad, Madres, Fiestas patrias, halloween, etc…

Daremos click en imagen de fondo:

El proceso para cargar la imagen de fondo es el mismo que ya realizamos por ejemplo con el logo. Damos click en Seleccionar Imagen > Subir archivos y seleccionamos el fondo que vamos a usar en nuestra tienda previamente guardado en nuestro equipo. Cuando termine de cargar, daremos click en el botón Seleccionar Imagen.

Al terminar este proceso, se mostrará una pantalla como la que vendrá a continuación:

Podrás editar la configuración y la posición del fondo de tu página según tus preferencias. Recuerda que puedes probar en vivo sin tener que guardar los cambios. Una vez ya estés satisfechos con los resultados, deberás dar click en publicar para hacer efectivo tu nuevo fondo.

 

Y bueno. Hemos terminado de personalizar correctamente nuestra plantilla Base de Wootiendas. Si tienes más consultas acerca de esta documentación, tenemos preparado un foro de discusión y soporte a donde podrás escribir en cualquier momento. Entrar al foro de Plantilla Base.

Aviso: Para editar el menú y manejar widgets de tu tienda virtual, busca los respectivos tutoriales en la documentación.

Regresar a la documentación