Getting Started with Solidus Series: Customization

Learn how to fully customize Solidus stores from scratch following this step-by-step guide.

Solidus customization is the second episode on this Solidus Series tutorial. In our previous post, Getting Started with Solidus Series: Setup, we reviewed the setup and requirements for a Solidus store.

However, if you haven’t done it yet, go on and do the setup: it’s only 2 minutes away!

Now, here in this blog post, we are going to learn how to start customizing our Solidus store with HTML and CSS.

To do that, I usually follow this steps:

Adding CSS styles

BTW, I like using SCSS for styling my store because it provides a nice syntax. (You can find more information about SCSS here.)

To add CSS styles when customizing a Solidus store, replace the Solidus default styles. That is as simple as creating the following folders and file:

app/assets/stylesheets/spree/frontend.scss

• I named the folder spree because even though the framework is called Solidus, it remains as a fork of the Spree project and, despite attempts to change the syntax, they are not ready yet.
• Then, I create the file frontend.scss, because — as we will learn later in this Solidus Series — Solidus has 3 main parts: Frontend, Backend and API, and we want to override the Solidus styles located here in the source project.

That’s it! We are ready to start adding new styles and colors to our Solidus store.

I like using the SASS 7-1 Pattern when adding styles to my projects, but feel free to follow your preferred style architecture, or stick with me on this and learn about the benefits of this pattern.

Warning!

The method above will replace the entire Solidus default styles.

But, wait a second… How can we add the CSS classes to my HTML files? Easy, we are going to locate and copy the files from the Solidus source project to our current project.

For example, if we want to modify the styles of the homepage we need to find the corresponding HTML file which is located at:

frontend/app/views/spree/home/index.html.erb

Then, we need to copy the file in the exact same route with the same contents as the original file. The route  for  our project will be:

amazing_store/app/views/spree/home/index.html.erb

And finally, we can start adding CSS classes to all the HTML elements on that page.

Let’s give it a try!

Add bootstrap

Because I don’t have too much of a sense of design skills, I’m going to add bootstrap to use components like navbars, layouts, etc.

Add to our Gemfile the following line:

gem 'bootstrap', '~> 4.4.1'

And run:

bundle install

Finally we import the bootstrap library in our frontend.scss file like:

@import "bootstrap";

Then, we are going to add styles and classes to our store. From this point on, it’s up to you how much you want to customize it.

If you want to customize other views like the Cart view or the Product Detail Page, just follow the above steps of copying the view from the Solidus source into your project just like we did with the index view.

For example, if we want to customize the header, we follow these steps:

• Find the footer partial in the Solidus repository (located here)
• Create (or copy the) footer.html.erb into our project views folder like:

app/views/spree/shared/_footer.html.erb

• Voìla! This new file will replace Solidus footer and we can start customizing our store.

Let me show you what I did for my amazing store:

With that being said, this is the end of our post. In the next episode of this Solidus Series, we are going to take a look at the Solidus Admin.

Hope to see you there.

Oh, before saying goodbye, please share this on Twitter so your peers will know about Getting Started with Solidus Series: