Adding SpreeFancy to Your Store

As I went over in my last blog article, a simple addition you can make to your spree store is adding the SpreeFancy gem, adding an attractive theme to the base store. SpreeFancy is easy to install. Just add this to your Gemfile:

gem 'spree_fancy', :github => 'spree/spree_fancy', :branch => '2-1-stable'

And run bundle after that. Note: I am running a Spree 2.1 store, so I am using the 2-1-stable branch. If you are using another version of Spree, be sure to have the Gemfile pointing to the correct branch of SpreeFancy.

Once the SpreeFancy gem has installed correctly, run:

bundle exec rails g spree_fancy:install

This copies over the migrations from the extension into your application, and sets up asset pipeline require statements for spree_fancy.

Check out the difference!

Before:

Default Spree Store
Screenshot 1 – This is a default Spree store.

After!

SpreeFancy Customization
Screenshot 2 – Here's the store after I installed the SpreeFancy theme.

So now we have a themed store with a Spree color motif. But it's very unlikely that you're going to want to go with this color theme for your store. The best way to customize this css is to just override spree_fancy.css with a page of your own css.

When I was playing around with this technique, I was targeting specific elements, one at a time. For example, in the image above, css for the green “featured” bar is:

#subheader { 
-webkit-box-shadow: inset 0 0 15px 0 #739c3e; 
-moz-box-shadow: inset 0 0 15px 0 #739c3e; 
box-shadow: inset 0 0 15px 0 #739c3e; 
background-color: #99c165;
color: white; 
border-top: 5px solid #edf4e5; 
border-bottom: 5px solid #edf4e5; 
overflow: hidden;
padding: 0px; }

I wanted to change the background color to a dark red, and the shadow to match. So in my page of override css, I put the following:

#subheader {
-webkit-box-shadow: inset 0 0 15px 0 #4B0000;
-moz-box-shadow: inset 0 0 15px 0 #4B0000;
box-shadow: inset 0 0 15px 0 #4B0000;
background-color: #a00;
border-top: 5px solid #CDD5C4;
border-bottom: 5px solid #CDD5C4;}

Notice that I removed the lines that I did not want to change, like the color and overflow. By only keeping the lines having to do with colors, we don't run the risk of accidentally altering other parts of the layout. I did, however, change the border and shadow colors to an appropriate value.

Rather than targeting specific page elements, depending on your situation, it might be easier to copy the entire SpreeFancy css and override every color with the one that you want. If you need that level of customization, you might just want to make a customized version of the SpreeFancy gem, rather than overriding every single line of css.