Shopify’s Liquid language, multiple classes and SCSS

So In the last few months I have been working with Shopify, I have learnt a few things:

  • Firstly, that I would never want to touch Ruby
  • In an indirect way, I have broken #1 due to working on Liquid
  • Sections are absolutely the best thing since sliced cheese
  • Liquid can be Super easy and make life easier for shopify merchants & customers alike… but also be a really as***ole

Let me explain….

Over the last few days, I have been creating a Shopify Store to explicitly work on their API for React Native. Purely on the basis to make an experimental app to further be used in a studio environment.
In order to further improve my SCSS and Liquid knowledge, one of my colleagues last week challenged me to a seemingly simple task =
Reproduce this style as best you can in a store environment →

 With reprodicing this image, the Shop now is left out. The image is from a custom theme with the Collection’s links passing through the Shop now off the main SVG image
With reprodicing this image, the Shop now is left out. The image is from a custom theme with the Collection’s links passing through the Shop now off the main SVG image

With the “Shop Now” text left out, you would think this would be an easy challenge right? Well yes… but for someone who hasn’t tackled this before it isn’t too easy to figure out. The Shopify Liquid docs do outline this to some extent but not as much as one would like.
So how is this done??

Firstly in our section “Collection-grid” is selected as the main element on the page (I removed all the other sections just for the purpose of a clean UI while working on this). Create 3 collections and set them in their respective grids and we have something at looks like a standard 3 x 1 grid in a Shopify landing page. 
Once this is done, we can work on the Styling. Shopify’s support for SCSS with Liquid is one of the perks of learning to use Liquid. You never ever stop using Liquid and you can do pretty much anything with it; from Styling to practical use of embedding a product’s images on a checkout to custom themes… the list goes on!

Styling, is what took me the longest. Our Second step, is to create a custom class over the existing class for this image under one of the grids. If we inspect the element, we see that the class comes out as “collection-grid-item_title”. This when styled specifically targets the entire grid for styling. Not an individual grid’s text which is what the task has outlined.

In a normal environment, in CSS Grid you would just target the class you have made as normal and then style it — happy days!! Liquid, can do this but there are steps in order to style each grid box specifically. To do this, we need to create a custom class that uses a liquid parameter for targeting (and creating) a custom ID for the ID that is automatically generated, when we named out collection. This is {{collection.id}}.

 Our class now looks like this.
Our class now looks like this.

To clarify this → Liquid assigns an ID to a collection’s title (in our case, one is Jedi), which we can use to target this entire grid box’s<h3> tag, while leaving the others intact.
Once this is done, we end up with the code looking like this!

 Our finished section with the custom collection class
Our finished section with the custom collection class

Now to make it pretty! To finish our styling, I have simply done this:

The numbers on the end of the targeted class is the ID that shopify has assigned to our sections Jedi, Smuggler and Sith. So with this in mind, it has resulted in the finished product looking like this!

Now, mind you this took me a few Slack messages to my colleague Dom, a few bits of my hair pulled out and pouring over the liquid cheat sheet to finally revise this. But all and all our little custom Collection looks pretty Effing mint!! The hover over effect is just Graying out the image a touch so it didn’t really need to be shown.

Definitely learn’t something incredibly handy and valuable over the last few hours!!

Thanks for reading! Follow me on Instagram @samthenerdguy for all my other coding and miscellaneous adventures!

Sam Toohey Written by:

Sam is a self taught Developer, focusing on Web Technologies and E-Commerce. He is also an avid writer, blogger and gamer. You can commonly see Sam toying around with web technologies or working on his Podcast, Markup.

Comments are closed.