(For more resources on PrestaShop 1.3, see here.)
Let’s move on with our next step.
Of course, exploring every tab in the back office would be advantageous, but we will specifically touch only those points that will affect your theming process. We will now look at how we can modify the following:
Before going further, I would like to emphasize two important points. They are:
When you download PrestaShop, by default, you will have a copy of the PrestaShop theme folder.
Go to the PrestaShop_1.3.1/themes/PrestaShop folder. Copy this entire folder and save it on your computer. You may rename the theme accordingly, for example, theme1. Compress this into a ZIP file.
Upload the renamed folder into the themes directory on your hosting through your cPanel or FTP.
You will now have two themes in your /themes folder which are PrestaShop and theme1.
You can now log in to your PrestaShop Back Office | Preferences | Appearance and switch to your theme1 that you just installed and click on the Save button.
On this page, you may also control what logo, favicon, and the navigation pipes you want to use throughout your website.
Now, let’s start with the modification of these theme elements to complete the look of your new theme.
A logo is an important element of a company’s or store’s image, and it can contribute to the brand’s marketing success. Therefore, getting a good quality logo is fundamental for the business.
Getting a unique and attractive logo design can be daunting, especially for those who are not born with a flair for design. However, fortunately, there are various resources that you can use to get ideas or even create a very professional looking logo that you can use in your new online store.
Some online resources for logo designs can be found at:
Another element, which is quite important here, is the favicon. The Favicon is the little icon representing the website you are visiting which gets displayed in the address bar of every browser.
Usually, the favicon and the logo are the same thing, except for their sizes and the formats.
They are not necessarily the same though. You may find some online resources that you can use to generate a favicon for the store. Make sure you have prepared the favicon icon before you try to replace the current favicon.
If you are unsure of how to go about making a favicon, you may generate it online (using,http://www.favicon.cc/ or http://www.freefavicon.com/). Save the file on your hard drive and then upload it to your PrestaShop store. Uploading it is shown in the next section.
In this simple exercise, you have just uploaded the logo that you had created, and PrestaShop has, by default, placed it in the correct directory in your new theme1 directory through the back office panel.
If you did not choose the new theme, for example, theme1 in Preferences | Appearance under Themes, the logo you upload will go to the wrong directory.
The Center Editorial Block is where you see the main image at the center column, as we indicated previously in the front office.
This is an important block, as this is where your visitors first arrive when they visit your store. It gives a first impression to your site visitor, and therefore, you need to consider what to include in it very carefully.
The Centre Editorial Block can be modified through Back Office | Modules | Tools | Home text editor.
In this section, you can also edit the Centre Block image, which is referred to as Homepage’s logo, and this title can be quite misleading as it may be confused with the actual logo. However, we have covered this matter in the previous article and did a mapping of each field here to the front office page of the store.
You only need to upload the image you want to replace it with and continue with editing the Homepage logo link, which is the link for this image (Homepage’s logo). You may just leave it set to your current website address if you want (for example, www.mydomainname.com). You can also leave it blank if you don’t want the image to be a link.
Furthermore, you will see Homepage logo subheading, which is the small letters you see on the default theme page that appear under the image.
Let’s replace the Homepage’s logo image, Homepage logo link, and a new Homepage logo subheading:
It is possible to work with different image sizes, but the width of the image will “disturb” your column settings. If you are not going to make any unnecessary changes, then it is best to use images of the safe maximum width for the center column which is 530 pixels. If you exceed this width it will push your right column outside the standard browser view. Now let’s have a look at what you have achieved so far.
You have modified your Center Editorial Block by inserting a new Homepage’s logo image, Homepage logo link, and a new Homepage logo subheading.
We will look at the header section of the page. The default layout comprises the following in the header section:
To get these elements back on the pages, you will need to install and enable the relevant modules. These simple steps will need little modifications unless you want to add a new currency and a new language.
Let’s enable these modules through these simple steps:
By default, these modules tend to appear on the pages in the order you installed and enabled them. The first one will appear the leftmost while the last one will be the rightmost. You can shift the arrangement by installing them according to what you want to appear on the leftmost or the rightmost sides. Notice that the Permanent link block is on the right as we enabled it last. There is an easier way to do this as well, which we will cover in the next section.
You can modify this by working on the position of the modules within the Top of pages hooks.
There are two similar hooks, which can be quite confusing, that is, the Top of pages and Header. The blocks are positioned or “transplanted” in a Top of pages hook and not Header of pages.
The Welcome, Log in, Cart, and the User login links can be enabled through Back Office | Modules | Blocks | User info block. Upon installing and enabling the module, you will have the Welcome, Log in, Your Account, and Cart link displayed on your front office. By default, all those are automatically hooked to the Top of pages once they are enabled. If it is not, you can have it hooked through transplanting the module to the hook, as shown in the next screenshot. This can be done by following these simple steps:
The arrangement of the blocks can be done by moving them around within the hooks, which we will see next.
Go to Modules | Positions. There you can arrange the position of the modules within the hooks by dragging each of them to the required position. As you can see, there are the two similar hooks which may be confusing, namely, the Header of pages and the Top of pages.
Compare it with what you have at the front office in the next screenshot.
The Quick Search block does not appear despite it being hooked at the Header of pages. The other blocks which are hooked to the Top of pages are displayed in the front office. The same thing with the User info block; you only see the one which is hooked to the Top of pages and not the one in the Header of pages.
The Top of pages hook is used to display a module at the top of the page. The Header of pages hook is used to put code in the <head> tag of the website. If you want to move a module or delete it from the top of the page, you should use the Top of pages hook, not the Header of pages hook. Modules that are in the Header of pages hook should not be removed, since they are required for the module to function correctly. For example, if you remove the Quick search block from the Header of pages hook, the search autocomplete will not work, since the code for it is missing. The resulting JavaScript error will also cause other problems on the website such as the Categories block not displaying any categories.
To move the modules to the left or right, you need to move them up within the hook. The lower it is within the hook, the more to the right the module will appear, whereas the upper within the hook will be displayed on the left. For example, the Currency block is first in the list, and it is displayed on the left of the Top of pages section on the webpage.
You just learnt the differences between the hooks Top of pages and Header of pages in PrestaShop. You also get to modify the blocks you want to use on the top of the page and how to move them around within the hook.
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…