...
Układanie Fundamentów Tematu
| Table of Contents |
|---|
The Dwa pierThe first two chapters of this guide were theoretical; this one gets practical.
...
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:
...
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:
- Go to the
/themesfolder for your installation of PrestaShop (either online or on your desktop). - 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.
- 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!
Cleaning up
Both the default theme and your installation of PrestaShop contain a payload of content and styles that are not necessarily useful to your own theme. For instance, many modules are installed and activated by default by PrestaShop's installer. While some are necessary for the proper functioning of a complete store, others can simply be put aside while you build the theme.
It is your duty as a theme developer to build templates and styles for at least all the default PrestaShop modules (or at least adapt the default ones), along with the ones for any additional modules that you plan your theme to support.
...
As you can see, if all you want to change in a module's front office appearance while keeping its organzation, you only have to edit its CSS file and leave its template file alone. For instance, to change the styling of the Layered Navigation module, you should put your customized version in this folder: /themes/YOUR_THEME/css/modules/blocklayered/blocklayered.css. Just make sure to use the same file path as the original module files.
Necessary modules
The necessary module templates are:
...
You simply cannot sell a product if your theme does not support these modules.
Must-have modules
There also are modules which, while not necessary for a functioning store, should still be included when designing a theme. You should try your best to build your theme with these modules in mind.
...
Module name | Why it is necessary |
|---|---|
blockcategories | Displays the product categories. |
blockcms | Lists and displays the CMS pages (i.e. Terms & Conditions, Legal notice, etc.). |
blockcontact | Displays the Customer Service information. |
blockcontactinfos | Displays the stores contact info. |
blockmyaccountfooter | Displays links to the user's account pages in the footer. |
blocksearch | Displays the search engine and its results. |
blocktags | Displays the product tags. |
homefeatured | Displays featured products. |
Good-to-have modules
Finally, these modules are not as important as the others ones, but bring a lot of value to your store, and helps your customers discover products and learn more about your store. Again, you should design your store with these modules activated.
...
| Info |
|---|
A fully clean slate would be to disable all modules and re-install them one by one, enabling you to integrate them into your design while building you theme. This is a good way to work, as you it helps you know which content broke your page layout, but it takes longer to reach your goal. Keep a known set of essential modules helps you build your theme faster while making sure it will work in most configuration. |
Creating content
Your theme will display content taken from the PrestaShop database. Whether you plan on keeping the theme to yourself or share/sell it for others to use, you simply cannot start designing it without content, along with the activation of some key features that any store might use, along with yourself.
The demo data installed with PrestaShop is enough to help with it, as it features products, categories, stores, etc. Starting with a fresh installation of PrestaShop gives you a head-start with demo content, while empty stores will require you to start adding content (either fake or real) to the store in order to actually see your theme react to it.
Design!
Now that the default theme has been turned into a folder of its own, it is time for you to explore its files: Smarty templates, CSS rules, JavaScript codes, location of the hooks and content blocks... Everything can be changed, and it is up to you to rework it the way you want!
The CSS files
You can edit your theme's styles by editing its CSS files.
...
| Code Block |
|---|
.primary_block {
margin-bottom: 40px;
}
.top-hr{
background: $top-line-color;
height: 5px;
margin: 2px 0 31px;
} |
The images
Images which are used by the theme (not by products) are to be stored in the theme's /img folder, while image which are to be used by the shop itself are to be stored in the /img folder at the root of your PrestaShop installation.
...
- use a single file to display many different icons.
- enjoy great flexibility: size, color, drop shadow, and anything that can be done with the power of CSS.
- have an excellent render on all screen sizes : PC, TV, Retina, etc.)
The template files
A template files (.tpl) is Smarty's way to separate the content from the way that content is presented.
The template only have a few dynamic elements (where your content goes). This facilitates the design and update of your sites, both for your content and its presentation.
...
It is possible to use a template to generate HTML files, and also XML files, text files, etc.
The PDF files
The PDF files are also generated from Smarty templates (.tpl files). The main difference with the template files used to generate HTML, is that the PDF templates do not allow for external resources such as CSS. Therefore you must use internal or inline styling in order to change the style of your invoice, order slip, return slip, etc. A default PrestaShop installation comes with two style templates: delivery-slip.style-tab.tpl and invoice.style-tab.tpl. You can find these in the folder /pdf/. The following table shows how the style tabs are linked:
...
The internal styling in the style tabs can only be applied to the main PDF template files, such as invoice.tpl, delivery-slip.tpl, etc. In order to reuse the variables in this template in templates which are included, you can assign Smarty variables or apply inline styling separately in each of these files.
Scratching that itch: creating all files from zero
Oh wow. Really? You want to do it all by hand? That's courageous, but we'll try to help.
...