This document provides guidance on designing e-commerce storefronts using PrestaShop. It introduces PrestaShop and its features for designers. It outlines the key design elements in PrestaShop like templates, modules, and customization options. It then showcases top 10 store examples that leverage PrestaShop's design capabilities well. Finally, it provides steps to build your own customized PrestaShop storefront design in one hour.

1. E-commerce Store Design
with PrestaShop
Best Practices & Examples
Take complete creative control.

2. 1
Who We
Are
2
Design
Elements of
PrestaShop
3
Top 10
Best Store
Examples
4
Build your
own!

3. Who We Are

4. About me
30, Born in Paris
15+ years of web experience
Joined a startup as a web-designer at 16
Fascinated by computer science
Founded PrestaShop at 22 years old
@Bruno42

5. About PrestaShop
100% Free & Open source e-commerce software
Powering 185,000 online stores worldwide
Available in 165 countries & 65 languages
675,000 community members
107 employees, Offices in Paris & Miami
“A statistical powerhouse, enabling you to monitor
various metrics from a variety of helpful angles.”

6. Design Elements of
PrestaShop

7. Why designers love us
Lightweight and fast to deploy
Full access to source code, PHP & Template are separated
100% customizable and scalable
Using latest innovative librairies
(Bootstrap 3, SASS Compass, Smarty 3, D3 (graphs), Fontawesome)
4,000+ available plugins – no coding required
Sell your creations to thousands of merchants and make money

8. PrestaShop Templates:
The Big Picture
Based on Smarty, a template engine
Bootstrap 3.x to handle responsiveness
Core structure with a flexible module system
Complete creative control on each page
Customizable email and invoice templates

9. Behind the Scenes
A PrestaShop theme is a simple Zip file including 30+ template files

11. Understanding
PrestaShop’s Structure
“One of the best looking responsive,
mobile-focused templates for current
ecommerce platforms.”

19. Top 10 Best Store
Examples

20. 1
Why we love it
Takes full advantage of the
default template
100% Responsive
Customizable products
Social media integration
http://www.lemmeprints.com/

21. 2
Why we love it
Clean, basic style
Featured categories
displayed with images
Customized top menu
Designed for conversions
https://shopfreshcuts.com/

22. 3
Why we love it
Wizard to select the best
product for customers
Seals of trust
Fully customized checkout
process
http://lensesrx.com/

23. 4
Why we love it
Unique rotating slider
Blog integration
Customized top menu
http://www.my-french-neighbor.com/

24. 5
Why we love it
Unique typography
Right column menu
Animated GIFs on product
showing different colors
and zoom
http://donnawilson.com/

25. 6
Why we love it
Splash screen
Animated background
Treasure hunt
Horizontal scroll for
categories
http://www.ifchic.com/

26. 7
Why we love it
Unique design
Animated Top Menu
Large product images
http://www.artstuffprintables.com/

27. 8
Why we love it
Original mix of editorial
content & products
Perfect use of social media
integration
Product videos
http://findzie.com/

28. 9
Why we love it
Splash screen to acquire
customer emails
Long category pages
Layered navigation
Ruler integrated on
products like fabric to
visualize size
http://www.annakabazaar.com/en/

29. 10
Why we love it
Large, high quality product
pages
Custom slider
Floating ribbon animation
on homepage banners
Shopping cart animation
Animated logo
http://www.dandynomad.com/en/

30. Build your own!

31. How to build your own in 1 hour?
1
List existing pages that you would like a custom design, commonly:
Homepage, Product page, Category page, Shopping cart page, About
us & Contact us
2
Design your template on Photoshop
3
Bring it life by converting your PSD to HTML
(using PSD2XHTML.com or DIY)

32. How to build your own in 1 hour?
4
DIY: We recommend duplicating the existing default theme located in
/themes/default-bootstrap. The main files to place your HTML code into are index.
tpl, category.tpl, product.tpl, contact.tpl, shopping-cart.tpl
5
Improve or customize CSS files located in /css/, the main one being global.css.
Icons are using Fontawesome and fonts are located in the /fonts/ folder.
6
Add new features or effects by installing new modules
(Sliders, social media, video, splash screen, etc.)
7
Check W3C compliance and use our Theme validator:
https://validator.prestashop.com/

33. Best Practices
Never use PHP Code inside your Template
Always use external CSS file, do not use inline CSS
Validate your Template using the W3C Validator
Add Smarty comments to your Template using this syntax:
{* Comments *}
When editing a template on a liv store, always put the shop
in maintenance mode
Use a CSS Sprites Generator
Reduce your images size
tinypng.com and spritegen.website-performance.org

34. Resources for Inspiration
http://www.uiparade.com/
https://dribbble.com/search?q=ecommerce
http://addons.prestashop.com/en/3-templates-prestashop
http://www.prestashop.com/en/showcase
Identifies simple yet powerful
solutions involving design, copy,
appropriate analysis, classic
optimization techniques, and
targeted testing.

35. miguel.sanchez.roman@gmail.com
@Bruno42
Thank You
Questions?