Menu

Customizing a Default Spree Store, Time Estimates

Spree is a great Ruby on Rails e-commerce platform, allowing developers and clients to quickly set up an online store-front. A completely functional store can be built in a relatively short amount of time. Additional customization can commence from there.

Spree comes with a front end theme already installed. This allows a developer to quickly provide a working store with a usable front end. A default Spree store looks like this:

Screenshot 1 – This is a default Spree store.

Pretty nice, right? Definitely good enough to get you going and to make some sales while development continues.

Getting a Spree store to this point takes ~ 4 to 5 hours. This includes setting up the development environment, creating a new store and installing spree, creating admin accounts, and adding a few products for testing. Installing and testing a payment gateway takes an additional 1 to 1.5 hours, assuming the client is able to set up an account in one of Spree’s supported payment gateways (like Stripe, Paypal, or Authorize.net; see the full list here) and provide the credentials in a timely manner. And boom. There’s your store. The admin panel is very easy to use, and products can be added there via a clean, easy to use interface that looks like this:

Screenshot 2 – This is the easy-to-use admin panel, from which you can update, add, and delete products.

So in as little as 5 hours, you could have a working store that can take payments, waiting and ready for you to add your products and start making sales.

But it’s very unlikely you’ll want to keep the “Spree flavor” to your store. You want customization! One option is the theme Spree Fancy. It’s a very easy to install theme that offers a little more personality to your store, and things like a Featured Products section and a scrolling banner of your choice of items. Spree Fancy straight out of the box looks like this:

Screenshot 3 – Here I’ve added a bit more character by installing the SpreeFancy theme.

That’s a bit better! Installing Spree Fancy takes about 1 hour, and that includes replacing the Spree logo in the top left with your own logo. But wait, there’s more easy customization we can do for Spree Fancy, like changing the color scheme:

Screenshot 4 – Here I’ve changed the color scheme.

Applying this recolor takes ~ 2 – 2.5 hours, and look how much more memorable it is! Here I’ve replaced Spree’s colors with our Synaptian Red and Silver, and some complementary colors. It’s as easy as picking what color you want to replace with your desired color. You can also see how I replaced the Spree logo in the top right with our own Synaptian logo.

Alright, we’re on a roll. Let’s keep going. Check out that cookie-cutter Spree footer! That can be dealt with, too.

Screenshot 5 – I’ve quickly and easily customized the footer.

Here I’ve added our logo, as well as some contact info, and there’s still room for more, like links to specific product categories, other webpages, Twitter or Facebook feeds, etc. It doesn’t have to be in the 4 column format either. Anything you want can go in this footer. What I did here took me 45 minutes. More complicated footers would take more time.

Let’s give one more example. When logged in as an Admin, the “Admin” link appears at the top of the page. I didn’t like that link, I wanted an icon, like the shopping cart and logout icons on the right.

Screenshot 6 – Last, but not least, I customized the icons at the top of the page.

Simple enough, right? Now instead of an Admin link, there’s a small icon for it instead. This also took me about 45 minutes, so you can see that small, simple customizations can take less than an hour.

So by now, you should have a good idea of how long setting up a Spree store takes, and also some simple customization. Let’s break it down once more: