This is the theme default tab code
{{ 'collection-tab.css' | asset_url | stylesheet_tag }}
{{ 'product.css' | asset_url | stylesheet_tag }}
{%- liquid
assign th_st = settings
assign product_style = th_st.product_style
assign st = section.settings
assign container = st.container
assign color_scheme = st.color_scheme
assign text_align = st.text_alignment
assign heading = st.heading
assign heading_border = st.heading_border
assign description = st.description
assign enabled_animations = settings.animations_enabled
assign more_row = ''
if st.number_of_rows > 1
assign more_row = 'more-row'
endif
assign spt_tablet = ''
if st.padding_top > 50
assign spt_tablet = ' spt-tablet'
endif
assign spt_mobile = ''
if st.padding_top > 30
assign spt_mobile = ' spt-mobile'
endif
assign spb_tablet = ''
if st.padding_bottom > 50
assign spb_tablet = ' spb-tablet'
endif
assign spb_mobile = ''
if st.padding_bottom > 30
assign spb_mobile = ' spb-mobile'
endif
assign reset_spacing = ''
if st.reset_spacing
assign reset_spacing = ' remove_spacing'
endif
assign blocks = section.blocks
assign tab_type = st.tab_type
assign tab_design = st.tab_design
assign tab_style = st.tab_style
assign design_class = ''
if tab_style == 'tab_desgin_1'
assign design_class = 'tab-desgin-1'
elsif tab_style == 'tab_desgin_2'
assign design_class = 'tab-desgin-2'
elsif tab_style == 'tab_desgin_3'
assign design_class = 'tab-desgin-3'
elsif tab_style == 'tab_desgin_4'
assign design_class = 'tab-desgin-4'
endif
assign grid_class = ''
if tab_type == 'grid'
assign grid_class = 'bls__grid {{ product_style }}'
endif
-%}
{%- capture style -%}
--section-padding-top: {{ st.padding_top }}px; --section-padding-bottom: {{ st.padding_bottom }}px; {%- if tab_type == 'carousel' -%}--bls_product-item-vertical-space: 0px;{%- endif -%}
{%- endcapture -%}
<section
class="color-{{ color_scheme }} gradient bls__section {{ spt_tablet }}{{ spb_tablet }}{{ spt_mobile }}{{ spb_mobile }} bls__product bls__tab{{ reset_spacing }} {{ more_row }} {% if section.settings.container == "full-width" or section.settings.column_gap == 0 %} not-radius {% endif %}"
style="{{ style | strip | strip_newlines }}"
id="{{ section.id }}"
data-id="{{ section.id }}"
data-type="product_grid"
>
<div class=" {{ container }} section-full">
{%- if heading != blank or description != blank -%}
<div class="bls__section-header bls__tab-heading {{ text_align }} {% if tab_style == 'tab_desgin_4' %}d-none{% endif %}">
{%- if heading != blank -%}
<h2 class="bls__section-heading mb-5 {% if heading_border %}heading-border{% endif %} {% if enabled_animations %}scroll-trigger animate--slide-in{% endif %}">
{{ heading }}
</h2>
{%- endif -%}
{%- if description != blank -%}
<div class="bls__section-des {% if enabled_animations %}scroll-trigger animate--slide-in{% endif %}">
{{ description }}
</div>
{%- endif -%}
</div>
{%- endif -%}
<div class="bls__collection-tab" data-id=" {{ section.id }} ">
{%- if blocks.size > 1 -%}
{%- if tab_design == 'horizontal' -%}
{% if tab_style == 'tab_desgin_4' %}
<div class="tab-design-with-heading d-flex justify-content-between align-items-center flex-wrap">
{%- if heading != blank -%}
<div class="bls__section-header {{ text_align }} mr-30">
{%- if heading != blank -%}
<h2 class="bls__section-heading mb-5 {% if heading_border %}heading-border{% endif %} {% if enabled_animations %}scroll-trigger animate--slide-in{% endif %}">
{{ heading }}
</h2>
{%- endif -%}
</div>
{%- endif -%}
{% endif %}
<div class="bls__section-header tab-header text-center whitespace-nowrap overflow-y-hidden {{ design_class }} {% if enabled_animations %}scroll-trigger animate--slide-in{% endif %}">
{%- for block in blocks -%}
{%- liquid
assign tab_name = block.settings.title
assign current_collection = block.settings.collection
assign active = ''
if forloop.first == true
assign active = ' active'
endif
if block.settings.title == blank
assign tab_name = 'Tab ' | append: forloop.index
if current_collection != blank
assign tab_name = current_collection.title
endif
endif
-%}
<div
class="bls__collection-tab-item{{ active }} px-25 d-inline-flex {% if enabled_animations %}scroll-trigger animate--slide-in{% endif %}"
data-id="collection-{{ block.id }}"
{% if enabled_animations %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
<span class="relative">{{ tab_name }}</span>
</div>
{%- endfor -%}
</div>
{% if tab_style == 'tab_desgin_4' %}
{%- if description != blank -%}
<div
class="bls__section-des w-full bls__section-header {% if enabled_animations %}scroll-trigger animate--slide-in{% endif %}"
style="margin-top:-20px"
>
{{ description }}
</div>
{%- endif -%}
</div>
{% endif %}
{%- else -%}
<div class="bls__section-header flex justify-content-center align-items-center flex-nowrap {% if enabled_animations %}scroll-trigger animate--slide-in{% endif %}">
<h2 class="bls__section-heading grey-color mb-0 mr-20">{{ 'products.product.select_tab' | t }}</h2>
<div class="custom-select flex flex-nowrap">
<select class="bls__section-heading bls__select select-data">
{%- for block in blocks -%}
{%- liquid
assign tab_name = block.settings.title
assign current_collection = block.settings.collection
assign active = ''
if forloop.first == true
assign active = ' active'
endif
if block.settings.title == blank
assign tab_name = 'Tab ' | append: forloop.index
if current_collection != blank
assign tab_name = current_collection.title
endif
endif
-%}
<option value="collection-{{ block.id }}">{{ tab_name }}</option>
{%- endfor -%}
</select>
</div>
</div>
{%- endif -%}
{%- endif -%}
<div class="bls__collection-tab-content ">
{%- for block in blocks -%}
{%- liquid
assign tab_name = block.settings.title
assign current_collection = block.settings.collection
assign active = ''
if forloop.first == true
assign active = ' active'
endif
-%}
<div
class="bls__cls-tab{{ active }} {{ grid_class }} bls__grid {{ product_style }}"
id="collection-{{ block.id }}"
data-id="{{ block.id }}"
>
{%- if tab_type == 'grid' -%}
{%- render 'product-grid-layout' | st: st | bl: current_collection | block: block -%}
{%- else -%}
{%- render 'product-carousel-layout' | st: st | bl: current_collection | index: forloop.index -%}
{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
</section>
{% schema %}
{
"name": "t:sections.collection-tab.name",
"disabled_on": {
"groups": ["header", "footer", "custom.overlay"]
},
"settings": [
{
"type": "header",
"content": "t:sections.all.section_header.title_header"
},
{
"type": "text",
"id": "heading",
"label": "t:sections.all.section_header.heading"
},
{
"type": "checkbox",
"id": "heading_border",
"label": "t:sections.all.content_text.heading_border",
"default": false
},
{
"type": "richtext",
"id": "description",
"label": "t:sections.all.section_header.description",
"default": "<p></p>"
},
{
"type": "select",
"id": "text_alignment",
"label": "t:sections.all.horizontal_alignment.text_alignment",
"default": "text-center",
"options": [
{
"value": "text-left",
"label": "t:sections.all.horizontal_alignment.options__1.label"
},
{
"value": "text-center",
"label": "t:sections.all.horizontal_alignment.options__2.label"
},
{
"value": "text-right",
"label": "t:sections.all.horizontal_alignment.options__3.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.header.general"
},
{
"type": "select",
"id": "container",
"label": "t:sections.all.layout.label",
"default": "container",
"options": [
{
"value": "container",
"label": "t:sections.all.layout.options__1.label"
},
{
"value": "container-fluid",
"label": "t:sections.all.layout.options__2.label"
},
{
"value": "strecth-width",
"label": "t:sections.all.layout.options__3.label"
},
{
"value": "full-width",
"label": "t:sections.all.layout.options__4.label"
}
]
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label"
},
{
"type": "header",
"content": "t:sections.collection-tab.settings.header.title_tab"
},
{
"type": "select",
"id": "tab_design",
"label": "t:sections.collection-tab.settings.tab_design.label",
"default": "horizontal",
"options": [
{
"value": "horizontal",
"label": "t:sections.collection-tab.settings.tab_design.horizontal.label"
},
{
"value": "select",
"label": "t:sections.collection-tab.settings.tab_design.select.label"
}
]
},
{
"type": "select",
"id": "tab_style",
"label": "t:sections.collection-tab.settings.tab_style.label",
"default": "tab_desgin_1",
"options": [
{
"value": "tab_desgin_1",
"label": "t:sections.all.design_collection.design__1.label"
},
{
"value": "tab_desgin_2",
"label": "t:sections.all.design_collection.design__2.label"
},
{
"value": "tab_desgin_3",
"label": "t:sections.all.design_collection.design__3.label"
},
{
"value": "tab_desgin_4",
"label": "t:sections.all.design_collection.design__4.label"
}
]
},
{
"type": "select",
"id": "tab_type",
"label": "t:sections.all.design_layout.product_type",
"default": "grid",
"options": [
{
"value": "grid",
"label": "t:sections.all.design_layout.options__1.grid"
},
{
"value": "carousel",
"label": "t:sections.all.design_layout.options__2.carousel"
}
]
},
{
"type": "range",
"id": "limit_products",
"label": "t:sections.all.show_column.product_to_show",
"min": 1,
"max": 20,
"step": 1,
"default": 8
},
{
"type": "range",
"id": "item_desktop",
"label": "t:sections.all.custom_column.per_row",
"min": 1,
"max": 25,
"step": 1,
"default": 4
},
{
"type": "range",
"id": "column_gap",
"label": "t:sections.all.padding.column_gap",
"min": 0,
"max": 50,
"step": 5,
"unit": "px",
"default": 30
},
{
"type": "header",
"content": "t:sections.all.setting_carousel.carousel_title"
},
{
"type": "checkbox",
"id": "carousel_autoplay",
"label": "t:sections.all.setting_carousel.autoplay",
"default": false
},
{
"type": "checkbox",
"id": "carousel_loop",
"label": "t:sections.all.setting_carousel.loop",
"default": false
},
{
"type": "checkbox",
"id": "carousel_arrows",
"label": "t:sections.all.setting_carousel.show_arrow",
"default": false
},
{
"type": "select",
"id": "carousel_pagination",
"label": "t:sections.all.setting_carousel.carousel_pagination.label",
"options": [
{
"value": "carousel_none",
"label": "t:sections.all.setting_carousel.carousel_pagination.carousel__none.label"
},
{
"value": "carousel_bullets",
"label": "t:sections.all.setting_carousel.carousel_pagination.carousel__bullets.label"
},
{
"value": "show_bullet_mobile",
"label": "t:sections.all.setting_carousel.carousel_pagination.bullet__mobile.label"
}
]
},
{
"type": "header",
"content": "t:sections.collection-tab.settings.header.grid_settings"
},
{
"type": "range",
"id": "number_of_rows",
"label": "t:sections.collection-tab.settings.number_of_rows.label",
"min": 1,
"max": 3,
"step": 1,
"default": 1
},
{
"type": "checkbox",
"id": "load_more_button_enable",
"label": "t:sections.all.load_more_button_enable.label",
"default": false
},
{
"type": "select",
"id": "button_action",
"label": "t:sections.all.button_action.label",
"default": "load",
"options": [
{
"value": "load",
"label": "t:sections.all.button_action.load.label"
},
{
"value": "redirect",
"label": "t:sections.all.button_action.redirect.label"
}
]
},
{
"type": "text",
"id": "button_label",
"label": "t:sections.all.content_text.button_text",
"default": "Load more"
},
{
"type": "select",
"id": "button_type",
"label": "t:sections.all.content_text.button_type.label",
"default": "primary",
"options": [
{
"value": "primary",
"label": "t:sections.all.content_text.button_type.options__1.label"
},
{
"value": "secondary",
"label": "t:sections.all.content_text.button_type.options__2.label"
},
{
"value": "link",
"label": "t:sections.all.content_text.button_type.options__3.label"
}
]
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"label": "t:sections.all.padding.padding_top",
"default": 0,
"min": 0,
"max": 100,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "t:sections.all.padding.padding_bottom",
"default": 0,
"min": 0,
"max": 100,
"step": 1,
"unit": "px"
},
{
"type": "checkbox",
"id": "reset_spacing",
"label": "t:sections.all.reset_spacing.label",
"default": false
}
],
"max_blocks": 25,
"blocks": [
{
"type": "collection",
"name": "t:sections.collection-tab.blocks.collection.name",
"settings": [
{
"type": "text",
"id": "title",
"label": "t:sections.collection-tab.blocks.collection.settings.tab_name.label",
"info": "t:sections.collection-tab.blocks.collection.settings.tab_name.info"
},
{
"id": "collection",
"type": "collection",
"label": "t:sections.all.collection_item.select_collection"
}
]
}
],
"presets": [
{
"name": "t:sections.collection-tab.name",
"blocks": [
{
"type": "collection",
"settings": {}
},
{
"type": "collection",
"settings": {}
}
]
}
]
}
{% endschema %}
The products showing in here fine
