Cómo preparar tu tienda online para recibir la Navidad

Diseños navideños

En este artículo te vamos a compartir cuatro consejos fundamentales para dejar tu ecommerce 10 puntos y recibir la Navidad con todo. 🙂

Tal como lo hacen las tiendas físicas, vos también podés adornar tu negocio online con “la cara” de la Navidad. ¿Cómo? ¡Jugá con el diseño!

Para eso, te traemos cuatro opciones posibles:

  1. Efecto de nieve cayendo.
  2. Imagen temática de fondo.
  3. Tienda con los colores de la Navidad.
  4. Gorro de Papá Noel en el logotipo.

Estas opciones están ordenadas por nivel de dificultad, desde la más fácil hasta la más compleja.

Bueno, sin más vueltas, ¡vamos a conocerlas!

1) Efecto de nieve cayendo

En la Navidad de 2016 te enseñamos a crear el efecto de nieve cayendo. Para recordar cómo hacerlo, entrá a este link y seguí el paso a paso. 🙂

2) Imagen temática de fondo

Otra opción para poner más linda tu tienda es colocar una imagen temática de fondo en formato estándar de repetición (patrón). Para ello, es necesario que tengas conocimientos mínimos de CSS.

Preparamos cuatro opciones de fondos diferentes, cada una con su código CSS para que agregues directamente en panel de administración.

Las imágenes y códigos para insertar son los siguientes:

Árbol de Navidad

See the Pen xmas_tree by Marcos Paiva (@marcospaiva) on CodePen.

Nieve de Navidad

See the Pen xmas_snow by Marcos Paiva (@marcospaiva) on CodePen.

Bola de Navidad

See the Pen xmas_balls by Marcos Paiva (@marcospaiva) on CodePen.

Feliz Navidad

See the Pen happy_xmas by Marcos Paiva (@marcospaiva) on CodePen.

En la columna de la derecha vas a ver una muestra de la imagen que querés agregar, y en la izquierda vas a ver el código CSS que agregará la imagen a tu tienda.

Para añadir estas imágenes, tenés que copiar y pegar el código CSS correspondiente a la imagen que querés agregar en Panel de Administración> Diseño> Personalizar Diseño> Edición CSS avanzada.

Luego tenés que hacer clic en ‘Guardar cambios’ para ver cómo quedó. Si te arrepentiste y querés sacar la imagen, basta con quitar esa misma parte de código que agregaste y volver a hacer clic en ‘Guardar cambios’.

Importante: Si querés usar un color de fondo personalizado, sacá la línea del código que dice`background-color: # f9fafb! Important;`

3) Tienda con los colores de la Navidad

Otro cambio que podés aplicar en tu tienda para estas fiestas es ¡el patrón de los colores!

En cada plantilla Nube hay una sección donde podés realizar estos cambios, ¿no es genial? Para ver el patrón de tu color actual, andá a Panel de Administración> Plantillas> Personalizar diseño> Colores de tu marca.

¡Pero ojo! Antes de que hagas ésto, queremos darte una consejo: guardá los colores actuales para que puedas volver a los originales una vez que pase la Navidad.

Para ello, podés hacer una copia de seguridad de los colores guardando los códigos de cada uno en un archivo .txt, preferiblemente en un lugar de fácil ubicación (por ejemplo, en el Escritorio de tu computadora).

Para saber cuál es el código hexadecimal de cada color actual de tu tienda, andá a Panel de Administración> Plantillas> Personalizar Diseño> Colores de tu marca, hacé clic en el color actual y luego en ‘Nuevo color’.

Hecho ésto, guardate los códigos para volver a ellos cuando quieras. 🙂

¿Te quedaron dudas de cómo hacerlo? Mirá el video a continuación:

La copia de seguridad sería algo así:

Colores

¡Vamos a los colores!

Los patrones de colores que vamos a proponer son para las plantillas Material y sus variaciones (wire, murano y oak), Man y sus variaciones (woman, mode y gift) y Cosmetics y sus variaciones (estudio, fancy y wear), pero pueden adaptarse fácilmente a otras plantillas.

Recordá que, tal como te mostramos en el video recién, para añadir un color personalizado, tenés que entrar a Panel de Administración> Diseño> Personalizar Diseño> Colores de tu marca. Luego hacé clic en el color que querés cambiar y después en ‘Nuevo color’.

