In this article, we’ll be looking at how to set up a grid layout for products on your collection pages, and how to use Shopify’s section settings to create customizable options in the online store editor.

CSS Grid has become an increasingly popular technique for applying a layout to pages amongst other CSS frameworks. Developers can take advantage of this system to reduce complexity and define clear style rules. As explained in my Shopify blog post on getting started with a CSS grid layout, a CSS Grid framework can be easily implemented on Shopify themes to design responsive page layouts based on rows and columns.

All pages of a Shopify online store can adopt CSS Grid, but one obvious touchpoint of any e-commerce site that can benefit from a robust and clean grid layout is the collection page. On collection pages, it feels natural that products are organized in a grid format, with rows and columns. So, if an option for creating a robust grid arrangement with a simple set of rules is possible, it’s worth exploring for your custom theme projects.

Note: To get an idea of how this could look for your clients and so you can follow along with this CSS Grid tutorial, I’ve set up a test store which you can use to see the approach I’ve outlined in this tutorial.

Creating A Basic Collection Page Layout

Working with CSS Grid on a Shopify collection page will operate in very much the same way as how Grid works on a custom section—something we explored in the CSS grid blog article. Thankfully, Shopify has excellent CSS grid support. The biggest difference when implementing a grid system on a collection page is that you won’t need to assign a class to each individual item. Note that if you aren’t extremely advanced with CSS, we recommend you read over our intro to CSS guide before going further.

Now, since products are automatically outputted in a loop as repeatable content items, it’s possible to apply the same class to all products that are associated with a collection. But first, let’s look at an example of a collection page with no styling.

If you start off with a basic collection page setup, you’d likely have markup that looks like the following:

<h1>{{ collection.title }}</h1>
  {% for product in collection.products %}
    <a href="{{ product.url | within: collection }}">
      <img src="{{ product.featured_image.src | img_url: '300x' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
    <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
      <p>{{ product.price | money }}</p>
  {% unless product.available %}<br><strong>sold out</strong>{% endunless %}
  {% endfor %}

This will output the collection name as a header, and display the collection’s associated products with their image, name, and price. Without any styling, these products will appear in a vertical row by default. The size of the product images will be 300 pixels, as defined by the img_url filter.

To apply a CSS Grid framework to this group of products, you’ll first want to wrap the collection for loop in one main grid container, which is considered the parent container. Next, you can wrap the code for each individual product (the children) within its own individual container.

Once these containers are added, the markup would appear as:

<h1>{{ collection.title }}</h1>
  <div class="grid-collection">
    {% for product in collection.products %}
      <div class="grid-product">
        <a href="{{ product.url }}">
          <img src="{{ product.featured_image.src | img_url: '300x' }}" alt="{{ product.featured_image.alt | escape }}">
        </a>
        <a href="{{ product.url }}">{{ product.title }}</a>
          <p>{{ product.price | money }}</p>
          {% unless product.available %}<br><strong>sold out</strong>{% endunless %}
      </div>
    {% endfor %}
  </div>

#css #shopify #web-development #programming #developer