Storefolio HTML Grid for Shopify Directory

How to Create Responsive Grid HTML page in Shopify for Your Retail Locations (Free & Paid)

A responsive grid layout is one of the best way to display content like your retail location listings – and can easily cater to viewers from viewing different devices. Unfortunately there is no direct way to implement this in Shopify.

Some opt to outsource it to a developer, but you can actually do it yourself with a number of ways – some free and some are not. Here we list out 3 ways that you can immediately jump on, with pros and cons so you can make decision based on your needs:

1. Use a HTML Grid Generator (FREE)

The Grid Generator is a free tool built by Graham Miller to generate responsive html code that you can copy and paste and add your own content.


  • It’s free.
  • The code generated is in plain html format, and not dependent on any app / framework. This means even if one day the HTML Grid Generator website closed down, you can continue using your code without disruption


  • It’s still code after all: That means to update and maintain your grid html page, you do have to tinkle with code every now and then.
  • Minimal customization option: The code generated is just plain old html code, there is no option to do customization beyond number of rows, number of columns and margin between rows/columns.

2. Use a Page Builder Shopify App (FREE*)

There is quite a number of page builder apps in the Shopify App Store, many come with pre-built template including a grid based template that you can use to easily create a html grid page.

The well known ones are Pagefly and Shogun. Personally I have used Pagefly and know that they have a free plan (up to 3 pages).


  • It’s free* (subject to change and different pricing plans of the apps)
  • It comes with support and tutorial to ensure you get the help you need while building your page.


  • Potential performance impact: This actually depends on how you use the app. When use carefully with performance in mind, there could be minimal to zero impact to your Shopify site performance; but if you didn’t implement with care, it could potentially slow down your site.

3. Use Storefolio Retail Directory App (PAID)

Storefolio is a Shopify app designed to help you create photo album (aka grid) style directory page with filtering features.


  • Store filtering features: Where you can tag each listing item and let your customers perform filtering with the tags.
  • Customization options: You can perform customization to make sure the embedded HTML grid widget matches your theme. If you are savvy with code, there is also advanced customization options for custom CSS.
  • It doesn’t mess with your themes: Storefolio uses embed code to insert the HTML Grid into your Shopify page. without injecting any code / file to your theme. Even if you switch themes perform major revamp, Storefolio remains what it is without the need to reconfigure them.
  • Support & Help: Storefolio is built by yours truly here – we have built and provided top notch support to other Shopify Apps within our portfolio and Storefolio customers would be treated with the same level of care.


  • It’s not free.

Have other ways in mind? Comment below and let us know!