Building Themes for Spree eCommerce

Nate Hunzaker

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 acquainted 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 “Overrides” directory under /app

Spree’s source code is a great companion 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.

Smashing Boxes is a web and mobile app development company know for creating a lasting experience through bold design and disrupting the status quo. We are entrepreneurs and craftsmen first, and a digital creative agency second. Inspired by our visionary clients, we transform ideas into innovative web and mobile applications. Take a look at our work.

Cover photo by Beck Gusler