How to Design Your PrestaShop Theme

PrestaShop, in common with other PHP-based content management systems (CMS) such as WordPress, uses templates to apply design to your online shop. These templates are called ‘PrestaShop themes’. In software terms, the user interface and the functionality are ‘decoupled’. In lay terms, the way the shop looks, the content of the shop (your catalogue and the text of your pages) and what the shop does are separated from one another. This software architecture, which separates how the site looks from what it does and from what content it contains, has important advantages for your online business. Most importantly, you can swap in new themes to change the look of the website (i.e. the typography, the colour scheme, the graphics) without changing what the site *does* or the content that the site contains. In other words, you can freshen up the look of your site or add a holiday theme without disrupting in anyway your catalogue or your shop’s core shopping functionality such as browsing, adding to basket and checking out. PrestaShop is a very full featured ecommerce system and PrestaShop templates are correspondingly large and detailed; we work with our customers to offer varying levels of customisation and we always produce professional and unique PrestaShop themes. There’s a lot to consider when developing a PrestaShop theme and here we’ve sketched out a guide to creating your theme based on the steps that we follow when building our customers’ shops.

Step 1: Your Corporate Identity

The first step is to develop the core of your corporate identity. Your logo is the first piece of this puzzle. Whether we are working on a new brand or a re-branding, working through the logo-design process helps us to get a feel for the corporate identity that you are trying to achieve for your business. A design survey is a great way to investigate what you envision for your brand. You should undertake competitor research, looking for examples of logos and corporate identities that you do and do not like. By gathering this information, you can then develop initial logo concepts. This part of the process has parallels with a keyword analysis survey which we use to guide the creation of the CSV imports used with your new shop.

Design, like so much in web development, is an iterative process. Don’t expect to create the final logo in the first instance. Start with an investigation of what feelings you want to convey with your corporate identity, then develop several initial concepts for a logo, then choose your top two favourites, then develop these more fully and only then will you have a candidate for a final logo. This is the process we follow and our clients appreciate being involved in each stage of logo-creation; we think it can work for you too:

Design survey. Investigate your competitors to get to grips with how other players in your industry represent themselves. Use this competitor analysis to develop an understanding of your ideal corporate identity; living examples of logos that you love and that you dislike are really useful for this.

Initial concepts. Create no more than half a dozen rough concepts with different fonts and graphical elements that respond to the specifications that emerge from the design survey.

Second draft. Choose no more than two of your rough concepts to develop further. Create no more than three versions of each of these finalists with subtle variations in colour, font and graphics.

Choose finalists. Choose no more than two versions of your second draft logos. One of these will form the basis of your final logo. Can’t make a choice? Right now you’ve got a great opportunity to use social media and engage with your customers and we’ve had great success with opening up voting on clients’ Facebook pages to choose a new logo. Not only does this get your customers involved and emotionally engaged with your business, you’ll gain new Facebook fans and increase your social media presence.

Polish it. Once the final logo has been chosen, final tweaks to colours and layout are made before high resolutions files in both colour and black and white are delivered. Be sure to get your final logo in a variety of file formats so that it can scale and be effectively used with a variety of media such as with stationary and print ads, on vehicles and signs, as well as the web.

Step 2: Design Your PrestaShop Theme

The next step is to extrapolate from the logo a design for your theme; where the logo concisely articulates your corporate identity, the theme must reinforce and reflect your branding. Again a design survey is key to this process and this is the starting point for creating the right kind of look for your shop. Similarly, you must work through initial concepts, second drafts, finalists and polish the final version. You can involve your customers as much or as little as you want through social media channels and we strongly recommend you get some feedback from your community during this process; what better way to grow your community and gain loyalty than by asking for your customers’ views on your web design and letting them make the tough choices for you?! This is certainly the path that we follow when working with clients and believe it can help you to develop a unified look to your new shop.

There are several factors you should consider when creating your theme’s design and two of the most important are:

Desired level of customisation. There is a cost associated with customisation and there is more value attached to a fully bespoke theme than to a less fully customised theme. There is a base-level of customisation that you should aim for and your home page, product listings and individual product pages should get the full treatment. If you are on a budget you could consider applying less design to the user account, content page and check out areas; where this level of customisation is desired by our customers we refine these areas of the template to work within the over all feel of the design but refrain from designing every page of the template though we can certainly undertake this level of customisation too!

Design for modularisation. One of the great joys of PrestaShop is its ‘plug in architecture’; PrestaShop uses ‘modules’ to extend its base functionality. In this way, PrestaShop can keep pace with Internet trends by offering more and more modules to bolt on new behaviours to its core functionality. For instance, there are modules to support different payment gateways or to display a feed from your business’s Facebook Page. When designing your theme, it is important that you bear in mind PrestaShop’s innate flexibility and create an adaptable design that isn’t strictly dependent on a particular configuration of modules, but allows you to take advantage of PrestaShop’s support for adding new features to your site.

Step 3: Build Your PrestaShop Template

The final step is to actually create the PrestaShop template that represents the ‘living’, web-ready version of your design. Using a combination of HTML, CSS and PHP you can create a user interface that is a pixel-perfect reflection of the design created in step 2. Of course, your theme will look different across the browsers as each browser renders according to its own rules, some, like Firefox, being more standards-compliant than others, such as IE. We aim to have our templates looking good across the most recent versions of Firefox, Safari, Chrome and IE and while we only support the most recent browsers we do strive for graceful degradation across older versions. When constructing your template be sure to use semantic HTML to boost your on-page SEO, for instance, make good use of heading tags and only use tables for tabular data rather than as the basis for your template’s layout.

These are the steps that we’ve followed to get our customers’ shops looking good and communicating their brand to their customers. We hope it helps you to get a big picture view of what’s involved. Want to know more? Sign up to our free feed for more great articles on ecommerce and making the most of the web for your business.