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).

  4. maiocchino

    Thank you for the tutorial! I was able to create a press blog in my site
    I have one question. Where do I plug the Redirect Blog Pages code?
    Thank you!

    • Zoe

      It can really go anywhere but best bet is to put it as early as possible in the file – I generally put it inside the head tags at the top of the theme.liquid file.

  5. Heidi

    THANK YOU THANK YOU THANK YOU!!!! This is exactly what I was looking for! I am a fairly new shopify user but am getting the hang of it. I’m savvy on the computer and know super basic HTML/CSS stuff (super super basic), but was able to follow your tutorial and get everything working quite perfectly (with the exception that my posts are not showing up as a grid but rather one long column…? ). My husband is an extremely skilled backend developer so he can help me figure it out, but in the meantime I am always trying to build/fix it myself as his day job is demanding and I’m too antsy to wait for him to come home and do it for me! So bottom line, thank you for sharing the knowledge and making it useable for even us super basic users :). Super appreciated!

    • Zoe

      You’re welcome! Which page on the site is it? I would guess that there’s some CSS style that is limiting the container width but it’s hard to say for sure without seeing the page.

      • Heidi

        It’s hidden for now…not ready yet! And hubs thinks he has a better long term solution for my need…but regardless thank you SO much for sharing!

        • Sew Heidi

          It’s not accessible from the front of the site yet as I’m still populating the content, but here it is – am SO happy with results (the hubs helped me fix a few things via CSS as you mentioned!):
          http://illustratorstuff.com/pages/illustrator-stuff-school
          Thanks again so much for the article and help!

  6. Andy

    Would it be possible to create different page templates for each blog created? I want to show a page with a grid similar to what you did with rare device, only click through to a page instead of a popup. And also have those pages pulled into a product page. Just beed it to look different to the normal blog pages.

    • Zoe

      I’ve never tried different blog templates – I’m not sure if adding new blog templates would give you the template selector or not. If not, you could put both template styles in the main blog.liquid template and wrap them in conditionals to check for the blog name to determine which template to use. A little messier in terms of having really lengthy templates but it would probably work for your use case.

      I don’t quite get what you mean about pulling pages into product pages though.

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!