Customizing the SpreeCommerce


Spree Commerce was created on Ruby on Rails platform in 2007. Long in short, Spree Commerce is a comprehensive e-commerce framework that offers entrepreneurs a customizable and open-source solution. It is just a free collection of programs that web developers can utilize to design and create captivating digital storefronts. Spree Commerce is an ideal resource when you are looking to develop and market a digital store. It is an ideal resource because it boasts a streamlined set of core functions that can be customized according to your requirements. Today, software development companies can bring their vision to the world by building eCommerce stores for businesses to meet the required design specifications. Thus, Spree Commerce allows you to control every aspect of development. Here are reasons why you should choose Spree Commerce and how you can use this excellent source.

Why is Spree Commerce an Ideal Solution?

7 Reasons To Choose Spree Commerce


If you require frequent upgrading and improvement in the software, then Spree Commerce is the best modular platform. Therefore, you can get a personalized solution tailored according to your specific needs. For getting an “out of the box” solution, you cannot take account of everything. Spree developers have the advantage of providing a base that suits the client’s needs and is highly flexible in different extensions. Moreover, the developers can also create new personalized extensions with minimum effort.

Integration Flexibility

Most of the latest online stores offer the flexibility to integrate third-party solutions, including payment gateways. So, we have a Spree Commerce platform that supports the integration of most popular systems. Moreover, from payments tools to third-party solutions, Spree Commerce features aren’t limited to any constraints.


Suppose your initial plans about your online store aren’t much broader but remember it is only the beginning. Everyone should always consider the possibility of future business development. You might be confused about how it will affect the eCommerce hosting solution. The fact to understand here is that business development leads to project scale. As a result, your web resources should be ready to support higher loads. However, if your chosen solution isn’t powerful enough, then you can expect to face some significant losses in the future. Thus, using Spree Commerce will help you avoid unwanted outcomes. This latest web technology allows you to expand the resources and grow your business values seamlessly.

Mobile-First Approach

Perhaps, the most successful eCommerce resources today are compatible with all browsers and support all mobile versions. Spree Commerce was created by keeping the fact of a mobile-friendly approach in mind. Consequently, web solutions on Spree Commerce ensure UI intuitiveness giving an online store with responsive design right out of the box.

Marketing Opportunities

Getting an appealing online store is not enough to grow your business. It requires promotion to attract as many customers as possible. The advantage you enjoy here is the rich functionality of Spree that offers lots of marketing-focused features. Some of these features are integrated search engine optimization, the ability to connect coupons, advanced user analytics, additional means of communication, simplified campaign management, high-level marketing, etc.


eCommerce evolution has a logical product approach known as omnichannel. It is a strategy that puts the client into the spotlight and reveals some ideal shopping conditions. Moreover, it ensures the best customer experience on all channels, platforms, and devices. So, this approach takes everything into account, from the store itself to the manager’s call. One of the most exciting benefits of Spree Commerce is that it allows you to serve capricious clients through the facility of remote guiding.

Faster Development

We all know that Spree is built on Ruby on Rails that offers the highest development speed. Thus, Spree Commerce is the most desirable choice of all software development companies and clients due to its extra fast speed.

When should you opt for Spree Commerce?

You should build your eCommerce store with Spree Commerce if:

  • When you are looking forward to launching an online store with the latest cool features and possibilities of customizing an online store.
  • Or you are striving to evolve your business, and that’s why foresee the need to scale the project with an increase of business values.
  • The last option when you should choose Spree Commerce is when you are interested in creating an exclusive and effective trading platform.

How To Setup Spree Commerce And Customize It?

To help you use this wonderful source efficiently, here we give you simple steps to guide you:

  • How to set up SpreeCommerce
  • Layout customization
  • Checkout process customization

Setup Spree

Setting up spree commerce is very easy. To do that you require Rails(~> 4.2.6)

Rails (~> 4.2.6)

Once you have installed Rails, you need to add the following lines to your gem file:


gem ‘spree’, ‘~> 3.1.0.rc1’

gem ‘spree_auth_devise’, ‘~> 3.1.0.rc1’

gem ‘spree_gateway’, ‘~> 3.1.0.rc1’


Once, you have added the above-given lines, run ‘bundle install’ and later use the default generator to set up Spree


rails g spree:install –user_class=Spree::User

rails g spree:auth:install

rails g spree_gateway:install


This is all. You now have Spreecommerce installed on your machine. Give it a test run.

Layout Customization

There are two ways you can edit spree commerce layout:

  • Deface
  • Customization by downloading the required file


Deface let you to customize erb templates without downloading that file. It allows you to use CSS3 style selectors to target any element.To deface,

First of all, make a new directory:
mkdir app/overrides
Create a new file with some meaningful name in this directory and add code like below

:virtual_path => #{path_to_your_desired_file},

:name => ‘change view’,

:replace => “[data-hook=#{data_hook_name}]”,

:text => “Add your own HTML here”



* data-hook is like an id in html which let you select the div you want to change.
There are following actions available for Deface.


Removes all elements that match the supplied selector


Replaces all elements that match the supplied selector, with the content supplied


Replaces the contents of all elements that match the supplied selector


Surrounds all elements that match the supplied selector, expects replacement markup to contain <%= render_original %> placeholder


Surrounds the contents of all elements that match the supplied selector, expects replacement markup to contain <%= render_original %> placeholder


Inserts after all elements that match the supplied selector


Inserts before all elements that match the supplied selector


Inserts inside all elements that match the supplied selector, as the first child


Inserts inside all elements that match the supplied selector, as the last child


Sets attributes on all elements that match the supplied selector, replacing existing attribute value if present or adding if not. Expects :attributes option to be passed.


Appends value to attributes on all elements that match the supplied selector, adds attribute if not present. Expects :attributes option to be passed.


Removes value from attributes on all elements that match the supplied selector. Expects :attributes option to be passed.

Customization By Downloading Required File:

There is another way to customize spreecommerce layout i.e. through downloading frontend/app/views/spree folder to your project’s app/views.

  • For admin panel download backend/app/views/spree/admin folder to your project’s app/views/spree.
  • For layout files download frontend/app/views/spree/layouts/spree_application.html.erb and backend/app/views/spree/layouts/admin.html.erb to your project’s app/views/spree/layouts.
  • Then modify the files as per your requirements of your project.

* Take note that the downloaded files include many lines of code in gem which will not be in use.

3. Checkout Customization For Cash On Delivery And Free Shipment:

Add new file order_decorator.rb in app/models/spree/ and write following code to this file


checkout_flow do

go_to_state :address

#go_to_state :delivery

#go_to_state :payment, :if => lambda { |order| order.payment_required? }

#go_to_state :confirm, :if => lambda { |order| order.confirmation_required? }

go_to_state :complete

#remove_transition :from => :delivery, :to => :confirm


Since we want to implement the cash on delivery, I have commented out payment, confirm and remove_transition processes from code and for free delivery, the delivery process is commented.

Wrapping It Up:

Looking to design and customize your dream eCommerce store? Every business owner aims at growing a business each time it extends into the digital world. Clustox- Best eCommerce Store developers are here to build a captivating and result-driven online store. Reach out to the best IT consultants today to discover what eCommerce store resources will best suit your requirements.

Leave a comment

Your email address will not be published. Required fields are marked *