Designing the new PrestaShop 1.7 default theme (2023)

Designing the new PrestaShop 1.7 default theme (1)

How we rebuilt the front office to suit any merchant

Designing the new PrestaShop 1.7 default theme (2)

PrestaShop is a free open-source CMS with a promise, that of putting e-commerce at everyone’s reach. The whole team is working hard to release the new 1.7 version of the software.

(Video) How to Install Theme in PrestaShop 1.7 (Works with Latest Version)

PrestaShop is an e-commerce solution that is complete, international and ready-to-use. When merchants use PrestaShop for the first time, they’re offered a basic shop with demo products and a default theme.

This basic theme is essential for the merchants to have a clear insight of what their new shop will look like. For the 1.7 version of the software, we’ve decided to revamp this default theme which we called “Classic”.

With around 600 free native features, PrestaShop is the ideal software for anyone wishing to get started with e-commerce. But the task is not an easy one when you’re not familiar with all the standards of e-commerce nor a web professional.

  • The major aim of the default theme is to allow any merchant to meet with the Web and e-commerce best practises.
  • The second aim is to be entirely adjustable and customizable, to allow every online shops to be singular. Do you have any specific requirement? The modules from the Addons marketplace are here to allow you to improve your website using as much features as you like.

Don’t judge a book by its cover. If the final result of the Classic theme might lead you to think it was easy to implement, it was actually a real challenge in terms of graphic design and user experience.

To make it accessible to everyone, our Product team had to face several challenges, such as:

  • Offering a theme compatible with any kind of business (from the textile industry to the food industry, ranging from technology, luxury or wholesale outlets).
  • Implementing the standard best practices of e-commerce for any merchant at any level.
  • Offering a design of interfaces that is sleek enough so that merchants can imagine their products in it, and see how easily they can adapt the design to their graphic identity.
  • Allowing an optimal user experience, with a graphic design focused on the products on show as well as a simplified and smoother buying journey.
  • Offering adjustable blocks compatible with the overall graphic design of the shop allowing merchants to choose whatever modules they need.
  • Allowing merchants to fulfill any visual identity at an affordable price for an esthetic and clear website.
  • Creating international interfaces, compatible with e-commerce all around the world, in the 165 countries where Prestashop is being used.
  • Being responsive, to meet with the ever-increasing e-commerce market on mobile phones around the world.

The choices of this theme’s revamp were not only based on graphic criteria but also to keep our promise to put e-commerce at everyone’s reach.

The product constraints described above were used as a common thread for the graphic choices of the theme.

(Video) Customization of the Classic Advance theme for PrestaShop 1.7

Designing the new PrestaShop 1.7 default theme (3)

Imagine that you should sell a house. If your potential buyers see it with furnitures, frames, porcelain figurines and other wooden duck collections, they will have more difficulties to project themselves into it and to have an idea of its volume and potential rather than if it was painted in white with very minimal furnishing.

The same applies for the Classic theme. The idea was not to create the perfect visual identity for the next womenswear store to come but on the contrary to offer a neutral framework, where products could be easy to identify, as well as a faceted navigation, a fluid purchase funnel and easy-to-identify call to actions. These choices answer some specific project needs:

  • The background colors (white and grey) allow to emphasize on the products and to simplify the reading process of the interfaces.
  • The blue calls to action contrast with the background and are more easily viewable and identifiable.
  • The Open Sans typography is a Google font that has three major benefits: it is very easy to read, very complete (897 characters), and it allows you to translate in a maximum of Latin alphabet-based languages that are used by a large majority of our merchants.
  • The minimum size of the paragraphs is meeting readability criteria.
  • The flat design combined with shadow effects allows to have light interfaces while preserving the meaning of dynamic elements.
  • The alert colors (orange and red) answer the standards of most of the merchants and are clearly identifiable by their customers as alert messages.
  • The icons are taken from Google Material, an Open Source library, just like our software. This aspect is very important to us and the advantage of this library is that our merchants will be able to add icons to their websites for free without leaving the graphical universe.
  • The demo products from the shop are being created. As a matter of fact, we’re aware that our demo product catalog is mainly about woman clothing. But this is going to change! Our Product team is working on a new product catalog that is more up-to-date and that will allow our merchants to better see how their products can fit in their new store.

