There are many ways to make your theme more attractive and unique. It can be done through applying some simple techniques. Based on the modifications you made in the
global.cssfile earlier, you may have already created a unique theme.
You can change the look of the themes further by adding or replacing the default images with new images you created or obtained from various web resources. This chapter elaborates on applying the images, particularly background images, to complete the look of the theme for your online store.
Firstly, we will learn how to change the background images by editing the CSS. We will also explore how to modify the correct lines in the appropriate section of the CSS file.
Then let's look at replacing a couple of the default background images and see
what effect this has on the overall design. We will show how to view the image
information and then figure out what to replace or change. For this exercise, we will
insert images through the global.css file. Later, we will also have
to edit some other files, depending on where the relevant code are.
We will then add new images to areas which, in the default theme, do not currently have any background images.
In order to add a new background image, if you have little understanding of how CSS works, just follow these steps and you will be able to modify the background images used on the particular elements. You will need to repeat these steps on the other pages if there are other elements with background images.
You may have not realized that a lot of impact is made by the images you use on your PrestaShop store. If you change the color of the block headers, you get a new look. Add more dramatic background patterns to your page, and you may change the feel of your entire site to something else.
Although there are no rights or wrongs in designing and designs are always subjective, there are conventions and common concepts that you may use in dealing with images on your site. It would be quite strange to use colorful zany looking images for professional business concerns. You may end up presenting the wrong image to your audience by using the wrong "image" in your website!
Notice that in PrestaShop default theme, the blocks headers make extensive use of background images. They create a "fuller" or 3-dimensional look to the blocks, which would otherwise look flat.
In most e-commerce systems, the content is separated from the layout. In some systems, the CSS styles facilitate rounded corners for blocks. However, in many cases, the trouble is with the browser, some browsers do not support using CSS for rounded corners, while other browsers do support this CSS feature.
To avoid this problem where different browsers show a different look for your theme blocks, it is much easier to use corner images as background images. This is one of the reasons you will notice that most of the rounded blocks you see on the default theme use background images as PrestaShop has not built any code to feature rounded corners.