How can I add tabs to featured products on my website?

[AryavK]

Hello Support Team,

Can anyone pls tell me how to add tabs to the featured list on my website that looks like this:

And when you click on new arrivals it shows the new arrivals.

Plus you choose the products to put on your sections

Store URL: www.faithandyou.in

Theme: dawn

Thanks

[saim007]

@AryavK Go to Online Store > Edit Code > create new section > paste below code

  

    

      ## 
        {{ section.settings.heading1 }}
      
    

    
      ## 
        {{ section.settings.heading2 }}
      
    

  

  
    
    {% for product in section.settings['feature-collection'].products %}
      
        
        
          ### {{ product.title }}
        
        

{{ product.price | money_with_currency }}

      

    {% endfor %}
  

  
  
    
    {% for product in section.settings['best-collection'].products %}
      
        
        
          ### {{ product.title }}
        
        

{{ product.price | money_with_currency }}

      

    {% endfor %}
  

{% schema %}
{
  "name": "Tab Section",
  "settings": [
    {
      "type": "text",
      "id": "heading1",
      "label": "Heading One"
    },
    {
      "type": "collection",
      "id": "feature-collection",
      "label": "Collection One"
    },
    {
      "type": "range",
      "id": "product-show1",
      "min": 2,
      "max": 5,
      "step": 1,
      "label": "Products Per Row",
      "default": 4
    },
    {
      "type": "header",
      "content": "Second Tab Settings"
    },
    {
      "type": "text",
      "id": "heading2",
      "label": "Heading Two"
    },
    {
      "type": "collection",
      "id": "best-collection",
      "label": "Collection Two"
    },
    {
      "type": "range",
      "id": "product-show2",
      "min": 2,
      "max": 5,
      "step": 1,
      "label": "Products Per Row",
      "default": 4
    }
  ],
  "presets": [
    {
      "name": "Tab Section"
    }
  ]
}
{% endschema %}

Save it! Now go to Customize > Click on Add Section > Search for Tab Section and click > Now choose the collection for featured, best selling, new arrival and in the heading you can keep the name whatever you want, just save it!

Customization Look -

Please let me know and accept as solution if works!

[AryavK]

@saim007 @saim007 @saim007 @saim007 @saim007 ,

how do you remove the blue underline?

[saim007]

@AryavK I written CSS code for this you can see in below code -

.tab1{
    color: #000;
    text-decoration: none;
  }
    .tab2{
    color: #000;
    text-decoration: none;
}

If you want to show blue underline below the tabs then just change text-decoration: none; to text-decoration: underline;

Let me know if you need further help!