Solidus leverages the Rails asset pipeline to allow for extension and customization of your frontend and backend assets. We recommend that you familiarize yourself with the Rails asset pipeline before you begin modifying or overwriting Solidus's stock assets.
This article provides an overview of how Solidus manages assets. Note that it
assumes that you are using the
that are included as part of a typical Solidus installation.
For more information about the asset pipeline, see the sections below. Here's a point-form summary of how you can get started with assets:
vendor/assetsdirectory. Otherwise, add custom assets to your project's
application.jsfiles in your project's
assetstrees) requires your app's external libraries or custom assets – including any files or directories you add deeper in the directory tree.
solidus_backendgems, or any other gems. See the Override Solidus assets article for more information.
Every Solidus application includes standard Rails assets directories:
Asset trees are divided into subdirectories according to their types: either
Solidus takes this further by scoping each asset type by
spree/backend, depending on where the asset is being used.
The structure for the
vendor trees looks like this:
This directory structure is designed to keep assets from the
solidus_backend from conflicting with each other.
To see the stock Solidus assets, you can check the contents of the
solidus_backend gems installed on your system or
app/assets contents in the Solidus GitHub repo
solidus_backend gems provide
that they require. For example, see the
all.js manifests in the
you that your Solidus backend include jQuery and any other files that you create
//= require jquery3 //= require rails-ujs //= require spree/backend //= require_tree .
We recommend using the
Rails' suggested approach to asset
, then scoping your custom files to the
spree/backend subdirectories to avoid conflicts or
accidental file overrides.
For example, if you want to use the
Foundation CSS framework
your store's frontend, you would put the
foundation.css file in the following
Doing this will ensure that Foundation is scoped to the frontend and would never affect the Solidus backend's user interface.
Then, if you wanted to override a specific style on your homepage, you might
create another file in your
We recommend that all third-party extensions should adopt the same approach
as Solidus: provide manifest files with the same names and in the same
directory structure used by the
The manifest files for third-party extensions are not included automatically in your manifest files. You can either document how developers should add include your extension's required assets manually or provide a Rails generator that includes it for them.
For an example of an extension that uses a generator to install stylesheets and
migrations see the
Solidus is an open source platform supported by the community. We encourage everyone using Solidus 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.