Customizing PrestaShop Theme Part 2

0
138
13 min read

(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:

  • Logo
  • Top of page
  • Adding FEATURED PRODUCTS block
  • Footer
  • Title
  • Placing the other modules useful for your store on other section of your pages.

Before going further, I would like to emphasize two important points. They are:

  1. Always work on a copy of your default theme:
    • If you have not copied the default theme file, I would advise that when you start your development work, you copy the default theme file so that you have a backup or a comparison to work with.
    • We will be working on the copy of the default theme, as in some cases, we will still change a few lines of codes to modify the theme. This means that if you ever make a huge blunder, you will at least have the original to start with again. If the worst ever happens, you can always upload the original file again to overwrite your errors, but that will be a big waste of time.
  2. Keep a quick reference list of any modifications made to any file:
    • It may sound a bit tedious, but you will find this advice useful to heed. There are a few ways of making modifications to your theme, sometimes through modification of your other files (which are not in the theme folder).
    • You may copy the file and put it into the theme folder to make the changes, or it is also possible to merely modify them by overwriting the file in its location.
    • Whichever way you chose, when you need to modify files which are not in your custom theme folder, you should make a quick note of what changes you have made and where have you made them.
    • Why? Because when there is a new version of PrestaShop, you will need to upgrade your PrestaShop site, thus the modifications you have made will be lost. The modifications in the theme folders will remain even if you update the version of your PrestaShop site.
    • By keeping a list of the modifications you’ve made, it will be much easier to track back to where to re-apply them after you have upgraded your PrestaShop installation.
    • Never procrastinate on making this quick list because you will always find that it is a waste of time to find and trace those changes later; even just six months down the road.

Copying the default theme file

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.

Logo

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:

  • http://www.logomaker.com—This is an online resource that allows you to freely create a logo, but you have to pay to download your new creation, which basically uses their online inputs. Quite attractive and interesting looking logos can be found and designed here.
  • http://cooltext.com—This one describes itself as A free graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. It allows you to choose the image you would like through a few simple steps. You only need to enter the words or company name using a form and you’ll have your own custom image created on the fly. The logo you designed is downloadable for free.
  • http://www.simwebsol.com/ImageTool/Default.aspx—This is a Web 2.0 logo generator. Free to use and download. It requires you to fill in a few fields and generates the image file quite easily. However, the background is limited to RGB flat choices and you only have 23 images that can be chosen from to insert.
  • http://www.onlinelogomaker.com/ – A full featured free online logo design tool with a clean and easy interface and thousands of logo templates

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.

Time for action—Replacing the default logo and favicon on your site

  1. The logo and the favicon can be replaced through Back Office | Preferences | Appearance, as shown in the following screenshot:

     

     

  2. Browse the file you want to use from your computer.
  3. Upload the files and click on the Save button.
  4. You need to refresh your back office browser before you replace the logo and the new favicon.ico file.
  5. You also need to clean up your browser’s cache and refresh the browser to see the favicon in the frontend of the website.

     

     

  6. Upon saving and refreshing your browser, the updated images will be displayed.

What just happened?

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

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.

Time for action—Modifying the Center Editorial block

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:

  1. Click on the Update the editor button.
  2. Review your changes in your front office browser.

  3. You will need to refresh the page once to see the effect.

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.

What just happened?

You have modified your Center Editorial Block by inserting a new Homepage’s logo image, Homepage logo link, and a new Homepage logo subheading.

Top of pages block

We will look at the header section of the page. The default layout comprises the following in the header section:

  1. Currency block (links to the available currencies used on the site).
  2. Languages block (links to the available language translation of the pages interface).
  3. Permanent link block:
    • Contact (icon that links to the contact form page)
    • Sitemap (icon that links to the sitemap page)
    • Bookmark (icon that helps you bookmark a particular page on the site)
  4. Search block
  5. User links block:
    • Your Account (icon that links to the login page or registration page). When logged in, it links to the account page that lists everything the customer can do with their account. It is only when the viewer is logged out that it links to the authentication page
    • Cart (icon that links to the shopping cart summary page )
    • Welcome, Log in (links to the login page or registration page)

 

 

Time for action—Modifying the Top of pages

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:

  1. Currency block—go to Modules | scroll down to Blocks | Currency block.
  2. Languages block—go to Modules | scroll down to Blocks | Language block.
  3. Search block—go to Modules | scroll down to Blocks | Quick Search block.
  4. Permanent link block—go to Modules | scroll down to Blocks | Permanent links block.

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:

  1. Go to Back Office | Modules | Position | Transplant a module.

     

     

  2. Choose the Module you want to transplant from the drop-down menu.
  3. Choose the hook from Hook into, the one you want the Module to go into.
  4. Click on the Save button.

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.

What just happened?

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here