Time for action — Creating a new theme directory

Copy your default PrestaShop theme and name it mytheme.

Go to your cPanel and look up for your PrestaShop theme directory (we covered this in Chapter 1, Customizing PrestaShop). You should see this in your themes directory.

The themes directory path is public_html/prestashop/themes/, if you want to keep the prestashop folder separate or /public_html/themes and if you installed the content of the /prestashop folder to your domain (This is if you installed your PrestaShop within the root home page). In our example, we have created a sub domain where we install prestashop in a separate folder. So we have public_html/yourdomainname/prestashop/themes/.

Time for action — Creating a new theme directory
  1. Click on the default theme folder and then copy it.
  2. A pop-up window will prompt you to copy the folder to a location which is the same as the current theme file, as shown in the following screenshot. You can't copy in the same folder, so you need to create a new folder, say, "/mynewtheme/" for example, public_html/prestashop/themes/mynewtheme.
    Time for action — Creating a new theme directory
  3. You will have to rename the new folder, for example, change the name to mytheme.
  4. The following is what you should see in your themes directory.
    Time for action — Creating a new theme directory
  5. Within this new folder, you will have exactly the same files and directory arrangement
  6. Go to the back office panel of your online store.
  7. Go to Back Office | Preferences | Appearance.
  8. Scroll down to Themes section and choose mytheme by clicking on the radio button of the theme you want to apply.
    Time for action — Creating a new theme directory
  9. Click on the Save button. Now you have a home for your new theme. Let's begin your theming!

    Note

    Note that you will have to play around a lot with these files and folders:

    img: This folder will contain all the images needed for the template (both the folders) /PrestaShop_1.3.1/prestashop/img and /PrestaShop_1.3.1/prestashop/themes/mytheme must be looked at as some images are, by default, located in the /PrestaShop_1.3.1/prestashop/img folder.

    css: This folder contains all the CSS files for the theme. /PrestaShop_1.3.1/prestashop/themes/mytheme/css.

    Modules: This folder will contain modules for the PrestaShop site. Here, you can override existing modules with your changes. You can also copy third party modules into this folder /PrestaShop_1.3.1/prestashop/modules.

    tpl files :.tpl files contain page-specific template system. The various tpl files are located within the folders /PrestaShop_1.3.1/prestashop/themes/mytheme. The modules have their own .tpl files which are located within the particular modules folders.

  10. The front office should show the same default theme, which is our basis of working.
  11. Before you do anything else, you should copy the modules directory to your mytheme as well. Most of the third party modules worked well with this arrangement. However, if you use a third party module and it doesn't show in the Modules page in your back office, you will still need to upload them to the /prestashop/modules/ folder, as some of them do not have the necessary Smarty code (modules that have the required code will be displayed even if you create a new directory for modules within the particular theme directory). We will learn more about using tested third party modules in your PrestaShop site in the next chapter where some of the standard or default features in PrestaShop can be replaced with elements that can change the look of your store easily.
  12. Copy the modules folder to your mytheme directory. So now you will have a module folder, which is located within the new theme /prestashop/themes/mytheme/modules/.
    Time for action — Creating a new theme directory
  13. This will make it easier if you need to make any changes to the modules files without disturbing the original modules file. Now, disable all the modules, using the method we learned previously.
  14. Go to the Back Office | Modules and put a check in all the boxes next to the enabled modules and disable them in one go by clicking on Uninstall the selection at the bottom of the page.
  15. Once this is done, you can start working on a blank page for the new theme.
  16. Next, navigate back to the Back Office | Modules, and let's start with a step further.

Your new template is now enabled and ready to be customized. You will work on a mission to create a theme without necessarily knowing what the code means. Later, we can move on to getting acquainted with what happens in the background when you modify the files that have an impact on your theme.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.42.168