How can I assign collections to each sidebar filter choice?

Store Design
,
1

Just want to make a section with some collections and a sidebar navigator with the collection name for each collection.

The apparent effect is similar to the picture.

Isaac343_0-1671184745846.png
Isaac343_0-1671184745846.png1454×832 116 KB

But I don’t know how to attribute the collection for each sidebar filter choice. If someone can help modify it, much appreciate it.

Here is the code. The collection can work well, so it’s only the issue with the sidebar navigator.

<div class="homepage-collection">
  <div class="wrapper">
    {% if section.settings.title != blank %}
      <h2 class="home__subtitle">{{ section.settings.title }}</h2>
    {% endif %}
    <div>
          {% if section.settings.enable_sidebar %}
      <div>
        <nav>
          {% for block in section.blocks %}
          <a href="{{ collection.url }}">{{ link.title | escape }}</a>
          {% endfor %}
        </nav>
      </div>
            {% endif %}
      {% for block in section.blocks %}
        <div class="js-grid" data-grid-large="{{ block.settings.grid }}" data-grid-small="2" id="{{ collection.title }}">
          {%- assign collection = collections[block.settings.collection] -%}
          {%- assign product_limit = block.settings.grid | times: block.settings.rows -%}
      <!-- /snippets/product-grid-item.liquid -->
      {% for product in collection.products limit: product_limit %}
        {% render 'product-grid-item', product: product %}
      {% else %}
        {% render 'onboarding-product-grid-item', limit: product_limit %}
      {% endfor %}
    </div>
  {% endfor %}
    </div>
</div>
</div>

{% schema %}
{
  "name": "Featured collection nav",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Featured Products"
    },
    {
      "type":"checkbox",
      "id":"enable_sidebar",
      "label": "Enable Sidebar",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
    {
      "id": "collection",
      "type": "collection",
      "label": "Collection"
    },
    {
      "type":    "range",
      "id":      "grid",
      "min":     1,
      "max":     6,
      "step":    1,
      "label":   "Products per row",
      "default": 3
    },
    {
      "type":    "range",
      "id":      "rows",
      "min":     1,
      "max":     8,
      "step":    1,
      "label":   "Number of rows",
      "default": 1
    },
    {
      "type": "select",
      "id": "bg",
      "label": "Background color",
      "default": "palette--light bg--neutral",
      "options": [
        { "value": "palette--light bg--neutral", "label": "Default"},
        { "value": "palette--light bg--accent", "label": "Light"},
        { "value": "palette--dark bg--invert", "label": "Dark"},
        { "value": "palette--dark bg--invert--accent", "label": "Dark accent"}
      ]
    }
      ]
    }
  ],
  "presets": [
    {
      "name": "Featured collection With Sidebar",
      "category": "Collection"
    }
  ]
}
{% endschema %}
2

Hi @Isaac343
Do you want to make side bar work as a tab header, when you click on the side bar collection item, the product list will change base on the collection, right?

3

Yeah, your description is pretty sound like what we want. Do you have any examples or code templates for it? Much appreciated!

4

Hi @Isaac343
sorry, currently I have not demo to show you. I know how to build that. But Better if I know exactly style you want to add for that section.

5

HI @ExpertRookie ,

I am not sure about your meaning of style. But I have the example section here, you can check this website. We use the pipeline theme, and the sidebar function is to be added to the featured collection section

https://www.anker.com/christmas-sale?ref=naviMenu

6

Hi @Isaac343
To make the section like the anker.com, it requires to add the code to make new section. So if you don’t know the code, you should hire an expert, they can help you add the section works exactly like anker