Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Solidus Bootstrap (Frontend)

Code Climate

This gem is an adaptation of bootstrap spree frontend for Solidus.

Switches out Solidus’s entire frontend for a bootstrap 3 powered frontend.

This has several large advantages:

  • Fully responsive - Mobile, tablet and desktop. With custom grids for each, collapsing elements, and full HDPI support. Current spree only goes half way.
  • Just 44 lines of custom SCSS, replacing 1328 lines of undocumented spree CSS. Plus most of these lines only add some visual style to the header and footer and can be removed.
  • The entire frontend can be easily customized: colours, grid, spacing, etc, by just overriding variables from bootstrap - giving a custom store design in minutes.
  • Bootstrap has some of the most robust documentation of any framework, and a hugely active community. As this port uses only default bootstrap it means that entire spree frontend layout is documented by default.
  • Lots of spree community will for bootstrap.
  • Though this uses ‘full bootstrap’ for simplicity, you can remove the unused Bootstrap components you don’t require for minimal file sizes / weight.
  • Bootstrap is one of the largest most active open source projects out there - maintaining an entire framework just for spree makes little sense. Forget about cross browser bugs. Woo!


This stays as closely to the original spree frontend markup as possible. Helper decorators have been kept to a bare minimum. It utilises the SCSS port of bootstrap 3 to keep inline with existing spree practices. It also includes support for spree_auth_devise.

home page home page home page home page home page home page home page


NOTE: The master branch is developed against edge. Use a stable branch for production.

Add the following to your gemfile below spree. The currently supported and updated branches are master.

gem 'solidus_bootstrap_frontend', git: '', branch: 'master'

And run

bundle install

Then copy the default stylesheets into your project

rails generate solidus_bootstrap_frontend:install

You'll want to select to overwrite all.css. Done.


Running the above spree_bootstrap_frontend:install command copies the stylesheet to app/assets/stylesheets/spree/frontend/spree_bootstrap_frontend.css.scss. Use this as your base stylesheet and edit as required.

To style your spree store just override the bootstrap 3 variables. The full list of bootstrap variables can be found here. You can override these by simply redefining the variable before the @import directive. For example:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

This uses the bootstrap-sass gem. So check there for full cutomization instructions.

It’s quite powerful, here are some examples created in ~10 minutes with a few extra SCSS variables, no actual css edits required:

layout layout

By default the bootstrap javascript framework isn't included as it's not used and most people won't need the extra weight. But it is part of bootstrap-sass so you can include it by adding the following to your javascript manifest file:

//= require bootstrap-sprockets

or just include the specific component you want to use:

//= require bootstrap/component


Please fork and make a pull request.

spree_bootstrap_frontend is made up of two other gems, spree_bootstrap, and spree_auth_devise_bootstrap. Changes for spree are contained in spree_bootstrap, and changes for spree_auth_devise are contained in spree_auth_devise_bootstrap.

Spree edge templates were last synced at spree/spree@b07b838. Feel free to patch in any newer changes and update this SHA.

Spree Auth Devise edge templates were last synced at spree/spree_auth_devise@761a9d5. Feel free to patch in any newer changes and update this SHA.

Running tests

For spree_frontend_bootstrap, change directories to spree_bootstrap/frontend and then:

bundle exec rake test_app
bundle exec rspec spec

For spree_auth_devise_bootstrap, change directories to spree_auth_devise_bootstrap/ and then:

bundle exec rake test_app
bundle exec rspec spec


Copyright Alex James ( and released under the BSD Licence.


No description, website, or topics provided.







No packages published