Extending Shopify With Extra Strength Responsive Grids

By October 8, 2015Creative

Shopify is a powerful, easy-to-use e-commerce platform that we all love here at Hawke Media. It offers all kinds of fantastic outside-of-the-box functionality. With all kinds of premium themes available, you will undoubtedly find something to match the aesthetic you’re looking for. Shout out to one of our favorite theme developers Out of the Sandbox for their beautiful themes and great support! If all third party theme developers were as helpful as they are, the world would be a better place.

One drawback of Shopify is the lack of flexibility when compared to a ubiquitous solution like WordPress. With no WYSIWYG (what you see is what you get) editor, like Visual Composer in certain WordPress themes, it can be challenging to build custom pages in Shopify. Different themes will often use alternate custom grid systems to define column widths, rows, padding, etc. This can get confusing since the naming conventions vary from theme to theme. For example, half-column class names could vary from column-half to columns-2 or column-half-left. Adding to the confusion, most grid systems these days are based on a 12 column grid (Bootstrap & Foundation to name a few), but some grids use 16 or more columns…Surely there must be a better way!


Figure 1.0: Non-standard naming conventions and a 16 column grid system in the Mobilia Shopify theme

mobilia_grid1

If you have ever used a front-end framework like Bootstrap or Foundation, you’re familiar with the grid system. These frameworks are great because they come with pre-baked CSS classes for half, third, and quarter columns. They even come with responsive options thrown in. Once you become familiar with the class names and how they behave, you’re able to throw together beautiful, responsive page layouts with efficiency. The downside of these frameworks is bloat…what if we want the grid but not all the extra JavaScripts, CSS files and components?


 

Figure 2.0 Extra Strength Responsive Grids

Extra_Strength_Responsive_Grids2

 

Sounds like a case for Extra Strength Responsive Grids (ESRG), an open source project by John Polacek.  Essentially, ESRG is a lightweight file of CSS classes that give you a responsive grid system with minimal effort. SWEET!

Author’s note: When I first included ESRG in Shopify, I gave a shout out to @johnpolacek on twitter. He mentioned his newer grid system, Simple Grid is even better in his opinion. I haven’t had the chance to use Simple Grid, but I bet it’s great.

Now let’s get this grid system into our Shopify store. First, download the project from the ESRG site. For fun, open the index.html file and play around with the size of your browser window…notice how nice the rows resize and stack on mobile sizes.


 

Figure 3.0: Basic layouts that can be easily accomplished with Extra Strength Responsive Grids

Extra_Strength_Responsive_Grids1

ANTICIPATED

All the magic here is in the grid.css file in the css folder. Before uploading the file to our Shopify store, we need to rename it grid.css.liquid so it can be read properly. Log into your Shopify admin, and go to Themes > Edit HTML/CSS.


 

Figure 4.0 Click Edit HTML/CSS file in Shopify

shopify_editHTML

Navigate to the Assets directory, and click the Add a New Asset link. Upload your grid.css.liquid file.


 

Figure 5.0: Uploading the grid.css.liquid file

shopify_addNewAsset

We’re almost done. Now we just need to tell our Shopify app where to find the grid.css.liquid file in the <head> section. From your Shopify Admin, navigate to Layout –> Theme.liquid.  I like to find where the other stylesheets are being loaded and copy the code, changing the filename:


 

Figure 6.0: Adding the grid.css.liquid file to a Shopify site

shopify_addAssetLiquid1

Save the changes, and we’re done!  Now we have the full power of ESRG in our Shopify store. After a little practice and repetition, you’ll become familiar with the grid classes and be able to create awesome, flexible layouts with minimal effort.
Always open to discussing these practices further, so please don’t hesitate to reach out if you have any questions at marketing@hawkemedia.com

© 2017 | All rights reserved Hawke Media.