Add Tabs & Sections to Featured Products On Homepage

Store Design
, , ,
1

Hello Support Team,

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

AryavK_0-1704187332896.png
AryavK_0-1704187332896.png400×177 31.1 KB

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

2

@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 -

sandyparihar07_0-1704201467340.png
sandyparihar07_0-1704201467340.png1592×752 155 KB

Please let me know and accept as solution if works!

3

I want to display a limit of how many products each tab has and add a button for each tab to jump to that collection

4

Hi, is it possible exchange the collection to the link?

5

There is an already option Products per row so you can set the limit there, and when you click on the image or title it will jump to that collection, If you want to show button then need to write code for that.

6

I don’t understand what do you want can you please explain so I can help you.

7

Hi, Thank you so much for your reply.

like this:

Cherry3427_0-1718789593627.png

Link: https://www.anker.com/maggo-magsafe-compatible-wireless-charger?ref=masterBanner1

I have anchor link jump, but I need to set it to place the link in each tab. So that it can works. Please help me~

8

Solved this feature here:

You don’t need to use any App.