E-commerce Store Design with PrestaShop Best Practices & Examples

E-commerce Store Designwith PrestaShop

Best Practices & ExamplesTake complete creative control.

1 Who We

Are

2Design

Elements of PrestaShop

3Top 10

Best Store Examples

4Build your

own!

Who We Are

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

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.”

Design Elements of PrestaShop

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

PrestaShop Templates:The Big PictureBased 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

Behind the Scenes

A PrestaShop theme is a simple Zip file including 30+ template files

UnderstandingPrestaShop’s Structure

“One of the best looking responsive, mobile-focused templates for current ecommerce platforms.”

Top 10 Best Store Examples

Why we love it

Takes full advantage of the default template

100% Responsive

Customizable products

Social media integration

http://www.lemmeprints.com/

1

Why we love it

Clean, basic style

Featured categories displayed with images

Customized top menu

Designed for conversions

https://shopfreshcuts.com/

2

Why we love it

Wizard to select the best product for customers

Seals of trust

Fully customized checkout process

http://lensesrx.com/

3

Why we love it

Unique rotating slider

Blog integration

Customized top menu

http://www.my-french-neighbor.com/

4

Why we love it

Unique typography

Right column menu

Animated GIFs on product showing different colors

and zoom

http://donnawilson.com/

5

Why we love it

Splash screen

Animated background

Treasure hunt

Horizontal scroll for categories

http://www.ifchic.com/

6

Why we love it

Unique design

Animated Top Menu

Large product images

http://www.artstuffprintables.com/

7

Why we love it

Original mix of editorial content & products

Perfect use of social media integration

Product videos

http://findzie.com/

8

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/

9

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/

10

Build your own!

How to build your own in 1 hour?

1List existing pages that you would like a custom design, commonly:

Homepage, Product page, Category page, Shopping cart page, About us & Contact us

2Design your template on Photoshop

3Bring it life by converting your PSD to HTML

(using PSD2XHTML.com or DIY)

How to build your own in 1 hour?

4DIY: 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

5Improve 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.

6Add new features or effects by installing new modules

(Sliders, social media, video, splash screen, etc.)

7Check W3C compliance and use our Theme validator:

https://validator.prestashop.com/

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 sizetinypng.com and spritegen.website-performance.org

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.

Thank YouQuestions?

@Bruno42

miguel.sanchez.roman@gmail.com