Boost Your Shopify Blog: Add a Dynamic Sidebar Menu to Horizon Theme Posts (No Apps Needed!)

Hey there, fellow store owners! As a Shopify migration expert, I spend a lot of time digging through the community forums, and one question keeps popping up: "How can I make my blog posts more engaging and easier to navigate without piling on more apps?" It's a fantastic question, especially when you're using a sleek, modern theme like Horizon.

Recently, I stumbled upon a gem of a thread started by a user named Norvear. They were wrestling with a common challenge: adding a clean, functional sidebar menu to individual blog posts on the Horizon theme. And guess what? They didn't just ask the question; they came back and answered it themselves with a brilliant, no-app-needed solution! It's exactly the kind of collaborative problem-solving that makes the Shopify community so powerful.

Why a Sidebar Menu for Your Blog Posts?

Think about it. When a reader lands on one of your blog posts, you want them to stick around, right? A sidebar menu isn't just pretty; it's a powerful navigation tool. It can highlight related articles, categories, or even product collections, keeping your readers engaged and guiding them deeper into your site. Plus, from an SEO perspective, clear internal linking is always a win. The Horizon theme is fantastic, but out of the box, it doesn't offer this specific layout for single blog posts, which is where Norvear's solution shines.

The DIY Solution: Adding a Sidebar to Horizon Blog Posts

Norvear's method is elegant because it leverages Shopify's built-in code editor and Liquid templating. This means you maintain full control, avoid app subscriptions, and keep your site lean and fast. Here’s a breakdown of how you can implement this yourself, straight from the community discussion:

Step 1: Create Your Blog Sidebar Menu in Shopify Navigation

First things first, you need a menu to display! This is super straightforward:

1. Head over to your Shopify admin: Online Store → Navigation.
2. Click Add menu.
3. Give it a clear name, something like "Blog side menu" or "Related Posts."
4. Add all the links you want to appear in your sidebar. These could be links to specific blog categories, popular posts, or even relevant product pages.
5. Important: Make a note of the menu's "handle." You'll see this in the URL when you're editing the menu (e.g., if your menu is named "Blog side menu," its handle might be blog-side-menu). You'll need this exact handle later.

Step 2: Prepare Your Theme – Always Duplicate First!

This is a golden rule for any theme customization. Never edit your live theme directly!

1. Go to Online Store → Themes.
2. Find your Horizon theme, click the … (three dots) button, and select Duplicate.
3. You'll be working on this duplicated copy. This way, if anything goes awry, your live store remains untouched.

Step 3: Dive into the Code Editor

Now for the fun part! On your duplicated theme:

1. Click the … button again and select Edit code.

Step 4: Edit sections/main-blog.liquid to Create the Layout

This file is the backbone for rendering individual blog post pages in the Horizon theme (don't let the name "main-blog" confuse you – it handles single posts too!). You'll be wrapping your existing article content in a two-column grid structure and adding your menu alongside it.

Locate the main article content within this file. It usually starts with an

.blog-post-with-sidebar {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 3rem;
  align-items: start;
}

.blog-post-with-sidebar__menu {
  position: sticky;
  top: 2rem;
}

@media screen and (max-width: 749px) {
  .blog-post-with-sidebar {
    grid-template-columns: 1fr;
  }
  .blog-post-with-sidebar__menu {
    position: static;
  }
}