How to display products from a collection specified in a block?

Shopify Discussion
,
1

Hi everyone, I’m pretty new to liquid and I’ve been trying to create a section that takes a collection inside of a block, then displays a number of those products in that section. I am struggling to get any actual output and I’m not sure why.

The end result of this should be a section that has multiple tabs. Each tab is a different collection and when the user clicks on the tab it will show a few of those collection’s products. So something like this:

Collection 1 Collection 2 Collection 3
Collection 1 - Product 1 Collection 1 - Product 2 Collection 1 - Product 3

My code so far:

{% for collection in section.blocks %}
	{{collection.products}}
{% endfor %}

{% schema %}
  {
  "blocks":[
                 {
                  "type":"Collection",
                  "name":"Tabbed Collection",
                    "settings":	[
                                  {
                                     "type": "collection",
                                     "id": "feature_collection",
                                     "label": "Featured Collection"
                                  }
                                  

                                ]
                  }
              ],

    "presets":[{
                    "category":"Custom Content",
                    "name":"tabbed collection"
           
                }]

}
{% endschema %}
1 Like
2

I was able to get products to list out with buttons to their individual pages. however, they come out as one big list and not tabs.

DevBijan_0-1616513004804.png
DevBijan_0-1616513004804.png177×466 15.3 KB

Not sure what to do here, if anyone has any ideas I’d love to hear them.

Section Code:


  

    

      

        

          {% include section.settings.products_tab_layout %}
        

      

    

  

{% schema %}
{
  "name": "Collection Tabs",
  "class": "index-section",
	 "settings": [
      {
        "type": "header",
        "content": "Select the collection to show products from"
      },
      {
        "type": "select",
        "id": "products_tab_layout",
        "label": "Select section layout",
        "options": [
          {
            "value": "products-tab1",
            "label": "Design 1 (For Dark background)"
          },
		  {
            "value": "products-tab2",
            "label": "Design 2 (For Light background)"
          }
        ]
      },
      {
      "type": "select",
      "id": "listing_rows",
      "label": "No of product rows",
      "options": [
          {
          "value": "1",
          "label": "1"
          },
          {
          "value": "2",
          "label": "2"
          },
          {
          "value": "3",
          "label": "3"
          },
          {
          "value": "4",
          "label": "4"
          }
        ],
        "default": "2"
      },
	  {
	    "type": "text",
    	"id": "no_of_products",
    	"label": "No of products in a row",
    	"default": "4",
        "info": "Used for column as well in vertical layouts"

      },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Featured collection"
      },
      {
        "type": "text",
        "id": "description",
        "label": "Description",
        "default": "Browse the collection of our best selling and trending products"
      },
	  {
        "type": "checkbox",
        "id": "fullwidth",
        "label": "Set Div fullwidth?",
        "default": true
      },
      {
        "type": "collection",
        "id": "products_tab_collection1",
        "label": "Collection for Tab 1"
      },
      {
        "type": "collection",
        "id": "products_tab_collection2",
        "label": "Collection for Tab 2"
      },
      {
        "type": "collection",
        "id": "products_tab_collection3",
        "label": "Collection for Tab 3"
      },
      {
        "type": "collection",
        "id": "products_tab_collection4",
        "label": "Collection for Tab 4"
      },
      {
        "type": "collection",
        "id": "products_tab_collection5",
        "label": "Collection for Tab 5"
      },
      {
        "type": "text",
        "id": "products_tab_count",
        "label": "No of products to show",
        "default": "8"
      },
      {
        "type": "checkbox",
        "id": "product_grid_img_carousel",
        "label": "Slide All images in product grid?",
        "default": false,
        "info": "Used for Product grid carousel enable\/disable"
      }
    ],
  "presets": [
    {
      "name": "Collection Tabs",
      "category": "Collection"
    }
  ]
}
{% endschema %}
3

It’s because both Shopify themes are one column or single column, which as you probably already know, means one line going down that you can put stuff in. So naturally things just pop up really big and in the center stacked on top of each other. It’s going to take some serious code, I don’t know. How you are doing on cashbot? Themes like empire and warehouse etc. Have that option to set up stuff like that. Kind of LOL. Happy selling buddy.