Hot questions for Using Spree in twitter bootstrap

Top 10 Ruby Open Source / Spree / twitter bootstrap


I'm having an issue with deploying a customized _variables.scss to my production server as a compiled asset.

Everything is fine on my development environment, it's in production that my variables are being overwritten.

I'm using Rails 4.2.1 with Spree 3.0 Stable branch.

I have the following structure:

Files created in vendor/assets/stylesheets/frontend

  • _variables.scss (my custom app variables)
  • all.css (generated by Spree)
  • frontend_bootstrap.css.scss (override Spree)
  • navbar.scss (my customization)

The _variables.scss contains the following:

// Place all Sass variables here.

// Colors
$brand-primary: green;
$gray: #aaa;

// Navbar
$navbar-default-bg: #fff;
$navbar-height: 100px;
$navbar-border-radius: 0;
$navbar-default-border: none;
$navbar-default-toggle-hover-bg: $navbar-default-bg;
$navbar-default-toggle-icon-bar-bg: lighten($gray, 60%);
$navbar-default-toggle-border-color: $navbar-default-bg;
$navbar-default-link-active-bg: $brand-primary;

The frontend_boostrap.css.scss contains the following:

// Spree Bootstrap Override

// Core
@import "variables";
@import "bootstrap-sprockets";
@import "bootstrap";

// Custom Overrides
@import "navbar";

The navbar.scss contains the following:

// Navbar Customization

.navbar-myapp {
  margin-bottom: 40px;
  border-top: none;
  border-bottom: 1px solid $navbar-default-toggle-icon-bar-bg;

  .navbar-brand {
    padding: 15px;

The Rails standard app/assets/stylesheets/application.css manifest isn't being used/I haven't declared anything specfic in there.

The produced HTML head code shows all.css and frontend.

<link rel="stylesheet" media="screen" href="/assets/spree/frontend/all.self-33fc4a513acb9a5f3fd4ba26b89c94184e5d028c4bd40eee6736d3ccfea5c140.css?body=1">

<link rel="stylesheet" media="screen" href="/assets/spree/frontend/frontend_bootstrap.self-88eb7ced3e4d78d298a33264c3cfc65af6cef8ac32ae56a7dd7a3e321ba97378.css?body=1">

All is well in development but when I deploy this to my test server, some of the variables are being overwritten by the default, this includes the navbar configuration and a color.

I'm not sure if this is because of asset compilation order; or if it's how bootstrap-sass is imported.

Any suggestion on how I can go about using _variables.scss without it being overwritten? I didn't want any duplication, that's why I wanted to change the navbar and colors in the the variables sass file.


It looks like I've solved the issue.

The Bootstrap Sass gem states:

Do not use //= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

To get this working in Production / compiled assets. I had to:

  1. Change all.css to all.scss
  2. Change the //= require statements to @import

The vendor/assets/stylesheets/spree/frontend/all.scss:

// Sass Application Manifest

@import "frontend_bootstrap";

The vendor/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss:

// Spree Bootstrap Override

// Core
@import "bootstrap-sprockets";
@import "variables";
@import "bootstrap";

I hope this helps anyone who stumbled like I did.


So I want Solidus with the Bootstrap framework.

On the Solidus's Github page: I see the following dependencies:

  • solidus_frontend (Cart and storefront)
  • solidus_backend (Admin area)

Is it possible to exchange those with those:

  • spree_frontend
  • spree_backend

Until Solidus provides a Bootstrap option? because I noticed from that there might be a Bootstrap Solidus.

Any help or input would be really appreciated.


I think your best option for the frontend would be to take the 200 creative bootstrap frontend from here: and port it to solidus.

As it was for 2.4, so it should be a reasonably straight forward port.

For the backend, your best bet might be to sit tight. spree_backend would take a monstrous amount of effort to get working against solidus. Meanwhile solidus_backend is undergoing very active development to bring it up to a higher standard and user experience than spree_backend on 3.0 had.

See: and related PR's and issues for direction.


I've installed a Spree 3-0-Stable test site and I would like add bootswatch theme and change the padding of a few bootstrap items.

I'm struggling to understand where I do this.

One example is that I would like to modify the .panel-footer padding so and items price is shown in a smaller box.

I think that overrides should go in app/assets/stylesheets/spree/frontend.

when I add the following

    .panel-footer {
      /* padding: 10px 15px; */
      background-color: #f5f5f5;
      border-top: 1px solid #ddd;
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
@import "bootstrap";



the padding of the price box does not change , but the equal spacing of the items in the grid is lost.

I am going down the correct path to customize the store like this ?


no you should never customize in such a way, Since when spree gets Updated all your components will be overriden by which u will lose all the updations Made. So Better Start Using Deface Overrides Given in the spree guides. First it'll be looking difficult but once go through this video so that u can use the deface overrides concept easily.


I am while customizing my spree e-commerce application. At first I added the spree_bootstrap_frontend gem and I want to customize the oredres/edit view as follow: =>"spree/orders/edit",
                     :name => "continue_shopping",
                     :replace => "erb[loud]:contains('link_to t(:continue_shopping), products_path')",
                     :erb => "<%= link_to t(:continue_shopping), products_path, :class => 'btn btn-primary' %>")

but there's no change. Could you please help my first customization view?


I think you should just use :text key instead of :erb: =>"spree/orders/edit",
                     :name => "continue_shopping",
                     :replace => "erb[loud]:contains('link_to Spree.t(:continue_shopping), products_path')",
                     :text => "<%= link_to t(:continue_shopping), products_path, :class => 'btn btn-primary' %>")