Shopify Horizon Theme Blog Sidebar Tutorial

Hey there, fellow store owners! As a Shopify migration expert and someone who spends a lot of time in the community forums, I often see common questions pop up. One that caught my eye recently, and was brilliantly solved by a community member, Norvear, was about adding a sidebar menu to individual blog posts on the Horizon theme.

You know the drill: you’ve got fantastic blog content, but your readers might get lost or not easily find related articles. A well-placed sidebar menu can be a game-changer for navigation and keeping visitors engaged. It’s a feature many themes don't offer out-of-the-box for single blog posts, especially without resorting to yet another app.

Norvear, like many of us, struggled to find a clear solution, even from Shopify's own support. So, they rolled up their sleeves, figured it out, and generously shared a detailed, step-by-step guide in the forums. And guess what? It doesn't require any third-party apps, just a little bit of direct theme code modification. If you're running the Horizon theme and want to enhance your blog's navigation, this one's for you!

Why a Sidebar Menu is a Must-Have for Your Blog

Before we dive into the 'how-to,' let's quickly touch on the 'why.' A sidebar menu on your blog posts isn't just for aesthetics. It:

Improves Navigation: Helps readers quickly jump between categories, popular posts, or related content.
Boosts Engagement: Keeps visitors on your site longer by offering easy access to more of your valuable content.
Enhances User Experience: A well-structured layout feels professional and makes your content easier to consume.
Saves You Money: This solution means no extra monthly app subscriptions!

Norvear's goal was simple: display a navigation menu next to the article content on single blog post pages – posts on the left, sidebar menu on the right, and stacking nicely on mobile. The best part? It only takes about 10 minutes!

The Step-by-Step Guide: Adding Your Blog Sidebar

Alright, let's get into the nitty-gritty. Remember, we're working directly with theme code here, so always proceed with caution. Norvear's guide is excellent, and I've added a couple of extra pointers for clarity.

Step 1 – Create Your Blog Side Menu

First things first, you need a menu to display! Go to your Shopify admin:

Online Store → Navigation → Add menu.
Name it something descriptive, like “Blog Side Menu.”
Add the links you want to appear in your sidebar (e.g., categories, specific articles, or even external links).
Important: Note the “handle” of your new menu. You can usually find this in the URL when you're editing the menu (e.g., if the URL is .../navigation/blog-side-menu, then blog-side-menu is your handle). You'll need this later!

Step 2 – Duplicate Your Theme (Crucial Safety Step!)

Seriously, don't skip this. Always, always edit a copy, never your live theme.

From your Shopify admin, go to Online Store → Themes.
Find your Horizon theme, click the … (three dots) button, and select Duplicate.
You'll be working on this duplicated copy.

Step 3 – Open the Code Editor

Now, let's get into the code:

On your duplicated theme, click the … button again, and select Edit code.

Step 4 – Edit `sections/main-blog.liquid`

This is the core file that renders your individual blog post pages, despite its somewhat misleading name. You’ll be wrapping your existing article content in a new two-column grid structure and adding an

element for your menu.

You need to locate the main content section of your blog post within this file. It’s usually wrapped in an

tag or a

with a specific ID/class. You’ll then wrap that entire section and add the sidebar

next to it, all within a new container

that will become our 2-column grid.

Find the existing main content block. It might start with something like

or a

containing blog.content. You’ll essentially create a new wrapper around this existing content and add the sidebar next to it, like this:



  
    
    
    
  

  
    {%- assign sidebar_menu = linklists['blog-side-menu'] -%}
    {%- if sidebar_menu.links.size > 0 -%}
      {{ sidebar_menu.title }}
      
        {%- for link in sidebar_menu.links -%}
          {{ link.title }}
        {%- endfor -%}
      
    {%- endif -%}

A quick note on the code: You'll need to replace 'blog-side-menu' with the actual handle of the menu you created in Step 1. I’ve also added href="{{ link.url }}" to the tag, which Norvear didn’t include in their original snippet, but it’s essential for your links to actually work!

Boost Blog Engagement: A Step-by-Step Guide to Adding a Sticky Sidebar Menu in Shopify's Horizon Theme