Add Product Sidebar on Collection Pages｜Savor Theme

Shopify Discussion
, , , ,
1

Hi everyone，

I want to add the product sidebar in all collection pages, But I used various plug-ins, but none of them seemed to be able to achieve the settings I wanted. The following screenshots are what I want to show.

3fabe2338ec1cfc702767e4d3c0044fd
3fabe2338ec1cfc702767e4d3c0044fd1920×997 125 KB

My website: https://sunevertech.com/

Theme: Savor

Partner code: 7357

Hope to get your help

2

Hello I’m the expert you gave access to your store

Im having issues with the previous account that’s why I’m unable to reply your message

Kindly check your email inbox or spam I have sent you message there

Looking forward to hearing from you @Sunever

4

Hello

Already replied

6

Hi,

Hope this will help

  • Create a new section file: sections/collection-sidebar.liquid

Code Example

{% schema %}
{
  "name": "Collection sidebar",
  "settings": [
    {
      "type": "number",
      "id": "max_products",
      "label": "Max products to show",
      "default": 8,
      "min": 1,
      "max": 24
    },
    {
      "type": "link_list",
      "id": "sidebar_menu",
      "label": "Sidebar menu (e.g. categories menu)"
    }
  ],
  "presets": [{"name":"Collection sidebar"}]
}
{% endschema %}

<div class="collection-sidebar-wrap">
  <div class="sidebar-menu">
    {% if settings.sidebar_menu != blank %}
      <ul class="sidebar-nav">
        {% for link in linklists[settings.sidebar_menu].links %}
          <li><a href="{{ link.url }}">{{ link.title }}</a></li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>

  <div class="sidebar-products">
    <h4>Featured in this collection</h4>
    <ul>
      {% for product in collection.products limit: settings.max_products %}
        <li class="sb-product">
          <a href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: '100x' }}" alt="{{ product.title }}">
            <span>{{ product.title | truncate: 40 }}</span>
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
  • Create a new template (duplicate templates/collection.json) and name it e.g. templates/collection.with-sidebar.json. Edit the JSON so it contains both sidebar and main collection sections in sections object and order array places the sidebar before the main collection.

Code example

{
  "name": "Collection — with sidebar",
  "sections": {
    "collection-sidebar": {
      "type": "collection-sidebar"
    },
    "main-collection": {
      "type": "main-collection"
    },
    "footer": {
      "type": "footer"
    }
  },
  "order": [
    "collection-sidebar",
    "main-collection",
    "footer"
  ]
}
  • Add CSS to your assets/theme.css (or a new CSS asset) to create a two-column layout on wide screens and collapse to 1 column on mobile

CSS Example

/* Two-column layout for collection template */
.template-collection .collection-sections {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

/* Sidebar styling */
.collection-sidebar-wrap { background:#fff; padding:12px; border:1px solid #eee; }
.collection-sidebar-wrap .sb-product { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.collection-sidebar-wrap img { width:56px; height:56px; object-fit:cover; border-radius:4px; }

/* Mobile: stack */
@media (max-width: 749px) {
  .template-collection .collection-sections { grid-template-columns: 1fr; }
}

-Save. In Shopify admin go to Products > Collections, open a collection > Theme template > select collection.with-sidebar to apply new template for that collection.

Note - If you need faceted filters, enable Shopify Search & Discovery or use a filter app.