Variación 1

See the Pen Material color palete by Marcos Paiva (@marcospaiva) on CodePen.

Variación 2

See the Pen Material color pallete 2 by Marcos Paiva (@marcospaiva) on CodePen.


Material

Variación 1

Color principal de tu marca: #D2322D
Color de acento de tu marca: #B48D4C
Color de los textos: #484846
Color de fondo: #F2F1ED

Variación 2
Color principal de tu marca: #D2322D
Color de acento de tu marca: #B48D4C
Color de los textos: #484846
Color de fondo: #F2F1ED


Man

Variación 1
Color de fondo: #F2F1ED
Texto de contacto: #484846
Texto en la barra de navegación: #FFFFFF
Texto en la barra de navegación (pasando el mouse):#ecf0f1
Fondo de la barra de navegación: #B48D4C
Bordes de la barra de navegación: #B48D4C
Texto del título de las páginas: #B48D4C
Fondo del título de las páginas: #FFFFFF
Fondo del botón de compra: #D2322D
Fondo de los botones secundarios y del resumen del carrito: #484846
Texto de los botones: #FFFFFF
Fondo del pie de página: #D2322D
Texto del pie de página: #FFFFFF
Resto de los textos: #484846

Variación 2
Color de fondo: #ebfcf8
Texto de contacto: #F65960
Texto en la barra de navegación:#FFFFFF
Texto en la barra de navegación (pasando el mouse): #81063b
Fondo de la barra de navegación: #F65960
Bordes de la barra de navegación:#F65960
Texto del título de las páginas: #F65960
Fondo del título de las páginas: #FFFFFF
Fondo del botón de compra: #F65960
Fondo de los botones secundarios y del resumen del carrito:#0F7E71
Texto de los botones: #FFFFFF
Fondo del pie de página: #81063b
Texto del pie de página: #FFFFFF
Resto de los textos: #81063b


Cosmetics

Variación 1
Color principal de tu marca: #81063b
Color secundario de tu marca: #F65960
Color de fondo: #ebfcf8
Color de fondo secundario: #0F7E71
Color de los textos: #0F7E71

Variación 2
Color principal de tu marca: #D2322D
Color secundario de tu marcaa: #B48D4C
Color de fondo: #F2F1E
Color de fondo secundario: #484846
Color de los textos: #484846

4) Gorro de Papá Noel en el logotipo

Otro detalle que podés realizar en tu tienda para Navidad es ¡agregarle el gorro de Papá Noel a tu logo! ¡Está buenísimo! Quedaría algo así:

Logo

Para hacer ésto necesitás tres cosas fundamentales:

  • un editor de imágenes como Photoshop o incluso un editor en línea como Canva (¿no sabés cómo usar Canva? ¡Tranquilo! Te lo contamos en este post).
  • la imagen de tu logotipo (preferentemente en PNG). Si no tenés el logotipo de tu marca guardado en tu computadora, podés descargarlo directamente desde tu tienda haciendo clic con el botón derecho del mouse y eligiendo la opción ‘Guardar imagen como’.
  • la imagen del gorro en PNG. Te recomendamos una de estas tres opciones.

Hecho ésto, sólo queda superponer las dos imágenes y ajustar la posición del logo. Después, subí la imagen a tu tienda yendo a Panel de Administración> Plantillas> Personalizar Diseño> Logotipo de tu tienda.

Tip 1: para el paso 3, siempre que quieras cambiar el tamaño de un objeto, hacelo con la tecla ‘Shift’ presionada, de esta manera vas a mantener las proporciones y el objeto no se va a distorsionar.

Tip 2: Siempre guardá una versión original de tu logotipo para que pueda restaurarlo cuando quieras.

Mirá el ejemplo de edición en este video:

¿Te gustó?

¿Qué pensás de estos consejos? ¿Pudiste aplicarlos en tu tienda? ¡Compartí tu opinión en los comentarios y dejá el enlace de tu ecommerce para ver el resultado!

¿Todavía no aprovechás las ventajas de vender por internet? Probá Tienda Nube gratis por 15 días realizá tu sueño de emprender.


¿Te gustó el contenido?


Marcos Paiva


    Ecommerce por Expertos

    Conversaciones exclusivas con especialistas en comercio electrónico. ¡Llevá tu negocio a otro nivel!