Christmas images for your online store

In this article we are going to share four fundamental tips for leave your ecommerce 10 points and receive Christmas with everything. 🙂

Just as physical stores do, you too can decorate your online business with the “face” of Christmas. How? Play with him!

For that, we bring you four possible options:

1. Falling snow effect.
2. Background theme image.
3. Store with the colors of Christmas.
4. Santa hat in the logo.

These options are ordered by level of difficulty, from the easiest to the most complex.

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

1) Falling snow effect

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

2) Thematic background image

Another option to make your store more beautiful is to place a thematic background image in a standard repetition format (pattern). To do this, you need to have minimal knowledge of CSS.

We have prepared four different background options, each one with its CSS code so that you can add it directly in the administration panel.

The images and codes to insert are the following:

Christmas tree

See the Pen by Marcos Paiva () on .

christmas snow

See the Pen by Marcos Paiva () on .

Christmas ball

See the Pen by Marcos Paiva () on .

Merry Christmas

See the Pen by Marcos Paiva () on .

In the right column you will see a sample of the image you want to add, and in the left you will see the CSS code that will add the image to your store.

To add these images, you have to copy and paste the CSS code corresponding to the image you want to add in Admin Panel > Layout > Customize Layout > Advanced CSS Editing.

Then you have to click ‘Save changes’ to see how it turned out. If you regret it and want to remove the image, just remove that same piece of 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;`

3) Store with the colors of Christmas

Another change that you can apply in your store for these holidays is the color pattern!

In every Cloud template there is a section where you can make these changes, isn’t that great? To see your current color pattern, go to Admin Panel> Templates> Customize Design> Colors of your brand.

But beware! Before you do this, we want to give you some advice: keep the current colors so you can go back to the originals once Christmas is over.

To do this, you can make a backup copy of the colors by saving the codes of each one in a .txt file, preferably in an easily located place (for example, on your computer’s Desktop).

To find out the hexadecimal code for each current color in your store, go to Admin Panel> Templates> Customize Design> Colors of your brandclick on the current color and then on ‘New Color’.

Once this is done, save the codes to return to them whenever you want. 🙂

Do you have doubts about how to do it? Look the following video:

The backup would be something like this:

Let’s go to the colors!

The color patterns that we are going to propose are for the templates Material and its variations (wire, murano and oak), Man and its variations (woman, mode and gift) and Cosmetics and its variations (studio, fancy, and wear), but can be easily adapted to other templates.

Remember that, as we just showed you in the video, to add a custom color, you have to go to Admin Panel> Design> Customize Design> Colors of your brand. Then click on the color you want to change and then on ‘New Color’.

Variation 1

See the Pen by Marcos Paiva () on .

Variation 2

See the Pen by Marcos Paiva () on .

Material

Variation 1

Primary color of your brand: #D2322D
Your brand accent color: #B48D4C
Text Color: #484846
Background color: #F2F1ED

Variation 2
Primary color of your brand: #D2322D
Your brand accent color: #B48D4C
Text Color: #484846
Background color: #F2F1ED

Man

Variation 1
Background color: #F2F1ED
Contact Text: #484846
Text in the navigation bar: #FFFFFF
Text in navigation bar (hover): #ecf0f1
Navigation bar background: #B48D4C
Navigation bar borders: #B48D4C
Page title text: #B48D4C
Page title background: #FFFFFF
Buy Button Background: #D2322D
Secondary buttons and cart summary background: #484846
Button text: #FFFFFF
Footer Background: #D2322D
Footer text: #FFFFFF
Rest of the texts: #484846

Variation 2
Background color: #ebfcf8
Contact Text: #F65960
Text in the navigation bar: #FFFFFF
Text in the navigation bar (hover): #81063b
Navigation bar background: #F65960
Navigation Bar Borders:#F65960
Page title text: #F65960
Page title background: #FFFFFF
Buy Button Background: #F65960
Secondary buttons and cart summary background:#0F7E71
Button text: #FFFFFF
Footer Background: #81063b
Footer text: #FFFFFF
Rest of the texts: #81063b

Cosmetics

Variation 1
Primary color of your brand: #81063b
Secondary color of your brand: #F65960
Background color: #ebfcf8
Secondary Background Color: #0F7E71
Text color: #0F7E71

Variation 2
Primary color of your brand: #D2322D
Secondary color of your brand: #B48D4C
Background color: #F2F1E
Secondary Background Color: #484846
Text Color: #484846

4) Santa hat on the logo

Another detail that you can make in your store for Christmas is add the Santa hat to your logo! It’s great! It would be something like this:

To do this you need three fundamental things:

• a image 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 ).
• the 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 store by right-clicking it and choosing the ‘Save Image As’ option.
• the image of the hat in PNG. We recommend one of .

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

Type 1: for step 3, forever If you want to change the size of an object, do it with the ‘Shift’ key pressed, this way you will maintain the proportions and the object will not be distorted.

Type 2: Always keep an original version of your logo so you can restore it whenever you want.

Look at the editing example in this video:

You like me?

What do you think of these tips? Were you able to apply them in your store? I shared your opinion in the comments and leave the link of your ecommerce to see the result!

Still not taking advantage of the advantages of ? Try Tiendanube free for 15 days make your dream of starting a business come true.