Shopify Tips: Add an archive to your blog

A guide to adding archives to your Shopify blog(s).

Introduction

Archives are common blog features but don't exist in the popular Shopify Dawn theme, so I decided to add one. I plan to create other versions (e.g. one based on tags), but this guide is for a date based archive grouped by year and month. You can see how it will work by following my archive link above.

Following this guide will enable you to add a new "blog archive" section to any page in Shopify using the standard "customize" button to manage the layout and content of the pages in your Shopify store, so you can just easily drop a blog archive section into any page. This means you'll have flexibility and control over how and where you use your archive(s) and which blog each archive is related to - as you can have multiple blogs in your store.

Before you get started

Before getting started it is always advisable to make it as easy as possible to revert back to the state everything was in beforehand. You then have peace of mind that if anything goes wrong you can instantly undo it! With this in mind I recommend going to your online store themes, clicking on the three dots button next to your current live theme and choosing "Duplicate". You will then have a copy of the current live state of your store which you can revert back to if needed. However, even if you don't do this, Shopify keeps a copy of all your file changes when editing your theme code so that you can revert back to an earlier version on each individual file if need be (when in the code editor, at the top of the code window it says "Recent changes" with "Current" and a drop down list beneath - just choose the file version you want to revert to.

Create the new Blog Archive section

Firstly we need to tell Shopify about a new section called "Blog archive". After navigating to your themes and choosing "..." -> Edit Code go to the "Sections" area of the folders on the left. Choose "Add a new section".

Give your new snippet the filename:

blog-archive.liquid

(Note that you will probably just name it 'blog-archive' and Shopify will add the '.liquid' itself.) Then copy and paste the following into the file, so that this is the only contents of the file:

See the Pen Shopify Blog Archive Section by Fiona Reeves (@freeves) on CodePen.

Save the new file.

Note: I am using the Shopify Dawn theme. If you are using a different theme then you will need to remove this first line of the file (below) as it references a Dawn style sheet design file which almost certainly won't exist for you (you can still use this guide, but may want to do some tweaking at the end to get everything to look just right for you - although you may not need to at all):
{{ 'section-featured-blog.css' | asset_url | stylesheet_tag }}

We now need to finish telling Shopify how to deal with displaying and collecting information for this new section in the "Customize" area.

Open this file, found in the Locales directory this time:

en.default.schema.json

Search the file to find the line beginning

"featured-collection"

