E-commerce Store Design with PrestaShop Best Practices & Examples
-
Upload
prestashop -
Category
Design
-
view
2.122 -
download
0
description
Transcript of 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