Laying the Theme's Foundations

The first two chapters of this guide were theoretical; this one gets practical.

We are going to create the fundamental files and folders for your theme, and there are two ways of achieving that:

• Duplicate the default theme and adapt the files.
• Create every file from scratch.

Needless to say, we strongly advise you to choose the first option: a minimal PrestaShop requires many files and lines of code, some of which you are bound to forget when starting from scratch.

Building a PrestaShop is a complex endeavor. For instance, in comparison with a WordPress theme, which could work with a single index.php file, a minimal PrestaShop requires many more pages: home page, product page, user account pages, cart page, order process pages, etc. Building a theme for an e-commerce site implies a much more complex and intertwined set of pages and templates.

This is why we advise to start your own theme by using the foundations laid by the default theme. Complete and proven, PrestaShop's default theme ensures that all necessary pages are already in places, leaving you the freedom to rework the page display, to use your own images, to enhance it with your own scripts.

Standing on the shoulders of giants: copying the default theme

Duplicating the files of the default theme is easy, and even that can be done using two different ways.

From the back-office

PrestaShop's back-office can help you create a new theme folder based on any other installed theme, all in a couple of clicks:

1. Go the "Themes" preference page.
2. Click on the "Add new theme" button, at the top right of the screen.
3. In the "Import theme" screen that opens, scroll down to the "Create new theme" section and click on the "Create new theme" button.
4. In the creation form that appears, fill-in the various fields:
   • Name of the theme. Give it your own unique name – you can prefix it with your company's name or initials, for instance. Make sure to check on the Addons website that no other theme is already using that name, even more so if you plan to eventually sell that theme online.
   • Preview image for the theme. Since you do not yet have the final design for your theme, this can be done later.
   • Default left column / Default right column. Do you plan for your theme to have a sidebar of content? If so, on which side of the page? Check the options accordingly.
   • Number of products per page. Another informational field which you can edit later on.
   • Name of the theme's directory. You should use the same name as your theme, in lowercase and with spaces replaced by hyphens. For instance, "My Test Theme" would yield "my-test-theme" as a folder name.
   • Copy missing files from existing theme. This is where you indicate the theme to copy files from. This is very important! You can choose the default theme, or any other available which you want to build your theme from.
   • Responsive. Do you plan on your theme's design to adapt to any screen size? If so, switch this option to "Yes".
5. Click on the "Save" button.

PrestaShop will create the theme's folder and copy all the needed files from the source theme, leaving you free to experiment with those files.

From your operating system / FTP server

You can of course create that copy yourself:

1. Go to the /themes folder for your installation of PrestaShop (either online or on your desktop).
2. Create a new folder for your theme. It should be the final name of your theme, in a single lowercase word. Make sure to check on the Addons website that no other theme is already using that name, even more so if you plan to eventually sell that theme online.
3. Copy the content of source theme's folder (for the 1.6 default theme, /default-bootstrap) and paste it in the newly created folder.

That's it! Now get creatin'!

Scratching that itch: creating all files from zero