How to customize
the new
Spree UX?
BROUGHT TO YOU BY
Why the new Spree UX?
Improved mobile experience
Faster loading
pages
Higher Google rankings
Improved conversion rates
Reduced
bounce rates
Spree UX
Customize it to your needs. This is an overview how.
You will find more details in Spree UX customization docs
Check out our fashion DEMO: demo.spreecommerce.org
Customize colors for the page elements and the mega nav, fonts, borders.
Styling with SASS variables
Use your logo, customize the mega nav menu elements and your website footer.
Header and footer
Replace the placeholder images with your own marketing imagery and promo banners.
Replacing image placeholders
SEO recommendations, social sharing preview and structured data.
Additional information
Styling
with SASS variables
Color themes
You can customize your:
primary and secondary color
header style
background color
footer style
border style
input style
Find some examples on the next slides.
Example 1
Primary color: #0074C2
Secondary color:
#232323
Primary
color
Text ‘in stock’
Button ‘Add to cart’
Color: #0074C2
PDP
Secondary
color
Variant pickers
Chosen photo�in a gallery
Color: #232323
PDP
Header style
White header background
Header font color is #232323
Icons color is set by header font color
PDP
Meganav
menu
White meganav background
Meganav font color is #232323
PDP
Primary
color
Button ‘Shop now’
Blog section: subtitle and button ‘Read more’
Subtitles in promo banners
Color: #0074C2
HOMEPAGE
Background color
Primary background is the main background of the website (White in this case)
Secondary background is in different elements (Grey in this case)
HOMEPAGE
Font color
All fonts on primary background are in #232323
Secondary font color: all fonts on secondary background
HOMEPAGE
Footer color
White footer background
Footer font color is #232323
Icons are in footer font color
HOMEPAGE
Example 2
Primary color: #007474
Secondary color:
#F3B600
Primary
color
Text ‘in stock’
Button ‘Add to cart’
Color: #007474
PDP
Secondary
color
Variant pickers
Chosen photo�in a gallery
Color: #F3B600
PDP
Primary
color
Button ‘Checkout’
Icon “Remove”
Color: #007474
CART
Secondary
color
Text about items in cart: ‘product’, ‘price’, ‘quantity’, ‘total’
Color: #F3B600
CART
Border
color
Color of lines and separators
(Light gray in this case)
CART
Example 3
Primary color: #007474
Secondary color:
#F3B600
Header style
Header background in the primary color
All elements in the header are white
PDP
Border style
Color of lines and separators: #F3B600
PDP
Primary
color
Button ‘Log in’
Button ‘Sign up’
Color: #007474
LOG IN
Secondary
color
Checkbox ‘Remember me’
Color: #F3B600
LOG IN
Border style
Color of lines and separators: #F3B600
LOG IN
Input
color
Input background is white
Input border is in $second-global-border
LOG IN
PLP
Secondary
color
Variant pickers
Color: #F3B600
Border style
Color of lines and separators: #F3B600
($global-border-style)
Color of borders inactive variant pickers: #E2E2E2 ($second-global-border)
PLP
Example 4
Primary color: #8D2C3E
Secondary color:
#D99E89
Primary
color
Text ‘in stock’
Button ‘Add to cart’
Color: #8D2C3E
PDP
Secondary
color
Variant pickers
Chosen photo�in a gallery
Color: #D99E89
PDP
Meganav menu
Meganav background in color: #F5ECE9
Meganav font color is #8D2C3E
PDP
Primary
color
Button ‘Save and continue’
Other buttons
Color: #8D2C3E
CHECKOUT
Secondary
color
Steps of the checkout
Radio buttons
Color: #D99E89
CHECKOUT
Example 5
Primary color: #A77B6B
Secondary color:
#EDBD51
Primary
color
Text ‘in stock’
Button ‘Add to cart’
Color: #A77B6B
PDP
Secondary
color
Variant pickers
Chosen photo�in a gallery
Color: #EDBD51
PDP
Background
color
Primary background is the main background of the website (#141414 in this case)
PDP
Font color
PDP
All fonts on primary background are in #EDBD51
Header
& footer
customization
Header
You can customize:
Logo
Categories and subcategories
Promo banners in megamenu
Footer
You can customize:
Logo
Info about company
Contact details
Social media icons
Links
Replacing image placeholders
Homepage
Main Banner
You have to upload this banner in 4 sizes:
HOMEPAGE
Main banner 1440 x 600
Main banner mobile 575 x 240
Main banner tablet landscape 992 x 413
Main banner tablet portrait 768 x 320
Big Category Banner
You have to upload this banner in 4 sizes:
HOMEPAGE
Big category banner 540 x 800
Big category banner mobile 262 x 388
Big category banner tablet landscape 470 x 696
Big category banner tablet portrait 358 x 530
Category Banner
You have to upload this banner in 4 sizes:
HOMEPAGE
Category banner 540 x 388
Category banner mobile 262 x 188
Category banner tablet landscape 470 x 338
Category banner tablet portrait 358 x 257
Promo Banner
You have to upload this banner in 4 sizes:
HOMEPAGE
Promo banner 540 x 350
Promo banner mobile 542 x 351
Promo banner tablet landscape 470 x 305
Promo banner tablet portrait 734 x 476
Product
Listing
Page
Category Banner
You have to upload this banner in 1 size:
PRODUCT LISTING PAGE
Category banner PLP 1110 x 300
Product
Detail
Page
Product Photo
You have to upload this banner in 1 size:
PRODUCT DETAIL PAGE
Product photo 650 x 870
Additional information
SEO
recommendations
Sitemap setup
Meta description tags configuration
Sharing & search
The new Spree UX has the following social sharing & previews implemented:
Facebook sharing preview with Open Graph tags
Google search results with structured data using Schema.org with JSON-DL
Fashion Demo
Check out this curated Spree demo with fashion products. This is an out-of-the box Spree with replaced placeholder images.
SEE HOW IT MIGHT LOOK
Run your Spree Demo on Heroku
Run your own Spree demo on Heroku (free account required) to test drive the latest Spree version of the master branch.
TRY IT FOR YOURSELF
Spree Jumpstart
SPONSORED CONTENT
This is a commercial service provided by Spark Solutions, a Spree core team contributor.
Spree Jumpstart
Don’t want to install, configure, customize and host your Spree store all by yourself? No problem.
Let us do it for you!
SPONSORED CONTENT
Spree source code is still free. This is a consulting, UX design, installation, hosting and maintenance service for Spree 4.1+.
What you get a is a working Spree 4.1 site within weeks, customized to your brand guidelines, configured and merchandised with your product catalog and imagery.
One time setup fee starting at $7,500
Monthly fee starting at $900
What you get:
Project scope discovery, delivery planning and management
Spree Jumpstart
SPONSORED CONTENT
3rd party integrations included:
Stripe for credit card payments
PayPal payments
Google Analytics Enhanced Ecommerce
Segment.com
Spree Commerce platform essential setup and configuration
Heroku hosting including:
A staging environment
A production environment
Full backup every 24 hours
Database rollback option from anytime in the last 24h
Historical data migration from your old store (optional)
Systems health monitoring & maintenance
Further Spree development, customization, tech support (optional)
Merchandising support and growth hacking (optional)
Layout design and customization using an existing pre-optimized template
The new Spree UX is brought to you by