SlideShare a Scribd company logo
E-commerce Store Design 
with PrestaShop 
Best Practices & Examples 
Take complete creative control.
1 
Who We 
Are 
2 
Design 
Elements of 
PrestaShop 
3 
Top 10 
Best Store 
Examples 
4 
Build 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 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
Behind the Scenes 
A PrestaShop theme is a simple Zip file including 30+ template files
Understanding 
PrestaShop’s Structure 
“One of the best looking responsive, 
mobile-focused templates for current 
ecommerce platforms.”
Top 10 Best Store 
Examples
1 
Why we love it 
Takes full advantage of the 
default template 
100% Responsive 
Customizable products 
Social media integration 
http://www.lemmeprints.com/
2 
Why we love it 
Clean, basic style 
Featured categories 
displayed with images 
Customized top menu 
Designed for conversions 
https://shopfreshcuts.com/
3 
Why we love it 
Wizard to select the best 
product for customers 
Seals of trust 
Fully customized checkout 
process 
http://lensesrx.com/
4 
Why we love it 
Unique rotating slider 
Blog integration 
Customized top menu 
http://www.my-french-neighbor.com/
5 
Why we love it 
Unique typography 
Right column menu 
Animated GIFs on product 
showing different colors 
and zoom 
http://donnawilson.com/
6 
Why we love it 
Splash screen 
Animated background 
Treasure hunt 
Horizontal scroll for 
categories 
http://www.ifchic.com/
7 
Why we love it 
Unique design 
Animated Top Menu 
Large product images 
http://www.artstuffprintables.com/
8 
Why we love it 
Original mix of editorial 
content & products 
Perfect use of social media 
integration 
Product videos 
http://findzie.com/
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/
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/
Build your own!
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)
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/
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
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.
miguel.sanchez.roman@gmail.com 
@Bruno42 
Thank You 
Questions?

More Related Content

Viewers also liked

Good and bad examples of e-commerce websites
Good and bad examples of e-commerce websitesGood and bad examples of e-commerce websites
Good and bad examples of e-commerce websites
seng
 
E Commerce Presentation
E  Commerce  PresentationE  Commerce  Presentation
E Commerce Presentation
Tylerjd
 
E-Commerce PPT
E-Commerce PPTE-Commerce PPT
E-Commerce PPT
Anshuman Mahapatra
 
E commerce business models
E commerce business modelsE commerce business models
E commerce business models
Vikram g b
 
E commerce
E commerceE commerce
E commerce
siddhesh khadse
 
E commerce
E commerceE commerce
E commerce
GBC
 
Presentation1
Presentation1Presentation1
Presentation1
Said BOUFARES
 
Linux con berlin-2016-presentation-deitchera
Linux con berlin-2016-presentation-deitcheraLinux con berlin-2016-presentation-deitchera
Linux con berlin-2016-presentation-deitchera
Avi Deitcher
 
Auto report cs6
Auto report cs6Auto report cs6
Auto report cs6
Michael Wojchick
 
Top 10 Most Expensive Cars
Top 10 Most Expensive CarsTop 10 Most Expensive Cars
Top 10 Most Expensive Cars
Peter Bouchard
 
Odoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparisionOdoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparision
Odoo
 
E business models
E business modelsE business models
E business models
Madhur Choudhary
 
Gehirnentwicklung und Sprache
Gehirnentwicklung und SpracheGehirnentwicklung und Sprache
Gehirnentwicklung und Spracheluja9
 
The Automotive Industry Through the lens of social
The Automotive Industry Through the lens of socialThe Automotive Industry Through the lens of social
The Automotive Industry Through the lens of social
Brandwatch
 
25 Cars Worth Waiting For 2016–2019
25 Cars Worth Waiting For 2016–201925 Cars Worth Waiting For 2016–2019
25 Cars Worth Waiting For 2016–2019
Eason Chan
 
E commerce
E commerceE commerce
E commerce
ASHISH KUMAR PANI
 
Most Reliable Cars
Most Reliable CarsMost Reliable Cars
Most Reliable Cars
Eason Chan
 
Ecommerce final ppt
Ecommerce final pptEcommerce final ppt
Ecommerce final ppt
reemalmarri
 
