Christmas pictures for your online shop

In this article we will share four basic tips for Leave your e-commerce 10 points and get Christmas with everything. 🙂

Just like physical stores, you can decorate your online store with the “face” of Christmas. As? Play with the design!

For this we bring you four possible options:

Falling snow effect.
Background image on the topic.
Shop with the colors of Christmas.
Santa hat in logo.

These options are ranked by difficulty, from easiest to most complex.

Well, without further ado, let’s meet her!

1) Falling snow effect

In Christmas 2016 we will teach you how to create the effect of falling snow. To remember how to do it, go to this link and follow step by step. 🙂

2) Theme wallpaper

Another way to beautify your shop is to place a themed background image in a standard repeat format (pattern). For this you must have minimal CSS knowledge.

We have prepared four different background options, each with their CSS code, so you can add them directly in the admin panel.

The images and codes to insert are as follows:

Christmas tree

See the pen Christmas tree by Marcos Paiva (@marcospaiva) At CodePen.

Christmas snow

See the pen xmas_snow by Marcos Paiva (@marcospaiva) At CodePen.

Christmas bauble

See the pen christmas balls by Marcos Paiva (@marcospaiva) At CodePen.

Merry Christmas

See the pen Merry Christmas by Marcos Paiva (@marcospaiva) At CodePen.

In the right column you can see an example of the image you want to add and in the left you can see the CSS code that will add the image to your shop.

To add these images you need to copy and paste the CSS code that corresponds to the image you want to add Admin Panel > Layout > Customize Layout > Advanced CSS Editing.

Then you need to click “Save Changes” to see how it turned out. If you regret it and want to remove the image, simply remove the same code you added and click “Save Changes” again.

Important: If you want to use a custom background color, remove the line of code that says “background-color: #f9fafb! Important;`

Create your online store and sell online

3) Shop with the colors of Christmas

Another change you can request at your store for these holidays is the color pattern!

Every cloud template has a section where you can make these changes, isn’t that great? To view your current color swatch, go to Admin Panel > Templates > Customize Theme > Your Brand Colors.

But beware! Before you do this, we would like to give you some advice: Keep the current colors so you can go back to the originals after Christmas.

To do this, you can make a backup copy of the colors by saving the codes of each color in a .txt file, preferably somewhere easy to find (e.g. on your computer desktop).

To find out the hexadecimal code for each current color in your store, go to Admin Panel > Templates > Customize Theme > Your Brand Colorsclick on the current color and then on ‘New Color’.

Once this is done, save the codes for future reference. 🙂

Do you have doubts how to do it? Check out the following video:

https://www.youtube.com/watch?v=zYt8TKdTWd4

The backup would look something like this:

Colours

Let’s get to the colors!

The color swatches we are going to propose are for the templates material and its variations (wire, murano and oak), Man and his variations (woman, mode and gift) and Cosmetics and their variations (Studio, Fancy and Wear), but can easily be adapted to other templates.

Remember that as we just showed you in the video you have to go to add a custom color Admin Panel > Theme > Customize Theme > Your Brand Colors. Then click the color you want to change, then click New Color.

version 1

See the pen Pale color material by Marcos Paiva (@marcospaiva) At CodePen.

Variant 2

See the pen Material color palette 2 by Marcos Paiva (@marcospaiva) At CodePen.

material

version 1

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

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

man

version 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

Variant 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

version 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

Variant 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) Santa hat on the logo

Another detail you can do in your store this Christmas is Add the Santa hat to your logo! It is great! It would be something like this:

logo

To do this, you need three basic things:

a photo editorI know, how Photoshop or even an online editor like canvas (Don’t know how to use Canva? Don’t worry! We’ll tell you in this post).
that Image of your logo (preferably in PNG). If you don’t have your brand logo saved on your computer, you can download it directly from your shop by right-clicking on it and choosing the “Save Image As” option.
that picture of the hat in PNG format. We recommend one of these three options.

This done, there is only Overlay the two images and adjust the position of the logo. Then I uploaded the image to your shop by going to Admin Panel > Templates > Customize Theme > Logo of your store.

type 1: for step 3, forever If you want to change the size of an object, do this while holding down the ‘Shift’ key so that the proportions are preserved and the object is not distorted.

type 2: Always keep an original version of your logo so you can restore it at any time.

Watch the editing example in this video:

https://www.youtube.com/watch?v=6gvi18J6xCw

You like me?

What do you think of these tips? Could you apply them in your shop? I shared your opinion in the comments and left the link of your e-commerce to see the result!

Still not reaping the benefits of selling online? Try Tiendanube for free for 15 days and make your dream of starting a business come true.