Building Themes for Spree eCommerce

1 Comment

Spree is an open-source eCommerce solution built on top of Ruby on Rails. It is fairly simple to extend, however building and modifying the front-end can be somewhat of a chore.

I’m going to start with the assumption that you have already have an existing Spree installation. If you aren’t aquainted with the installation process, Spree provides an excellent guide here.

Speed things up

Before doing any styling, I wanted to recommend the inclusion of active_reload in your Gemfile. Since Spree hasn’t made the jump to Rails 3.1, asset compilation can make changing the appearance of a Spree site frustrating. Active_reload adds some additional intelligence to the recompilation process, and is baked in to Rails 3.2.

Changing Markup

Through the asset pipeline, Spree makes it dead simple to manipulate stylesheets. To directly effect markup Spree provides two options. First, templates can be overridden by placing matching templates within the app/views directory of your application. For example to overide the product page simply:

  1. Visit Spree’s Github Page
  2. View core/app/views/spree/products/show.html.erb
  3. Copy the code into app/views/spree/products/show.html.erb

Couldn’t be easier. However this mitigates any work done by the Spree team on such templates, be it bug fixes or additional functionality. The preferred method to change Spree markup is through the Deface gem.

Defacing Your Application

Deface allows you to modify template data after it has been rendered using CSS3 selectors. Let’s do some initial setup for altering Spree with Deface.

  1. Add Deface to your Gemfile
  2. Bundle it
  3. Make an “Overides” directory under /app

Spree’s source code and Deface’s readme are great companions when making changes. Be sure to swap Spree’s github branch to 1.0-stable (or whatever you happen to be using).

Let’s look at a some example code:

# For this particular project, we needed to add an additional navigation bar => "layouts/spree_application",
 :name => "add_secondary_navigation",
 :insert_after => "#nav-bar",
 :partial => "shared/navigation")

Here we tell Deface to take the output from layouts/spree_application and add a partial after the DOM element with an ID of #nav-bar. The resulting code is easier to maintain, because we don’t have to worry about checking on every Spree update to see if any changes were made to the core layout file.

Wrapping Up

Styling Spree applications can be a breeze once one becomes acquainted with the environment. Aim on the side of caution when editing templates and use Deface wherever possible. Doing so will help you to build great experiences without hurting future releases.

| | |

One Response

  1. Sacha says:

    You can customize everything if you have the right angle. Don’t go too fast, take your time to understand how Spree works and you will get amazing results !!
    Cheer to Spree developpers ;)

Leave a Reply