E commerce
E commerceE commerce
E commerce
Sumati Joshi
 
E commerce ppt
E commerce pptE commerce ppt
E commerce ppt
Munish Singla
 

Viewers also liked (20)

Good and bad examples of e-commerce websites
Good and bad examples of e-commerce websitesGood and bad examples of e-commerce websites
Good and bad examples of e-commerce websites
 
E Commerce Presentation
E  Commerce  PresentationE  Commerce  Presentation
E Commerce Presentation
 
E-Commerce PPT
E-Commerce PPTE-Commerce PPT
E-Commerce PPT
 
E commerce business models
E commerce business modelsE commerce business models
E commerce business models
 
E commerce
E commerceE commerce
E commerce
 
E commerce
E commerceE commerce
E commerce
 
Presentation1
Presentation1Presentation1
Presentation1
 
Linux con berlin-2016-presentation-deitchera
Linux con berlin-2016-presentation-deitcheraLinux con berlin-2016-presentation-deitchera
Linux con berlin-2016-presentation-deitchera
 
Auto report cs6
Auto report cs6Auto report cs6
Auto report cs6
 
Top 10 Most Expensive Cars
Top 10 Most Expensive CarsTop 10 Most Expensive Cars
Top 10 Most Expensive Cars
 
Odoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparisionOdoo - Open Source CMS: A performance comparision
Odoo - Open Source CMS: A performance comparision
 
E business models
E business modelsE business models
E business models
 
Gehirnentwicklung und Sprache
Gehirnentwicklung und SpracheGehirnentwicklung und Sprache
Gehirnentwicklung und Sprache
 
The Automotive Industry Through the lens of social
The Automotive Industry Through the lens of socialThe Automotive Industry Through the lens of social
The Automotive Industry Through the lens of social
 
25 Cars Worth Waiting For 2016–2019
25 Cars Worth Waiting For 2016–201925 Cars Worth Waiting For 2016–2019
25 Cars Worth Waiting For 2016–2019
 
E commerce
E commerceE commerce
E commerce
 
Most Reliable Cars
Most Reliable CarsMost Reliable Cars
Most Reliable Cars
 
Ecommerce final ppt
Ecommerce final pptEcommerce final ppt
Ecommerce final ppt
 
E commerce
E commerceE commerce
E commerce
 
E commerce ppt
E commerce pptE commerce ppt
E commerce ppt
 

Similar to E-commerce Store Design with PrestaShop Best Practices & Examples

User-Centered Website Design
User-Centered Website DesignUser-Centered Website Design
User-Centered Website Design
Brent Bice
 
10 Ecommerce Web Design Trends of 2016
10 Ecommerce Web Design Trends of 201610 Ecommerce Web Design Trends of 2016
10 Ecommerce Web Design Trends of 2016
Tonytemplates
 
Create a stunning, mobile friendly business website with the divi theme
Create a stunning, mobile friendly business website with the divi themeCreate a stunning, mobile friendly business website with the divi theme
Create a stunning, mobile friendly business website with the divi theme
Michelle Castillo
 
Why stream store dynamic posts plugin is so famous!
Why stream store dynamic posts plugin is so famous!Why stream store dynamic posts plugin is so famous!
Why stream store dynamic posts plugin is so famous!
searchforyou
 
Designing Website on HubSpot's CMS
Designing Website on HubSpot's CMSDesigning Website on HubSpot's CMS
Designing Website on HubSpot's CMS
HubSpot
 
When Out of the Box Isn’t Good Enough: What You Need to Know About Building C...
When Out of the Box Isn’t Good Enough: What You Need to Know About Building C...When Out of the Box Isn’t Good Enough: What You Need to Know About Building C...
When Out of the Box Isn’t Good Enough: What You Need to Know About Building C...
Nirvana Canada
 
Grow your Magento store: going multilingual and setting up a marketplace
Grow your Magento store: going multilingual and setting up a marketplaceGrow your Magento store: going multilingual and setting up a marketplace
Grow your Magento store: going multilingual and setting up a marketplace
Promodo
 
