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
Figure 2.0 Extra Strength Responsive Grids
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
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
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
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
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 firstname.lastname@example.org