Merchants will then be free to customize their theme’s interfaces, to change all the elements and to add their graphic identity to it.

Designing the new PrestaShop 1.7 default theme (4)
(Video) PrestaShop 1.7: Change the Theme

The purchase funnel is essential for an e-commerce website. A well-built checkout process facilitates the conversion and customer loyalty. On the other way round, if it is not well designed, it can cancel some sales.

This additional revamping challenge of the basic theme is huge, since here, more than anywhere else, the impact on the success of our merchants will be huge. You don’t buy pizzas the same way as handbags. And a lot of themes are based on the default PrestaShop theme, so if the conversion is not good enough, that’s the whole ecosystem who might suffer from it.

So the main goal of the purchase funnel for the Classic theme is to propose the best possible user experience. This funnel is intended to:

  • Convert as efficiently as possible.
  • Present a funnel with steps identifiable at a glance.
  • Have a speedy buying process.
  • Put the best practises of online shopping at the merchant’s disposal.
  • Better integrate the necessary modules (payment, delivery, etc.).
  • Be compatible with foreign languages.
  • Be easy to maintain and debug.

All this while complying with the same design constraints as those mentioned above (interface readability, adjustable blocks, international compatibility, etc.).

This purchase funnel is built on one page, with unfolding blocks. This choice is not a random one. To reach this conclusion, we have:

  • Tested tens of shops and numerous different online selling styles.
  • Followed the Design thinking methodology.
  • Performed user tests with 25 merchants coming from all backgrounds.
  • Iterated the production of those interfaces according to those test results.

The methodology followed for this kind of purchase funnel allowed us to realize that a one-page checkout process (or OPC) presents a lot of benefits for a shop:

  • It is considered by customers to be quicker than a funnel with 5 distinct steps on different pages.
  • It allows the customers to anticipate the steps to follow before the payment.
  • It allows the customer to check its cart at any time during the checkout process.
  • Returning to the previous step to make a change appears more reassuring, since the information will not be lost.
  • The page structure is responsive (to allow for payments on mobile phones).
Designing the new PrestaShop 1.7 default theme (5)
(Video) Prestashp 1.7 - Design and Modules - 5

One thing we must keep in mind is that PrestaShop is a free and Open Source software designed to meet the needs of all merchants, whether they are small or big. That’s the reason why the Classic theme should meet all standard needs and not only specific ones. For customization purposes, Open Source offers all the necessary tools (modules, access to source code, etc.) to have a unique shop.

We’re not quite ready! The Product team is currently working on the 1.7 version. So the Classic theme is not final, and more user tests and iterations should follow. The demo products inherited from version 1.6 will be replaced by an enriched catalog. The site behavior will also be fully responsive… Exciting challenges are still to come, with the will to place the best of e-commerce at everyone’s reach.

At PrestaShop, we have a motto:

“Work like a Captain, Play like a Pirate”

If you want to join the community and take part in the adventure, remember that:

In the meantime, find us on Build, our Core team’s blog.

(Video) How to Edit Homepage in PrestaShop (Migrate Classic to Crazy Elements)


1. How To Change Theme Colors Prestashop 1.7
(Standalone Developer)
2. PrestaShop Free Marketplace Themes
(Webibazaar Templates)
3. Prestashop 1.7 theme developement LIVESTREAM
(ALOUI Mohamed Habib)
4. How to Create PrestaShop Theme – A Beginners Tutorial 1/10
(ALOUI Mohamed Habib)
5. Prestashop 1.7 Talk & How to create a basic THEME !
(ALOUI Mohamed Habib)
6. How To Change The Design & Appearance Of Your Prestashop
(Matthew Woodward)
Top Articles
Latest Posts
Article information

Author: Margart Wisoky

Last Updated: 03/29/2023

Views: 5984

Rating: 4.8 / 5 (78 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Margart Wisoky

Birthday: 1993-05-13

Address: 2113 Abernathy Knoll, New Tamerafurt, CT 66893-2169

Phone: +25815234346805

Job: Central Developer

Hobby: Machining, Pottery, Rafting, Cosplaying, Jogging, Taekwondo, Scouting

Introduction: My name is Margart Wisoky, I am a gorgeous, shiny, successful, beautiful, adventurous, excited, pleasant person who loves writing and wants to share my knowledge and understanding with you.