Smile - Erwin de Vries presentatie #DMSummit 2011
Smile - Erwin de Vries presentatie #DMSummit 2011Smile - Erwin de Vries presentatie #DMSummit 2011
Smile - Erwin de Vries presentatie #DMSummit 2011
Copernica BV
 
Theme guide
Theme guideTheme guide
Theme guide
Chirag Jobanputra
 
Demystifying The Web
Demystifying The WebDemystifying The Web
Demystifying The Web
Loft Creative
 
Shopify Theme Building Workshop
Shopify Theme Building WorkshopShopify Theme Building Workshop
Shopify Theme Building Workshop
Keir Whitaker
 
Custom Theme Development For Shopify Proposal PowerPoint Presentation Slides
Custom Theme Development For Shopify Proposal PowerPoint Presentation SlidesCustom Theme Development For Shopify Proposal PowerPoint Presentation Slides
Custom Theme Development For Shopify Proposal PowerPoint Presentation Slides
SlideTeam
 
Free Html Themes - CREATIVEPIG
Free Html Themes - CREATIVEPIGFree Html Themes - CREATIVEPIG
Free Html Themes - CREATIVEPIG
pawan95821
 
Responsive bootstrap magento theme
Responsive bootstrap magento themeResponsive bootstrap magento theme
Responsive bootstrap magento theme
Codespot
 
Top 5 CMS for web development.pdf
Top 5 CMS for web development.pdfTop 5 CMS for web development.pdf
Top 5 CMS for web development.pdf
WPWeb Infotech
 
SEO best practice for growing online businesses
SEO best practice for growing online businessesSEO best practice for growing online businesses
SEO best practice for growing online businesses
Laura Hampton
 
Masterweb Web Design Services
Masterweb Web Design ServicesMasterweb Web Design Services
Masterweb Web Design Services
Masterwebsa
 
Website basics training - Jess Le Merle
Website basics training - Jess Le MerleWebsite basics training - Jess Le Merle
Website basics training - Jess Le Merle
Hayden Armour
 
Conquering Code with hjc
Conquering Code with hjcConquering Code with hjc
Conquering Code with hjc
hjc
 
Shopify Ecommerce Solutions Proposal PowerPoint Presentation Slides
Shopify Ecommerce Solutions Proposal PowerPoint Presentation SlidesShopify Ecommerce Solutions Proposal PowerPoint Presentation Slides
Shopify Ecommerce Solutions Proposal PowerPoint Presentation Slides
SlideTeam
 

Similar to E-commerce Store Design with PrestaShop Best Practices & Examples (20)

User-Centered Website Design
User-Centered Website DesignUser-Centered Website Design
User-Centered Website Design
 
10 Ecommerce Web Design Trends of 2016
10 Ecommerce Web Design Trends of 201610 Ecommerce Web Design Trends of 2016
10 Ecommerce Web Design Trends of 2016
 
Create a stunning, mobile friendly business website with the divi theme
Create a stunning, mobile friendly business website with the divi themeCreate a stunning, mobile friendly business website with the divi theme
Create a stunning, mobile friendly business website with the divi theme
 
Why stream store dynamic posts plugin is so famous!
Why stream store dynamic posts plugin is so famous!Why stream store dynamic posts plugin is so famous!
Why stream store dynamic posts plugin is so famous!
 
Designing Website on HubSpot's CMS
Designing Website on HubSpot's CMSDesigning Website on HubSpot's CMS
Designing Website on HubSpot's CMS
 
When Out of the Box Isn’t Good Enough: What You Need to Know About Building C...
When Out of the Box Isn’t Good Enough: What You Need to Know About Building C...When Out of the Box Isn’t Good Enough: What You Need to Know About Building C...
When Out of the Box Isn’t Good Enough: What You Need to Know About Building C...
 
Grow your Magento store: going multilingual and setting up a marketplace
Grow your Magento store: going multilingual and setting up a marketplaceGrow your Magento store: going multilingual and setting up a marketplace
Grow your Magento store: going multilingual and setting up a marketplace
 
Smile - Erwin de Vries presentatie #DMSummit 2011
Smile - Erwin de Vries presentatie #DMSummit 2011Smile - Erwin de Vries presentatie #DMSummit 2011
Smile - Erwin de Vries presentatie #DMSummit 2011
 
