How to add collection tab in impulse theme?

Shopify Discussion
1

How to add Collection tabs on home page in impulse theme?

Screenshot (91).png
Screenshot (91).png1920×1080 307 KB

2

Hey @VipulSaraswat ,

If Impulse theme doesn’t support this feature by default (if it’s not a built-in feature and I don’t thing that it’s a built-in feature in the Impulse theme), then you will need to develop a custom section to your theme.

Hope this helps!

3

Hi,

You have to add a custom section by helping of html.css and javascript

HTML code example


  

    - Collection 1

    - Collection 2

    - Collection 3
  

  
  
    {% for product in collections['collection-handle-1'].products %}
      
    {% endfor %}
  

  
    {% for product in collections['collection-handle-2'].products %}
      
    {% endfor %}
  

  
    {% for product in collections['collection-handle-3'].products %}
      
    {% endfor %}

CSS example

.tab-container {
  width: 100%;
}

.tabs {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0 0 10px;
}

.tab-link {
  padding: 10px;
  cursor: pointer;
  background: #f1f1f1;
  margin-right: 5px;
}

.tab-link.current {
  background: #ccc;
}

.tab-content {
  display: none;
}

.tab-content.current {
  display: block;
}

Javascript example

document.addEventListener('DOMContentLoaded', function() {
  var tabs = document.querySelectorAll('.tab-link');
  var contents = document.querySelectorAll('.tab-content');

  tabs.forEach(function(tab) {
    tab.addEventListener('click', function() {
      var tabId = this.getAttribute('data-tab');

      tabs.forEach(function(item) {
        item.classList.remove('current');
      });

      contents.forEach(function(item) {
        item.classList.remove('current');
      });

      document.getElementById(tabId).classList.add('current');
      this.classList.add('current');
    });
  });
});
4

Hello,

Thanks a lot for taking time out of your day.

Where should i paste this code? And which code should i paste out of the three?

5

Hello,

This is my store link - https://pbandj.co.in/