Horizon Theme- how to add a side column with menu in blog posts

Store Design
1

How to add a sidebar menu to individual blog posts on Horizon theme (no apps needed)

Hey everyone! I couldn’t find a clear answer anywhere (even Shopify’s own support sidekick couldn’t help), so sharing what worked for me in case anyone else is stuck on this.

Goal: Display a navigation menu next to the article content on single blog post pages — posts on the left, sidebar menu on the right, stacks nicely on mobile.

What you need: Horizon theme + about 10 minutes.

Step 1 — Create the menu Online Store → Navigation → Add menu. Name it something like “Blog side menu” and add your links. Note the handle in the URL (mine was blog-side-menu).

Step 2 — Duplicate your theme first Online Store → Themes → ⋯ next to Horizon → Duplicate. Always edit the copy, never the live theme.

Step 3 — Open the code editor On your duplicated theme: ⋯ → Edit code.

Step 4 — Edit sections/main-blog.liquid This is the file that renders individual blog post pages (despite the name). You’ll wrap the existing article content in a 2-column grid and add an <aside> with the menu next to it.

can see it in action here: Eine Tasche, vier Tragemöglichkeiten: Bereise Europa mit der HOLIDAY Tasche von NORVEAR – Norvear.com

Inside the main content wrapper, structure it like this:

2

to continue:

:backhand_index_pointing_right: Replace 'blog-side-menu' with your actual menu handle.

Step 5 — Add CSS in the {% stylesheet %} block of the same file:

css

.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;
  }
}

The position: sticky is a nice touch — the menu stays visible as readers scroll through the post.

Step 6 — Save and check a blog post on your storefront. Should be working.

Tips

  • Save a copy of your edited main-blog.liquid on your desktop before any Horizon theme updates, so you can paste it back in if Shopify pushes a new version

  • Adjust 3fr 1fr if you want a wider/narrower menu (e.g. 4fr 1fr for narrower menu)

  • Any edits to the menu in Navigation → updates live on every post automatically, no code changes needed