Create A Collection Tabs For My Shopify Page

Store Design
, ,
37

Hi @wahab55 ,

Code above for Dawn theme. You can use code below for trade theme.

{%  if section.blocks.size > 0 %}
  {{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}

 {{ 'quick-add.css' | asset_url | stylesheet_tag }}
  

  

  

    
    
    
    {%  if section.settings.useslider %}
      
    
    
    
    {%  endif %}
    {%  if section.settings.title != blank %}
      ## {{ section.settings.title }}
    {%  endif  %}
    
      {%  assign tabContent = '' %}
      

      {%  for block in section.blocks %}
       {%  assign collection = collections[block.settings.collection] %}
        - {{ collection.title  }}

        {%  capture content  %}
            
              

               {%- for product in block.settings.collection.products limit: 8 -%}
               - {% render 'card-product',
                        card_product: product,
                        media_aspect_ratio: 'portrait',
                        image_shape: 'default',
                        show_secondary_image: true,
                        show_vendor: false,
                        show_rating: false,
                        section_id: section.id,
                        quick_add: 'standard'
                      %}
                 
               
              {%- endfor -%}
              
             {%  if block.settings.viewall %}
               
                  View all 
               

               {%  endif  %}
            

        {%  endcapture %}
        {%  assign tabContent = tabContent | append: content %}
      {%  endfor %}  
      
   
      {{ tabContent }}
    
  
  
 
    
  
{%  endif %}  
{% schema %}
  {
    "name": "Tabs",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
       {
        "type": "checkbox",
        "id": "useslider",
        "label": "Use slider",
        "default": true
      }
    ],
    "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "limit": 5,
    
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "checkbox",
        "id": "viewall",
        "label": "Show view all",
        "default": true
      }
    ]
  
    }
  ],
    "presets": [
    {
      "name": "Tabs",
      "blocks": []
    }
  ]
  }
{% endschema %}