Theme guide
Theme guideTheme guide
Theme guide
 
Demystifying The Web
Demystifying The WebDemystifying The Web
Demystifying The Web
 
Shopify Theme Building Workshop
Shopify Theme Building WorkshopShopify Theme Building Workshop
Shopify Theme Building Workshop
 
Custom Theme Development For Shopify Proposal PowerPoint Presentation Slides
Custom Theme Development For Shopify Proposal PowerPoint Presentation SlidesCustom Theme Development For Shopify Proposal PowerPoint Presentation Slides
Custom Theme Development For Shopify Proposal PowerPoint Presentation Slides
 
Free Html Themes - CREATIVEPIG
Free Html Themes - CREATIVEPIGFree Html Themes - CREATIVEPIG
Free Html Themes - CREATIVEPIG
 
Responsive bootstrap magento theme
Responsive bootstrap magento themeResponsive bootstrap magento theme
Responsive bootstrap magento theme
 
Top 5 CMS for web development.pdf
Top 5 CMS for web development.pdfTop 5 CMS for web development.pdf
Top 5 CMS for web development.pdf
 
SEO best practice for growing online businesses
SEO best practice for growing online businessesSEO best practice for growing online businesses
SEO best practice for growing online businesses
 
Masterweb Web Design Services
Masterweb Web Design ServicesMasterweb Web Design Services
Masterweb Web Design Services
 
Website basics training - Jess Le Merle
Website basics training - Jess Le MerleWebsite basics training - Jess Le Merle
Website basics training - Jess Le Merle
 
Conquering Code with hjc
Conquering Code with hjcConquering Code with hjc
Conquering Code with hjc
 
Shopify Ecommerce Solutions Proposal PowerPoint Presentation Slides
Shopify Ecommerce Solutions Proposal PowerPoint Presentation SlidesShopify Ecommerce Solutions Proposal PowerPoint Presentation Slides
Shopify Ecommerce Solutions Proposal PowerPoint Presentation Slides
 

More from PrestaShop

PrestaShop Day Paris - le futur de PrestaShop
PrestaShop Day Paris - le futur de PrestaShopPrestaShop Day Paris - le futur de PrestaShop
PrestaShop Day Paris - le futur de PrestaShop
PrestaShop
 
Trucos, técnicas y tácticas SEO que funcionan en el 2017
Trucos, técnicas y tácticas SEO que funcionan en el 2017Trucos, técnicas y tácticas SEO que funcionan en el 2017
Trucos, técnicas y tácticas SEO que funcionan en el 2017
PrestaShop
 
Social Selling
Social SellingSocial Selling
Social Selling
PrestaShop
 
PrestaShop SEA Workshop
PrestaShop SEA WorkshopPrestaShop SEA Workshop
PrestaShop SEA Workshop
PrestaShop
 
PrestaShop 1.7.1
PrestaShop 1.7.1PrestaShop 1.7.1
PrestaShop 1.7.1
PrestaShop
 
3 PAGES CRUCIALES POUR MAXIMISER LA CONVERSION
3 PAGES CRUCIALES POUR  MAXIMISER LA CONVERSION3 PAGES CRUCIALES POUR  MAXIMISER LA CONVERSION
3 PAGES CRUCIALES POUR MAXIMISER LA CONVERSION
PrestaShop
 
Meetup PrestaShop Torino [IT]
Meetup PrestaShop Torino [IT]Meetup PrestaShop Torino [IT]
Meetup PrestaShop Torino [IT]
PrestaShop
 
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop
 
Case Study - Berties closet
Case Study - Berties closet Case Study - Berties closet
Case Study - Berties closet
PrestaShop
 
Case Study - Fashion stork
Case Study - Fashion storkCase Study - Fashion stork
Case Study - Fashion stork
PrestaShop
 
WeCommerce Perú - PrestaShop
WeCommerce Perú - PrestaShopWeCommerce Perú - PrestaShop
WeCommerce Perú - PrestaShop
PrestaShop
 
PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
 PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme... PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
PrestaShop
 
Case Study - Pronesis [IT]
Case Study - Pronesis [IT]Case Study - Pronesis [IT]
Case Study - Pronesis [IT]
PrestaShop
 
