Child pages
  • Themes Preferences

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The first section of the page gives you a complete list of the themes currently available on your installation of PrestaShop . Their 'edit' section lets you change their name and directory (if any another directory is available), as well as many other options.

Image Removed

The list's "Add new" button gives you access to a form that helps you register a theme on your installation. This is very useful when you need to create a new theme.
Cette "Add new theme" page has a few fields to which you should especially pay attention:

Image Removed

(by default, only the default theme, named "default-bootstrap"). You can edit the information pertaining to a theme by clicking on its name or on its "Edit" action, or you can delete the theme with the "Delete" action. Note that deleting a theme will remove all of its files from your web server: once validated, there is no way to get that theme back, you'll have to reinstall it.

Image Added

Clicking on the "Edit" button displays the main information about the them, but also many information about the way the columns appear:

 

 

Creating a brand new theme

The best way to create a new theme for PrestaShop is copy the files from the default theme, and start modifying its TPL and CSS file to make them your own. The reason is that a PrestaShop theme requires many files to be present: by starting from an existing theme instead of from scratch, you make sure that your own theme will not be missing any part.

You can do this directly on the web server, but PrestaShop makes it easy to copy the files from an installed theme and register your new theme in its system (a step you would have to do in any case).

All of this is done by clicking on the "Add new" button from the theme list (NOT the "Add new them" button at the top of screen!). It displ

Their 'Edit' section lets you change their name and directory (if any another directory is available), as well as many other options. A creation form opens:

Image Added

Fill-in the fields:

  • Name of the theme. Make sure the name is not already used by another theme (check on the Addons website).
  • Preview image for the theme. You should always add a preview image, as it is a clear reminder of what the theme looks like. Directory. If you don not have one yet, leave that for later, when the time will come to release the theme.
  • Default left column and Default right column. Indicate if your theme has a column (or even two columns), and if so, on which side of the screen. This is purely informational, and can be changed at any time.
  • Name of the theme's directory. Try to keep it close to your theme's name. If you have not already created a theme folder, PrestaShop will create one for you.
  • Copy missing files from existing theme. This is the cleanest method to start a new theme from another theme's files. It is highly recommended, when you begin, to create a new theme from the default theme's files, as this makes sure you have all the needed files.

...

  • Choose "default-bootstrap", or any other theme that you would like to base your foundation on.
  • Responsive. Indicate if your theme has a responsive design or not (if you do not know what a responsive design is, then you probably should choose "No"). This is purely informational, and can be changed at any time.

Click save, and PrestaShop will register this information for you: the theme appears in the theme list, and its preview image appears in the theme selector.

It is now up to you to change your theme's files in order to make it unique! On your local installation (not a production one!), select your new theme, and start working! Once you are done with your designing and code it, go back to this setting page and change it accordingly: definitive preview image, default column, number of products, and responsiveness.

Info

Is your theme so good that other merchants could pay money for it? You can sell it on Addons, PrestaShop's official theme & module marketplace: http://addons.prestashop.com/.

Importing and exporting a theme

...

Once all the parameters are correctly set, click on "Save". You will quickly get a file to download from your browser. Save it on your hard-drive, then give the save file a proper name. From there on, you can easily share this theme, and if it is your own creation, you can start selling it on PrestaShop's Addons website at http://addons.prestashop.com/.

Select a theme for shop <name>

This is where you can change the theme for the current shop. The interface presents you with a list of thumbnails of the currently available themes on your PrestaShop installation, and it is up to you to choose the one theme you want to use for your shop.

...