(at around line 723 for me - just after the section on "featured-blog" - we're adding our new definition between the two).

Note: If you aren't using the Shopify Dawn theme you may not have a "featured-blog" section so you will need to find a place between the definitions of sections you know exist in your theme to add the new definition).

Add the following to the line immediately above the "featured-collection" line you just found - so just before "featured-collection" starts:

    "blog-archive": {
      "name": "Blog archive",
      "settings": {
        "heading": {
          "label": "Heading"
        },
        "blog": {
          "label": "Blog"
        },
        "show_date": {
          "label": "Show date"
        },
        "show_author": {
          "label": "Show author"
        }
      },
      "presets": {
        "name": "Blog archive"
      }
    },

Save the file.

Your new Blog Archive section should be ready for you to use!

Go to Online Store -> Themes -> Customize button. Add your new Blog Archive section to an existing page template or create a new specific "Blog archive" page template to use for blog archives and configure it as you want it.

Once you've added your blog archive section click on it to configure it (for example, choosing the blog it will be an archive of!).

Remember to create a new web page in the normal way (Online Store -> Pages) and assign your new theme template containing the blog archive to the page. You now have a blog archive page, you just need to link to it!

Linking to your blog archive - choices!

You might now be finished, and if you have only one blog in your Shopify store and know you won't add any more then you can just link to your new blog archive page in the normal way of linking anywhere and all will be fine.

However, if you have (or might in the future) multiple blogs you may want to be able to dynamically link directly to just the relevant archive page for that blog. For example, a link from your blog page or blog posts will need to link to the correct archive from amongst the different blog archives you have (or no archive if you don't create an archive for each blog). Read on for how to do that.

Alternatively, if you don't want the complication of setting up a dynamic link using code you could create a central "blog archives" page which displays a list of links to all your blog archives for people to choose the relevant archive themselves. A simple solution - you've finished this guide!

Connecting a blog to its associated archive

Continue reading if you want to use code to dynamically link directly to a blog's associated archive page.

To tell our blog where it's archive is we'll add a metafield to our blogs. To do this you need to go into the main settings for your Shopify store:

Settings -> Custom Data -> Blog -> Add definition

Fill in the details as in the screenshot above - the most important thing is to get the "namespace and key" correct. It should say exactly:

custom.blog_archive_page

In "Select type" choose "Page" from the list, and then "One page" from the choice of single or a list.

Save your new metafield.

Navigate to one of your blogs: Online Store -> Blog posts -> Manage blogs -> [name of a blog]

You should now be viewing the "edit blog" page. At the bottom of the page is the "Metafields" section - click on the "Show all" link to access them.

Click on the grey input area and it will allow you to select the page that contains the archive for that blog.

Save. Do this for as many blogs as you have with archive pages you've created for them. (We will only display a link if there is a page selected, so it's fine to not select a page if you don't want a link for a particular blog).

You've successfully told your blog(s) where to find their relevant archive page. Now you need to use that information to display an appropriate link.

Showing the link - in simple text

To just show a simple text link all you need is the following code:

{% assign archivepage = blog.metafields.custom.blog_archive_page.value %}
{% if archivepage %}
  {% if archivepage.url != '' %}
<a href="{{ archivepage.url }}">
  Archive
</a>
  {% endif %}
{% endif %}

(You can either copy and paste it into a file in the "edit code" area (in the Shopify Dawn theme see Sections -> main-blog.liquid for your main blog page or Sections -> main-article.liquid for your blog post pages and search for something you recognise e.g. a link or title to identify where you want the link to appear), or in the visual "customize" theme area add a "Custom Liquid" section to your template and copy and paste the code into there).

Note: The code will only work if it's placed in an area dealing with a blog - you can't just drop it into any old page! Basically, a blog has to be selected / in use for it to access - so a blog or article / post will work.

Showing the link - with an icon

If you want to include an icon with your link then you'll need to do a bit more. Start by creating a new file for your icon.

After navigating to your themes and choosing "Edit code..." go to the "Snippets" area and choose "+ Add a new snippet":

Give your new snippet the filename:

icon-archive.liquid

(Note that you will probably just name it 'icon-archive' and Shopify will add the '.liquid' itself.) Then copy and paste the following HTML code into the file, so that this is the only contents of the file:

<svg stroke-linejoin="round" stroke-miterlimit="2" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="display: inline-flex;align-self: center;top: .2em;position: relative;">
  <path clip-rule="evenodd" fill-rule="evenodd" d="m21 4c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-16.5.5h15v15h-15zm12.5 10.75c0-.414-.336-.75-.75-.75h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75zm0-3.248c0-.414-.336-.75-.75-.75h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75zm0-3.252c0-.414-.336-.75-.75-.75h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75z"/>
</svg>

Note: Make sure you change the height property (I have it set to 20) to the icon height you want.

If you want to choose from a selection of icons see my blog post on icons.

Save the new file.

To show your link using the icon copy and paste the following code:

{% assign archivepage = blog.metafields.custom.blog_archive_page.value %}
{% if archivepage %}
  {% if archivepage.url != '' %}
<a href="{{ archivepage.url }}" class="full-unstyled-link">
  {%- render 'icon-archive' -%}&nbsp;Archive
</a>
  {% endif %}
{% endif %}

Notice this line of the code above:

{%- render 'icon-archive' -%} Archive

The section in curly brackets displays the icon. Then there's a forced single spacebar space, then the word "Archive". If you only want to show the icon, remove the rest of the line after the final closing curly bracket } so that it doesn't display the space and word "Archive" in text afterwards. You can edit this line or the icon-archive.liquid file to get it displaying and styled exactly how you want it to look.

(You can either copy and paste the code into the relevant file in the "edit code" area if you are comfortable doing that (in the Shopify Dawn theme see Sections -> main-blog.liquid for your main blog page or Sections -> main-article.liquid for your blog post pages and search for something you recognise e.g. a link or title already there to identify where you want the link to appear), or in the visual "customize" theme area add a "Custom Liquid" section to your template and copy and paste the code into there).

Note: The code will only work if it's placed in an area dealing with a blog - you can't just drop it into any old page! Basically, a blog has to be selected / in use for it to access - so a blog or article / post will work.

Found this useful?

If this guide has helped you please leave a comment to let me know :) If it's really helped you, or you're just feeling generous, please consider buying me a coffee via Ko-Fi as a thank you - or buy an item from this website.

If you want to suggest other things you'd like me to write a Shopify guide about please let me know!

 blog (5)  icons (7)