How to Use Shopify Blogs for Gallery or Grid Layouts

It can be tricky to create complex informational page layouts in Shopify since there aren’t custom content types and custom fields (via metafields) are pretty limited. The two most common workarounds I use are building page layouts out of the content of multiple different Shopify pages, and using Shopify’s blogging engine to create galleries or grid layouts.

This tutorial will cover the latter, which is a technique I certainly didn’t invent but have refined for my own purposes and haven’t seen written up much.

Overview & Limitations

This method makes sense for layouts where there’s repeated content and each block needs specialized formatting.

Examples

A common example is a grid-based gallery where each individual item clicks through to either a link or a larger image in a lightbox, as in Rare Device’s Past Shows page:

Rare Device Past Shows page

I’ve also used it for things like tabbed areas on informational pages, as in the SCOUT Lifestyle Retailers page:

SCOUT Lifestyle Retailers page

The snippets below are actually from a press page implementation that isn’t live yet, but has a grid of magazine covers that either link externally or open a lightbox image when clicked.

Why It Works

There are three primary reasons that blogs are a viable and useful solution:

1. You can have as many distinct “blogs” as you want within Shopify. Using a blog for some other content type doesn’t take away from the ability to maintain a regular blog, so it’s a great choice for organizing other complex, entry-based types of content.

2. Blog entries have a useful number of fields built in. Unlike pages, which really just have a title and a content WYSIWYG area, blog posts have multiple fields: Title, Content, Excerpt, Tags, and Date. Additionally, I suppose one could use the meta/ SEO fields if so inclined.

3. Blogs are easy to loop through. Loops are an ideal way to generate repeated blocks of content, and blogs naturally lend themselves to this since they’re meant to be displayed in this way.

Limitations

On the other hand, there are a couple of limitations:

1. There’s an administration burden. Moving between blog posts to manage page content can feel inefficient and like a hack to the site administrator. Also, the client will need to remember a pattern of content entry in order for this model to work. This can be mitigated with client education but is something to consider, especially for clients who are more likely to struggle with this kind of thing.

2. Thumbnail sizes are tricky. As with any Shopify image situation, creating consistent thumbnail sizes can be challenging. Thumbnails generally need to be sized prior to being uploaded for the best results.

Content Setup

Generally you’ll want to start your setup by creating a new Shopify blog. You can do this in the Shopify admin by going to the Blog Posts section and clicking on “Manage Blogs” at the top right. You’ll want to give your blog a short, simple name and make sure you’ve noted the blog handle for use in your code:

Shopify blog handle

Then, you’ll create a post for each content block. For the press implementation, I typically put the publication name in the title field, the large pop up image or the URL in the main content area (just pasted right into the text area, not inserted as using the link button), and the thumbnail in the excerpt area. I usually use the dates on the posts to order them, just like you’d have a regular blog displayed in reverse chronological order.

Make sure your posts are assigned to the new blog!

Create the Page Template

Once there are a couple of posts to work with, the next step is to create the custom page template. In the Shopify admin, you would do this by navigating to the Themes section and using the Template Editor to create a new page template, for example page.press.liquid. You may want to base this on an existing template so that you have the appropriate markup for your theme’s layout.

You’ll want to include a snippet something like this wherever your content blocks should appear:

{% for article in blogs.press.articles %}
    <div class="press-item">
        {% if article.content contains "<img" %}
            {% assign src = article.content | split: 'src="' %}
            {% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn'; | replace: 'http:http://';, 'http://'; | remove: 'https:' %}
            <a href="{{ src }}" class="fancybox">
                {{ article.excerpt }}
                <div class="info">
                    <span class="title">{{ article.title }}</span>
                    <span>{{ article.published_at | date: "%B %Y" }}</span>
                </div>
            </a>
        {% else %}
            <a href="{{ article.content }}" target="_blank">
                {{ article.excerpt }}
                <div class="info">
                    <span class="title">{{ article.title }}</span>
                    <span>{{ article.published_at | date: "%B %Y" }}</span>
                </div>
            </a>
        {% endif %}
    </div>
{% endfor %}

This loops through the articles in the blog you created (make sure to replace the “press” handle with your blog’s handle). For each article, it creates a <div> with class press-item.

Then, there’s a conditional that checks whether the article content contains an image. The snippet within the first segment of the conditional was pulled from this Shopify forum discussion and extracts the image URL from the content area so that we can display it in the pop up. The pieces that do that extraction are:

{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn'; | replace: 'http:http://';, 'http://'; | remove: 'https:' %}

And then the resultant URL is used in the link: <a href="{{ src }}" class="fancybox">.

If there is not an image, the second part of the conditional instead pulls the URL from the content into the link instead.

In both cases, the content inside the link includes the excerpt field contents (the thumbnail), the article title, and the date.

After creating the page template, you can create the page itself and assign the template.

In this particular example, the remaining work would be in styling the page and integrating Fancybox or another lightbox system. Many Shopify themes already have a lightbox feature, so it’s just a matter of tapping into it on this template page.

Redirect Blog Pages

Finally, a nice finishing touch is to ensure that site visitors won’t be able to accidentally land on the blog archive page or the single article pages for this content. Instead, we’ll use some simple javascript to redirect them to the page we just created:

{% if template == 'blog' and blog.title == 'Press' %}
   <script>
      window.document.location.href = "/pages/press";
   </script>
{% elsif template == 'article' and blog.title == 'Press' %}
   <script>
      window.document.location.href = "/pages/press";
   </script>
{% endif %}

This snippet checks both for the template that’s being loaded and for the blog title, in case there are multiple blogs on the site.

Now you’ve got a page template pulling in the specified content from a blog, and a system in place to ensure the blog cannot be accessed directly!

  1. I have been able to edit some part of the templates in shopify but I just want to ask if it will be possible to create different template for each page? And if yes, how?

  2. Cathy

    I love the Rare Device layout! Is there some kind of step by step tutorial for complete beginners? I’d love to use this grid in one of the blogs of my page! Thanks. ;)

    • Zoe

      Unfortunately I don’t have a tutorial for complete beginners, in part because I find that those kinds of tutorials lead to a lot of questions and troubleshooting that I just don’t have time to support. You could probably find someone via the Shopify Experts directory who could help you implement it, though: http://experts.shopify.com/ Good luck!

  3. Was performing some analysis concerning this a couple of days agone. Shopify actually has provided nice resources for learning concerning on-line stores. I particularly love the Ecommerce University. What i can not appear to seek out is that if there is any samples or case studies wherever or however on-line stores originated by those in developing countries succeeded or not.

    • Zoe

      I haven’t seen anything but I also haven’t gone looking. It might be something to ask Shopify about (as far as whether they have store owners from developing countries and whether it’s something they’ve looked into at all).

Leave a Comment

Your email address will not be published. Required fields are marked *

About posting code: Please use a Gist or similar to share any extended code samples, and any code other than basic HTML, CSS, or jQuery/ JS, so as to keep the comments clean and readable. Basic HTML, CSS & jQuery can be shared in the comment surrounded by <code> tags. Thanks for commenting!