As a Rails engine, Solidus allows you to build a custom application frontend from scratch. You can build out a frontend in the same way that you would for any other Rails application.
This article focuses how you can build out views for your application. However, keep in mind that you would also need to utilize Solidus's models and create your own controllers to create a functional storefront.
Solidus includes both a storefront (
admin area (
). The storefront uses
for its CSS grids and the admin area is based on
. These gems offer the features of a typical store and
make extensive use of
You may not want to use the gems for your own store. However, you may want to use them as a reference when building out your own frontend and backend.
These gems use the following tools to create views:
Getting started with Rails frontend development
If you intend to create your own storefront or admin area for a Solidus-based store, we recommend that you first familiarize yourself with Rails. Solidus is a Rails engine, so you would develop it the same way you would any other Rails app.
If you are new to Rails, here are some resources you can use to get started building your own application frontend:
- Ruby on Rails Tutorial: Learn Web Development with Rails (Michael Hartl)
- Getting Started with Rails (Rails Guides)
- The Asset Pipeline (Rails Guides)
- Rails Internationalization (I18n) API (Rails Guides)
Note that we could recommend all of the Rails Guides . But for frontend development, pay special attention to the Rails Guides linked to above.
Create your own Solidus frontend
If you choose not to use the
solidus_frontend gem and build your own
storefront from scratch, see the list below for Solidus-specific setup
Solidus application settings
Solidus::Config settings affect many values across the frontend of your
store. You can change these settings in your
file or any other initializer.
You can check all of the default settings of
Spree::Config by sending this
command to your Rails console:
As you develop your application's frontend specifically, you may want to
initialize your own values for the following
:layout: Specifies a view in your
/app/viewto be used as the base layout for your storefront. The default value is
spree/layouts/spree_application[.html.erb], which is a file included in the
:logo: Specifies a file in your
/app/assets/imagesto be used as the logo on the storefront. You can access the logo from any view using the
<%= logo %>variable. The default value is
:products_per_page: Sets the amount of products that should be displayed on a single page. The default value is
Contributing back to Solidus
If you intend to submit pull requests to Solidus, note that Solidus uses pure
solidus_backend code. Files
written in CoffeeScript would not be accepted. For more information about
contributing to Solidus, see the
Solidus is an open source platform supported by the community. We encourage everyone using Solius to contribute back to the documentation and the code.