Shopifyブログ記事にカテゴリやアーカイブなどのサイドバーを作成する方法 - EC PENGUIN

How to create sidebars such as categories and archives for Shopify blog posts

September 30, 2020

In this case, we will create categories and archives for blog posts, which usually correspond to sidebars.

In fact, Shopify by default does not provide a category list or archive. However, as a blogger, I thought it would be inconvenient not to have a sidebar, so I will summarize how to implement a sidebar in this article. I know some HTML and CSS! The following is for those who are familiar with the concept.

By the way, here is the image I want to implement!

(Wordpress blog I used to do)

Shopify Wordpress ブログ　カテゴリアーカイブ

In this article, the archive and category sections on the right are supposed to be created. So let's get started.

Shopify's structure does not provide categories.

The first premise is that Shopify blogs do not provide categories themselves.

Therefore, we will use "tags" to create blog categories and archives.

By the way, this is what a Shopify blog post looks like before it is created.

Shopify デフォルト　ブログ記事

The post is in the middle and both sides are blank. Unless you are using a special theme, you probably have a structure like this.

The goal of this project is to change that to the current structure with a sidebar on the right (or bottom if you are on a smartphone).

Display the category list next to the blog post.

Create a new blog-sidebar section

< div id = "categories-sidebar" >

{% if blog . ALL_TAGS . size > 0 %}

< p > Category List </ p >

< ul class = "categories-sidebar-box" >

{% for tag in blog . all_tags %}

{% if tag contains "Theme Development" OR tag contains "Management" %}

{% if current_tags contains tag %}

< li >{{ tag }}</ li >

{% else %}

< li >{{ tag | link_to_tag: tag }}</ li >

{% endif %}

{% endfor %}

</ ul >

{% endif %}

</ div >

Copy and paste this into a new section.

In this case, since we wanted to display only "Theme Development" and "Management," we limited the tags to the two described above. Since the tags will be used in the archives later on, we decided to limit the number of tags to only two, since displaying all the tags would include unnecessary tags.

Save this section. I saved it as blog-sidebar.liquid.

Now, insert the code below where you want the sidebar to appear, and the sidebar should appear. (For Shopify's default debut theme, add it to templates/article.liquid!)

{% section 'blog-sidebar' %}

It doesn't look great because I didn't apply a design, but now we have a sidebar for the blog.

Shopify Blog sidebar 実装

Create an archive for your Shopify blog

Next, we will create an archive in the sidebar next to the Shopify blog post.

Once again the image looks like this

Shopify Blog サイドバー　アーカイブ

This one also needs to be tagged, so each post will be tagged as "September 2020" and so on.

Note: If you do not add zeros, for example, from September to September, the sorting will not work properly, so be sure to add zeros for single-digit months.

When you have finished adding tags to each blog post, copy and paste the code below under the blog-sidebar.liquid you just created. The logic is the same." The tags with "year" and "month" are picked up and displayed in the sidebar.

< div id = "archives-sidebar". >

{% if blog . ALL_TAGS . size > 0 %}

< p > Archive </ p >

< ul class = "archives-sidebar-box" >

{% for tag in blog . all_tags reversed %}

{% if tag contains "Year" and tag contains "Month" %}

{% if current_tags contains tag %}

< li >{{ tag | replace: 'year 0', 'year' }}</ li >

{% else %}

< li >{{ tag | replace: 'year 0', 'year' | link_to_tag: tag }}</ li >

{% endif %}

{% endfor %}

</ ul >

{% endif %}

</ div >

Now you have an archive! (Only one article is tagged, so there is only one item.)

This is how it should look!

Shopify サイドバー　アーカイブ　見え方　追加

Either way, the design needs to be adjusted. (Perhaps by the time you are looking at this article, the right sidebar on the EC-PENGUIN site will have been adjusted quite a bit, lol)

How to create sidebars for categories, archives, etc. on Shopify blog posts Summary

How was that?

It would be sad to see a visitor leave your blog after just one post. We want them to see several articles if they have gone through the trouble.

A sidebar may be a good opportunity for them to read more than one article. I would also like to make a sidebar item for ranking articles. I will try later ☺️.

Have a great day!