By default there is neither blog categories nor archives in shopify, all you have is tags. There is one another way to get separate categories using metafields but in this blog i’m going to write about how to utilize tag feature as categories, tags and archives.
The idea here is to create categories and archives as tags.
Categories :
- Let’s create categories as a tag along with other tags.
- Write schema that would list our categories.
- Print categories filtering from tags.
Archives :
- Create archives as a tag following a pattern along with other tags.
- Print Archives filtering from tags.
Tags :
Now as we have mixed all categories and archives as tags, we have to only retrieve those tags excluding categories and archives to present as tags.
1.Blog Categories
Create a `blog-sidebar` section and associate on blog page.
- Navigate to section and add a template name blog-sidebar.liquid
- include a sidebar on blog page
<div class="page-width"> <div class="blog-holder"> <div class="blog-listing-left"> {% section 'blog-template' %} </div> <div class="blog-sidebar-right"> {% section 'blog-sidebar' %} </div> </div> </div>
- on `blog-sidebar.liquid` add a schema like below which would add a textarea field to list tags that we are considering as a blog category
{% schema %} { "name": "Sidebar", "settings": [ { "type": "textarea", "id": "blog_category", "label": "Blog category", "info": "categories are selective tags. Mention those selective tags seperated with comma above." } ] } {% endschema %}
- The above schema on blog-sidebar section would create a field on blog section on `customize theme`. (Online store > customize theme > navigate to blog page on the preview section to view)
- Now add tags that you are considering as blog categories separated with comma, in the above screenshot `summer` and `another` are tags.
- on the same blog-sidebar section add these codes
<div id="sidebar-categories"> {% comment %} Blog categories {% endcomment %} {% if blog.all_tags.size > 0 %} <h3 class="h4">{{ 'blogs.sidebar.categories' | t }}</h3> <ul class="blog-listing"> {% for tag in blog.all_tags %} {% if section.settings.blog_category contains tag %} {% if current_tags contains tag %} <li>{{ tag }}</li> {% else %} <li>{{ tag | link_to_tag: tag }}</li> {% endif %} {% endif %} {% endfor %} </ul> {% endif %} </div>
The code above would print tags that we have separated as categories.
2. Blog archives
For archives we are doing this trick of adding year and month as a tags on the blog post and listing them by grouping.
On a blog post add a `{{year}} { {month}}` as a tags. for. eg `2017 january` and add this code below on same blog-sidebar section that would group and shows archives.
{% capture dates %}2013 2014 2015 2016 2017 2018 2019 2020{% endcapture %} <div id="sidebar-archives"> {% capture tags %}{% for tag in blog.all_tags %}{{ tag }} {% endfor %}{% endcapture %} <div id="archives" class="widget"> <h3 class="h4">Archives</h3> {% if tags contains '2017' %} <span>2017</span><ul> {% for tag in blog.all_tags reversed %} {% assign check = tag | downcase | split:' ' %} {% if dates contains check[0] and check[0] == '2017' %} <li><a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ check[1] }}</a></li> {% endif %} {% endfor %}</ul> {% endif %} {% if tags contains '2016' %} <span>2016</span><ul> {% for tag in blog.all_tags reversed %} {% assign check = tag | downcase | split:' ' %} {% if dates contains check[0] and check[0] == '2016' %} <li><a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ check[1] }}</a></li> {% endif %} {% endfor %}</ul> {% endif %} {% if tags contains '2014' %} <span>2014</span><ul> {% for tag in blog.all_tags reversed %} {% assign check = tag | downcase | split:' ' %} {% if dates contains check[0] and check[0] == '2014' %} <li><a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ check[1] }}</a></li> {% endif %} {% endfor %}</ul> {% endif %} {% if tags contains '2013' %} <span>2013</span><ul> {% for tag in blog.all_tags reversed %} {% assign check = tag | downcase | split:' ' %} {% if dates contains check[0] and check[0] == '2013' %} <li><a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ check[1] }}</a></li> {% endif %} {% endfor %}</ul> {% endif %} </div> <!-- end #archives --> </div>
3. Tags
Tags are default by shopify but direct listing would list the categories and archives tags as well. so we will filter them out.
<div id="sidebar-tags"> {% comment %} Blog tags {% endcomment %} {% if blog.all_tags.size > 0 %} <h3 class="h4">{{ 'blogs.sidebar.tags' | t }}</h3> <ul class="blog-listing"> {% for tag in blog.all_tags %} {% unless section.settings.blog_category contains tag %} {% assign tag = tag |downcase %} {% unless tag contains 'january' or tag contains 'february' or tag contains 'march' or tag contains 'april' or tag contains 'may' or tag contains 'june' or tag contains 'july' or tag contains 'august' or tag contains 'september' or tag contains 'october' or tag contains 'november' or tag contains 'december' %} {% if current_tags contains tag %} <li>{{ tag }}</li> {% else %} <li>{{ tag | link_to_tag: tag }}</li> {% endif %} {% endunless %} {% endunless %} {% endfor %} </ul> {% endif %} </div>
12 Comments
-
-
-
-
-
-
-
-
-
-
-
-
Ramgopal
June 27, 2017
good thanks
Andrew McCombe
May 17, 2018
Thanks for posting this. Its literally the only article on the web with information on how to do this.
Daniel
May 17, 2018
I’ve got the field to show up in the customize view but on the page it’s appearing at the bottom of all my blog posts. How do I get the sidebar to actually show up on the side?? Also I get a broken HTML notification on the customizer under sections.
I get this:
“translation missing: en.blogs.sidebar.categories”
followed by all my categories below
Suman K.C
May 18, 2018
Hi Daniel,
That’s more about layout design to adjust sidebar along with blogs. You can reorganize your structure and style it as accordingly.
And regarding the translation missing, please replace en.blogs.sidebar.categories with `Categories` text only, else you need to manage this from language file.
Kathy
June 22, 2018
Hello. This is an awesome post. Thank you for sharing it! I am having trouble, however. The title “Categories” is showing up in my blog sidebar, but the tags I’ve chosen are not. Any idea why not? Thanks!!
Suman K.C
July 5, 2018
Hi Kathy,
I have doubt that you have missed some steps in the article. It should show if you follow this step by step. Please let me know how it goes.
Joyce
July 5, 2018
Hi,
I have a problem with sidebar not appearing on the Debut theme from Shopify. I notice that there are a few missing style such as “sidebar-categories”, “sidebar-archives”, or “sidebar-tags”. Can you add the CSS style html for the sidebar template? Thanks!
Suman K.C
July 5, 2018
Hi Joyce,
We should format the layout for blog content area and sidebar then only it would appear in expected frontend section. The CSS for those classes differs by theme. So i would suggest you to have the layout formatted on yours.
Paul
August 13, 2018
After hours of searching this blog post was exactly what I was after and it works perfectly!
Thank you very much!
Mike
June 27, 2019
Hello Suman, I created the blog-sidebar.liquid template in Sections and added the codes number 2 and 3 on from this page inside.
I tried to add the code number 1 in the blog.template.liquid but I don’t know where to copy in the template exactly.
So when I save the changes :
1) there is no sidebar section displayed in the blog page when I try to customize the theme
2) If I open my blog page, there are two code error (liquid error line xx : Cannot render sections inside sections)
Your help would be really appreciated.
Suman K.C
June 27, 2019
Hi Mike,
1. The first block of code on the article above is `blog.liquid` template. which shouldn’t be a section template. In this template you are including `blog-sidebar` section template.
2. The second block of code starting with `{% schema %}..` is what goes at the bottom of `blog-sidebar` section template.
3. Then all the other block of codes goes to `blog-sidebar` template before no.2 above.
I hope this answers your question.
Erin
October 8, 2019
I get the message “Liquid error: Error in tag ‘section’ – ‘blog-template’ is not a valid section type”
Is there something I’m missing?
I don’t see a blog-template anywhere
Leave a Reply