Case Study - Pronesis
Case Study - PronesisCase Study - Pronesis
Case Study - Pronesis
PrestaShop
 
Case Study - Fashion Stork
Case Study - Fashion StorkCase Study - Fashion Stork
Case Study - Fashion Stork
PrestaShop
 
Case Study - Miraherba
Case Study - MiraherbaCase Study - Miraherba
Case Study - Miraherba
PrestaShop
 
Fallstudie - Miraherba
Fallstudie - MiraherbaFallstudie - Miraherba
Fallstudie - Miraherba
PrestaShop
 
Outils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEOOutils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEO
PrestaShop
 
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
PrestaShop
 
L’e-commerce sans frontières - PrestaShop
L’e-commerce sans frontières - PrestaShopL’e-commerce sans frontières - PrestaShop
L’e-commerce sans frontières - PrestaShop
PrestaShop
 

More from PrestaShop (20)

PrestaShop Day Paris - le futur de PrestaShop
PrestaShop Day Paris - le futur de PrestaShopPrestaShop Day Paris - le futur de PrestaShop
PrestaShop Day Paris - le futur de PrestaShop
 
Trucos, técnicas y tácticas SEO que funcionan en el 2017
Trucos, técnicas y tácticas SEO que funcionan en el 2017Trucos, técnicas y tácticas SEO que funcionan en el 2017
Trucos, técnicas y tácticas SEO que funcionan en el 2017
 
Social Selling
Social SellingSocial Selling
Social Selling
 
PrestaShop SEA Workshop
PrestaShop SEA WorkshopPrestaShop SEA Workshop
PrestaShop SEA Workshop
 
PrestaShop 1.7.1
PrestaShop 1.7.1PrestaShop 1.7.1
PrestaShop 1.7.1
 
3 PAGES CRUCIALES POUR MAXIMISER LA CONVERSION
3 PAGES CRUCIALES POUR  MAXIMISER LA CONVERSION3 PAGES CRUCIALES POUR  MAXIMISER LA CONVERSION
3 PAGES CRUCIALES POUR MAXIMISER LA CONVERSION
 
Meetup PrestaShop Torino [IT]
Meetup PrestaShop Torino [IT]Meetup PrestaShop Torino [IT]
Meetup PrestaShop Torino [IT]
 
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
 
Case Study - Berties closet
Case Study - Berties closet Case Study - Berties closet
Case Study - Berties closet
 
Case Study - Fashion stork
Case Study - Fashion storkCase Study - Fashion stork
Case Study - Fashion stork
 
WeCommerce Perú - PrestaShop
WeCommerce Perú - PrestaShopWeCommerce Perú - PrestaShop
WeCommerce Perú - PrestaShop
 
PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
 PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme... PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
 
Case Study - Pronesis [IT]
Case Study - Pronesis [IT]Case Study - Pronesis [IT]
Case Study - Pronesis [IT]
 
Case Study - Pronesis
Case Study - PronesisCase Study - Pronesis
Case Study - Pronesis
 
Case Study - Fashion Stork
Case Study - Fashion StorkCase Study - Fashion Stork
Case Study - Fashion Stork
 
Case Study - Miraherba
Case Study - MiraherbaCase Study - Miraherba
Case Study - Miraherba
 
Fallstudie - Miraherba
Fallstudie - MiraherbaFallstudie - Miraherba
Fallstudie - Miraherba
 
Outils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEOOutils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEO
 
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
 
L’e-commerce sans frontières - PrestaShop
L’e-commerce sans frontières - PrestaShopL’e-commerce sans frontières - PrestaShop
L’e-commerce sans frontières - PrestaShop
 

Recently uploaded

一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
kohd1ci2
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
i990go7o
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
stgq9v39
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
etls06p8
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
tobbk6s8
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
wkip62b
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
02tygie
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
w26izoeb
 

Recently uploaded (20)

一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
 

E-commerce Store Design with PrestaShop Best Practices & Examples

  • 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!
  • 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
  • 10.
  • 11. Understanding PrestaShop’s Structure “One of the best looking responsive, mobile-focused templates for current ecommerce platforms.”
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 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/
  • 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.