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!

        • Tracy

          Hi Zoe and Heidi! Heidi, were you able to fix the long column layout that was happening to your thumbnails? The same thing is happening to me. Also, Zoe- for some reason, the image names are displaying underneath the thumbnails (instead of the post title). Do you know how I can fix this? Thanks! Love this layout!!

        • Tracy

          Oops sorry Zoe I just realized the date is part of the code (I had saved the thumbnails in the same exact format). Adjusting that now. Thanks!

        • Zoe

          Can you share the link to the page? It’s hard to troubleshoot without being able to see it in action. The single column is generally due to conflicting CSS styles on the page, though.

        • Zoe

          Thanks. I’m seeing styles on a ten column containing div that are making the content area somewhat narrow but more importantly I’m not seeing any styles on the press items themselves to create a grid layout. You’ll need to add that into your CSS to get them into a grid.

        • Tracy

          Ah okay thanks- for the grid styling you were expecting to see on the press items themselves, so that wasn’t part of the snippet you had us implement? Do you know if shopify has this somewhere that I can pull from and add in CSS? Sorry if that question is out of your realm- really appreciate the help!

        • Zoe

          No, I generally don’t include a ton of CSS in these tutorials because they’re usually targeted at developers and the styling will vary pretty strongly based on the use case/ theme that the template is being added to. There are a lot of ways to create grid layouts – this is one that I use fairly regularly: http://www.barrelny.com/blog/text-align-justify-and-rwd/

  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.

  7. ZOEMG!!! (yes, I just made that up)

    Bacon < saved. You just did that. Thank you!

    • Zoe

      Haha, day < made! Glad to help, Glenn :)

  8. Simon

    Thanks for the post, this is what exactly what we are looking for. I really like the rare device example. I tried to install the code and use the template but it doesn’t work. I am not sure if I am doing it correctly. Is it possible that you can install that for me? Please feel free to drop me an email to talk about the fee. Thanks!

    • Zoe

      Sorry, I don’t do tweaks/ adjustments to themes. You might have some luck with the Shopify experts directory: http://experts.shopify.com Feel free to point to this tutorial to help describe what you’re looking for!

  9. Tyrell

    Thanks I used this for our gallery. Could you point me in the right direction to add Infinite Scroll or Pagination? Here is the current gallery http://www.cardsox.com/pages/gallery

  10. Michelle

    I would like to do something just like this except I do not want my images on the grid page to be clickable and open in a light box. Also I would like the images on the grid pages to pissibly be different sizes. What would be the edits I would need to make and also is there a way to populate the images into the grid in no specific order but whichever way they would fit best since each one may be a different size. I would like them to fit into each other like a puzzle in a way. Thank you!

  11. Ransom

    I’ve been trying for a solid week to get this to work and nada. some more steps than yada yada yada tada you’re done would be nice.

  12. Ellen

    Hi Zoe, thanks so much for sharing the grid coding, that’s exactly what I needed.

    I have one question though, as from SEO point of view, when click one one post, the URL doesn’t change, in which case Google see all the articles as one page. It won’t help with Google ranking. Is there a way to create individual URL when clicked the post. The theme I really liked is http://raredevice.net/pages/past-shows as you shared. From tumblr blogs it seems working with individual post with their own URL, example: http://space-interior.tumblr.com. Thanks a lot

    Best
    Ellen

    • Zoe

      I don’t think you need each page to have its own URL for SEO purposes, as Google is still crawling all the content on this page and so it will be indexed as well. If you want each page to show up separately in search results, that would be a different story and yes you’d have to add individual URL changes for each lightbox open. As you showed in the example, there is a way to do that but I’m not that familiar with it so it’s not something I can advise on.

      • Ellen

        Thanks anyways Zeo:) Have a good day!

  13. Kobi

    Thank you so much Zoe, this is exactly what i’ve been looking for!

    It isn’t quite working for me (yet), and I have a feeling it’s because I haven’t integrated the fancybox/lightbox into that particular page template. I definitely have fancybox in my theme, it’s just not pulling through. Any tips or links to helpful articles on this?

  14. GB

    Hi! This article and tutorial was great!!! I was able to set everything up.. I do need some help styling the page with the fancybox and gridding an such… I’m sure I can figure that out, but need a bit of direction.. do you have any tutorials on that?

    Thanks much.

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!