PrestaShop v1.7 comes preinstalled with the Classic theme, which is a simple but full-featured theme inspired by the Google Material Design language. The Classic theme is in the themes/classic directory and contains preview.png, which is the theme preview displayed on the Design > Theme & Logo tab in the Back Office, and several subdirectories. Some of these subdirectories contain a .htaccess file that prevent the files being directly accessed in a browser.
Note that you shouldn't edit any of the Classic theme files. Instead, see Creating a child theme to learn how to create your own theme that extends the Classic theme. By doing this, you can upgrade the Classic theme without losing your changes. It is still a good idea to learn how the Classic theme works though so you know how to extend it.
Understanding the themes/classic/_dev directory
The themes/classic/_dev directory contains package.json, package-lock.json, postcss.config.js and webpack.config.js, which are used to load and configure the packages required to recompile the theme assets. There are also subdirectories with uncompiled theme assets including CSS in the css subdirectory, images in the img subdirectory and JavaScript in the js subdirectory.
Inside the themes/classic/_dev/css directory, there is the main SCSS file theme.scss. At the top of the file, there are @import statements that include Bourbon, Bootstrap, Bootstrap Touchspin and various other SCSS files in the partials and components subdirectories.
The files in the themes/classic/_dev/css/partials directory include _commons.scss, which contains the CSS that is common to all pages, _fonts.scss, which contains all the Noto Sans and Material Icons fonts used in the theme, _mixins.scss, which contains the SASS mixins that expand statements into entire blocks of code, and _variables.scss, which contains the variables that control the theme colors, sizes and spacings.
The themes/classic/_dev/css/partials/_variables.scss file contains variables for the theme colors and text styles. Here's a list of all the variables and their descriptions:
| Variable | Description |
|---|---|
| $gray-darker | The color used for headings, labels, prices, and the header navigation bar |
| $gray | The color used for the main text, top menu links, footer links, and placeholders |
| $gray-light | The background color of the main content, dividers, text fields and dropdowns |
| $gray-lighter | The background color of odd table rows and when hovering the clear all button |
| $brand-primary | The link color on hover and the background color of primary buttons and the cart |
| $brand-secondary | The background color of discount badges in the cart and product listings and pages |
| $brand-success | The background color of success messages |
| $brand-warning | The background color of warning messages |
| $brand-danger | The background color of error messages |
| $label-color | The color of labels next to text fields and dropdowns |
| $btn-primary-color | The color of the text in primary buttons |
| $btn-primary-bg | The background color of primary buttons |
| $btn-primary-border | The border color of primary buttons |
| $btn-secondary-color | The color of the text in secondary buttons |
| $btn-secondary-bg | The background color of secondary buttons |
| $btn-secondary-border | The border color of secondary buttons |
| $btn-border-radius | The border radius in pixels to curve all buttons in the theme (e.g., 20px) |
| $input-border-color | The border color of text fields and dropdowns |
| $headings-font-weight | The font thickness of headings (e.g., normal or bold) |
| $tooltip-bg | The background color of Bootstrap tooltips |
| $border-radius | The border radius in pixels to curve breadcrumbs and <code> blocks (e.g., 20px) |
| $extra-small-space | The extra small spacing in root em (e.g., 0.3125rem) |
| $small-space | The small spacing in root em (e.g., 0.625rem) |
| $medium-space | The medium spacing in root em (e.g., 1.25rem) |
| $large-space | The large spacing in root em (e.g., 1.875rem) |
| $extra-large-space | The extra-large spacing in root rem (e.g., 2.5rem) |
| $warning | The base warning color |
| $warning-hover | The base warning color on hover |
| $alert-warning-bg | The background color of warning messages |
| $alert-warning-border | The border color of warning messages |
| $alert-warning-text | The text color of warning messages |
| $btn-warning-color | The text color of warning buttons |
| $btn-tertiary-color | The text color of tertiary buttons |
| $btn-tertiary-hover | The text color when hovering tertiary buttons |
| $base-font-size | The base font size in root em used when calculating other font sizes (e.g., 1rem) |
| $font-size-lg | The font size of large text in root em (e.g., 0.9375rem) |
| $font-size-sm | The font size of small text in root em (e.g., 0.875rem) |
| $font-size-xs | The font size of extra small text in root em (e.g., 0.8125rem) |
| $font-size-h1 | The font size of <h1> headings in root em (e.g., 1.375rem) |
| $font-size-h2 | The font size of <h2> headings in root em (e.g., 1.25rem) |
| $font-size-h3 | The font size of <h3> headings in root em (e.g., 1.125rem) |
| $font-size-h4 | The font size of <h4> headings in root em (e.g., 1.125rem) |
| $font-size-h5 | The font size of <h5> headings in root em (e.g., 1rem) |
| $font-size-h6 | The font size of <h6> headings in root em (e.g., 0.9375rem) |
| $display1-size | The font size of the display-1 class in root em (e.g., 3.125rem) |
| $display1-weight | The font thickness of the display-1 class (e.g., normal or bold) |
| $display2-size | The font size of the display-2 class in root em (e.g., 2.188rem) |
| $display2-weight | The font thickness of the display-2 class (e.g., normal or bold) |
| $display3-size | The font size of the display-3 class in root em (e.g., 1.563rem) |
| $display3-weight | The font thickness of the display-3 class (e.g., normal or bold) |
| $display4-size | The font size of the display-4 class in root em (e.g., 1.25rem) |
| $display4-weight | The font thickness of the display-4 class (e.g., normal or bold) |
| $text-muted | The color of text in elements with the text-muted class |
Understanding the themes/classic/assets directory
The uncompiled CSS, Javascript and images are compiled into the themes/classic/assets directory. The compiled CSS, fonts and images are stored in the css subdirectory and the compiled JavaScript is stored in js/theme.js. There is also js/custom.js, which can be used to add additional JavaScript.
The compiled CSS is stored in themes/classic/assets/css/theme.css and the fonts and images are stored in the same directory with hash code filenames. There is also error.css in the directory, which contains hardcoded CSS for the layout error page, and custom.css, which you can use to add additional hardcoded CSS to customize your theme.
The compiled CSS and JavaScript is combined and minified using Webpack and stored in the themes/classic/assets/cache directory. There will be multiple CSS and JavaScript files stored there with hash code filenames, one CSS and one JavaScript for each page with unique CSS or JavaScript.
Understanding the themes/classic/config directory
The themes/classic/config directory contains the file theme.yml, which contains the theme information and data used to automatically configure PrestaShop when the theme is installed. At the top is the theme name, version and author information.
In the compatibility subsection of the meta section of theme.yml, the minimum compatible PrestaShop version of the Classic theme is set to PrestaShop 1.7.0.0 and there is no maximum version. The availability_layouts subsection specifies the names and descriptions of the layouts that can be chosen on the Design > Theme & Logo > Choose layouts page. The configuration subsection of the global_settings section of theme.yml causes the Image format setting on the Design > Image Settings tab to change to Use PNG only if the base image is in PNG format on theme installation. In the modules subsection, there is a list of modules that will be enabled when the theme is installed. There is also a hooks subsection that lists which modules to automatically install into each hook. The image_types subsection sets the widths, heights and scopes of each image type, which can be seen on the Design > Image Settings tab.
The theme_settings section of theme.yml sets the default layout of the theme to full width and then adds a left column to the category, best seller, new products, specials and contact pages.
Understanding the themes/classic/modules directory
The themes/classic/modules directory is used to override module templates, so they can be customized just for the Classic theme. Other themes will continue to use the original modules templates or use their own overrides. This makes it possible to upgrade modules without losing changes made to the theme.
Module template overrides mirror the same directory structure as the base templates. For example, the template themes/classic/modules/blockreassurance/views/templates/hook/blockreassurance.tpl overrides the template modules/blockreassurance/views/templates/hook/blockreassurance.tpl.
Here's a list of each override along with a description of what is changed by the Classic theme:
| Template | What it changes |
|---|---|
| blockreassurance | Adds a div around each image and text |
| contactform | |
| ps_banner | |
| ps_brandlist | |
| ps_categoryproducts | |
| ps_categorytree | |
| ps_contactinfo | |
| ps_crossselling | |
| ps_currencyselector | |
| ps_customeraccountlinks | |
| ps_customersignin | |
| ps_emailalerts | |
| ps_emailsubscription | |
| ps_facetedsearch | |
| ps_featuredproducts | |
| ps_imageslider | |
| ps_languageselector | |
| ps_legalcompliance | |
| ps_linklist | |
| ps_mainmenu | |
| ps_newproducts | |
| ps_productinfo | |
| ps_rssfeed | |
| ps_searchbar | |
| ps_sharebuttons | |
| ps_shoppingcart | |
| ps_socialfollow | |
| ps_specials | |
| ps_supplierlist | |
| ps_viewsproduct |
Understanding the themes/classic/templates directory
The themes/classic/templates directory contains all the templates that are not related to modules. The _partials subdirectories contain partial templates that do not create an entire page by themselves. The partial templates are called by other templates to create an entire page.
Here's a list of all the directories and templates along with short descriptions: