Building Themes for Spree eCommerce
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.
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:
- Visit Spree’s Github Page
- View core/app/views/spree/products/show.html.erb
- 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.
- Add Deface to your Gemfile
- Bundle it
- Make an “Overides” directory under /app
Let’s look at a some example code:
# For this particular project, we needed to add an additional navigation bar Deface::Override.new(:virtual_path => "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.
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.