Custom frontend

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_frontend and solidus_backend

Solidus includes both a storefront ( solidus_frontend ) and admin area ( solidus_backend ). The storefront uses Skeleton for its CSS grids and the admin area is based on Bootstrap . These gems offer the features of a typical store and make extensive use of solidus_core's features.

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:

  • ERB for view templates.
  • SASS for CSS preprocessing.
  • Pure JavaScript for JavaScript assets.

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:

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 information.

Solidus application settings

The Solidus::Config settings affect many values across the frontend of your store. You can change these settings in your /config/initializers/spree.rb file or any other initializer.

You can check all of the default settings of Spree::Config by sending this command to your Rails console:

Bash
    
      Spree::Config.inspect

    
  

As you develop your application's frontend specifically, you may want to initialize your own values for the following Spree::Config settings:

  • :layout: Specifies a view in your /app/view to 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 solidus_frontend gem.
  • :logo: Specifies a file in your /app/assets/images to be used as the logo on the storefront. You can access the logo from any view using the <%= logo %> variable. The default value is logo/solidus_logo.png
  • :products_per_page: Sets the amount of products that should be displayed on a single page. The default value is 12.

Contributing back to Solidus

If you intend to submit pull requests to Solidus, note that Solidus uses pure JavaScript for all of its solidus_frontend and solidus_backend code. Files written in CoffeeScript would not be accepted. For more information about contributing to Solidus, see the Contributing guide.

Feedback

Solidus is an open source platform supported by the community. We encourage everyone using Solius to contribute back to the documentation and the code.

If you’re interested in contributing to the docs, get started with the contributing guidelines. If you see something that needs fixing and can’t do it yourself, please send us an email.