Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello,
I want to add the tab collection in shopify dawn theme.
like above mentioned.
Please help to resolve my problem.
Best,
Sohan
Solved! Go to the solution
This is an accepted solution.
I there ,
Please check this video I have created for you .
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
{%- if section.settings.enable_quick_add -%}
<link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
button.tablinks {
border: none;
background: none;
font-size: 1.2rem;
padding: 12px 20px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
button.tablinks {
border: none;
background: none;
font-size: 2.2rem;
padding: 12px 20px;
color: #000;
}
.outerdic {
margin: 0 auto;
}
}
.tab {
margin: 0 auto;
text-align: center;
display: block;
}
button.tablinks.active {
border-bottom: 3px solid #000;
}
.tabinner {
width: fit-content;
margin: 0 auto;
border-bottom: 1px solid #000;
}
.tabinner button {
font-family: var(--font-heading-family);
}
.outerdic .slider-counter {
display: none !important;
}
.final:after {
content: "";
position: absolute;
top: var(--buttons-border-width);
right: var(--buttons-border-width);
bottom: var(--buttons-border-width);
left: var(--buttons-border-width);
z-index: 1;
border-radius: var(--buttons-radius);
}
.final:hover::after {
content: "";
position: absolute;
top: var(--buttons-border-width);
right: var(--buttons-border-width);
bottom: var(--buttons-border-width);
left: var(--buttons-border-width);
z-index: 1;
border-radius: var(--buttons-radius);
}
a.center.final.button.button--secondary {
text-align: center;
margin: 0 auto;
width: 20rem;
display: block;
padding: 1.2rem;
font-size: 2.4rem
}
.extrapass{
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (max-width:749px){
a.center.final.button.button--secondary {
font-size: 1.8rem;
}
}
.extrapass a.center.final.button.button--secondary {
width: 30rem;
}
{%- endstyle -%}
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
assign show_mobile_slider = true
endif
assign show_desktop_slider = true
if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}
<div class="color-{{ section.settings.color_scheme }} isolate gradient">
<div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
<div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
{%- if section.settings.title != blank -%}
<h2 class="title {{ section.settings.heading_size }}">{{ section.settings.title | escape }}</h2>
{%- endif -%}
{%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}
<div class="collection__description {{ section.settings.description_style }}">{%- if section.settings.show_description -%}{{ section.settings.collection.description }}{%- else -%}{{ section.settings.description }}{% endif %}</div>
{%- endif -%}
</div>
{%- if section.settings.show_view_all and more_in_collection -%}
<div class="center collection__view-all">
<a href="{{ section.settings.collection.url }}"
class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
>
{{ 'sections.featured_collection.view_all' | t }}
</a>
</div>
{%- endif -%}
</div>
</div>
<div class="tab">
<div class="tabinner">
<button class="tablinks" onclick="openCity(event, '{{ section.settings.collection }}')" id="defaultOpen">{{ section.settings.collection.title }}</button>
<button class="tablinks" onclick="openCity(event, '{{ section.settings.collection1 }}')">{{ section.settings.collection1.title }}</button>
<button class="tablinks" onclick="openCity(event, '{{ section.settings.collection2 }}')">{{ section.settings.collection2.title }}</button>
</div>
</div>
<div id="{{ section.settings.collection }}" class="tabcontent" >
<div class="outerdic page-width">
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
<ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'card-product', show_vendor: section.settings.show_vendor %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons no-js-hidden">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
</div>
<div id="{{ section.settings.collection1 }}" class="tabcontent">
<div class="outerdic page-width">
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
<ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection1 == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
{%- for product in section.settings.collection1.products limit: section.settings.products_to_show -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'card-product', show_vendor: section.settings.show_vendor %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons no-js-hidden">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
</div>
<div id="{{ section.settings.collection2 }}" class="tabcontent">
<div class="outerdic page-width">
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
<ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection2 == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
{%- for product in section.settings.collection2.products limit: section.settings.products_to_show -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'card-product', show_vendor: section.settings.show_vendor %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons no-js-hidden">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("defaultOpen").click();
});
</script>
{% schema %}
{
"name": "PWC - Tab Collections",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "richtext",
"id": "description",
"label": "t:sections.featured-collection.settings.description.label"
},
{
"type": "checkbox",
"id": "show_description",
"label": "t:sections.featured-collection.settings.show_description.label",
"default": false
},
{
"type": "select",
"id": "description_style",
"label": "t:sections.featured-collection.settings.description_style.label",
"options": [
{
"value": "body",
"label": "t:sections.featured-collection.settings.description_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.featured-collection.settings.description_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.featured-collection.settings.description_style.options__3.label"
}
],
"default": "body"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "collection",
"id": "collection1",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "collection",
"id": "collection2",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.products_to_show.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.columns_desktop.label"
},
{
"type": "checkbox",
"id": "full_width",
"label": "t:sections.featured-collection.settings.full_width.label",
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection.settings.show_view_all.label"
},
{
"type": "select",
"id": "view_all_style",
"label": "t:sections.featured-collection.settings.view_all_style.label",
"options": [
{
"value": "link",
"label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
},
{
"value": "outline",
"label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
},
{
"value": "solid",
"label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
}
],
"default": "solid"
},
{
"type": "checkbox",
"id": "enable_desktop_slider",
"label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
"default": false
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "t:sections.featured-collection.settings.enable_quick_buy.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "PWC- Tab Collection"
}
]
}
{% endschema %}
This is an accepted solution.
Hello @Sohan2198 ,
Sorry for late reply
Here is the updated code .
<style>
.tabs {
display: flex;
margin-bottom: 20px;
cursor: pointer;
width: 60%;
margin: 0 auto;
}
.tabs button {
flex: 1;
padding: 10px;
background: #f1f1f1;
border: none;
margin-right: 2px;
transition: background 0.3s;
}
.tabs button:hover, .tabs button.active {
background: #ddd;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
</style>
<div class="tabs">
{% for block in section.blocks %}
{% if block.settings.collection %}
<button class="tab-button" data-collection-id="collection-{{ block.id }}">{{ block.settings.collection.title }}</button>
{% endif %}
{% endfor %}
</div>
{% for block in section.blocks %}
{% if block.settings.collection %}
<div class="tab-content" id="collection-{{ block.id }}">
{% assign collection = block.settings.collection %}
<div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
<div class="loading-overlay gradient"></div>
<ul
id="product-grid"
data-id="{{ section.id }}"
class="
grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
grid--{{ section.settings.columns_desktop }}-col-desktop
"
>
{%- for product in collection.products limit: section.settings.products_per_page -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
<li
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- endfor -%}
</ul>
</div>
</div>
{% endif %}
{% endfor %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const collectionId = button.getAttribute('data-collection-id');
// Remove active class from all buttons and content
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to the clicked button and corresponding content
button.classList.add('active');
document.getElementById(collectionId).classList.add('active');
});
});
// Trigger click on the first tab button to show the first tab by default
if (tabButtons.length > 0) {
tabButtons[0].click();
}
});
</script>
{% schema %}
{
"name": "Collections Tabs Blocks",
"settings": [
{
"type": "range",
"id": "products_per_page",
"min": 8,
"max": 24,
"step": 4,
"default": 16,
"label": "Products per page"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "Columns on desktop"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"info": "Has cards info",
"default": "scheme-1"
},
{
"type": "header",
"content": "Image settings"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "Adapt"
},
{
"value": "portrait",
"label": "Portrait"
},
{
"value": "square",
"label": "Square"
}
],
"default": "adapt",
"label": "Image ratio"
},
{
"type": "select",
"id": "image_shape",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "arch",
"label": "Arch"
},
{
"value": "blob",
"label": "Blob"
},
{
"value": "chevronleft",
"label": "Chevron left"
},
{
"value": "chevronright",
"label": "Chevron right"
},
{
"value": "diamond",
"label": "Diamond"
},
{
"value": "parallelogram",
"label": "Parallelogram"
},
{
"value": "round",
"label": "Round"
}
],
"default": "default",
"label": "Image shape",
"info": "Image shape info"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "Show secondary image"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "Show rating",
"info": "Show rating info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "Enable quick add"
},
{
"type": "header",
"content": "Filtering settings"
},
{
"type": "checkbox",
"id": "enable_filtering",
"default": true,
"label": "Enable filtering",
"info": "Enable filtering info"
},
{
"type": "select",
"id": "filter_type",
"options": [
{
"value": "horizontal",
"label": "Horizontal"
},
{
"value": "vertical",
"label": "Vertical"
},
{
"value": "drawer",
"label": "Drawer"
}
],
"default": "horizontal",
"label": "Filter type",
"info": "Filter type info"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "Enable sorting"
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "Columns on mobile",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
]
},
{
"type": "header",
"content": "Padding settings"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Select Collection"
}
]
}
],
"presets": [
{
"name": "Collections Tabs Blocks",
"category": "Custom"
}
]
}
{% endschema %}
Hi @Sohan2198
The Dawn theme does not inherently include a tab element, so you need to code it yourself. This can be quite challenging, requiring at least a good understanding of HTML, CSS, and Liquid, you can refer this article https://community.shopify.com/c/shopify-design/how-to-add-tabs-in-dawn-theme-under-the-product-descr... or else you might need to hire a developer to code it for you, as it involves writing at least 50 lines of code. If you are not confotable with this option, another option is to switch to a theme that includes a tab element (e.g., Impulse or Empire theme). Alternatively, you can use a page builder to create this tab section. With a page builder, you can simply drag and drop elements, customize colors, and then add that section to your theme effortlessly.
Hope it helps!
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Unlock the secrets to a record-breaking BFCM with PageFly and Canva
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube
All features are available from the Free plan. Live Chat Support is available 24/7.
Hello @Sohan2198, I can do it for you. I have done it in some online stores. Please reply if you want to do it in the store.
Also can create some other sections if you go further with it.
Best regards,
Thanks!
This is an accepted solution.
I there ,
Please check this video I have created for you .
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
{%- if section.settings.enable_quick_add -%}
<link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
button.tablinks {
border: none;
background: none;
font-size: 1.2rem;
padding: 12px 20px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
button.tablinks {
border: none;
background: none;
font-size: 2.2rem;
padding: 12px 20px;
color: #000;
}
.outerdic {
margin: 0 auto;
}
}
.tab {
margin: 0 auto;
text-align: center;
display: block;
}
button.tablinks.active {
border-bottom: 3px solid #000;
}
.tabinner {
width: fit-content;
margin: 0 auto;
border-bottom: 1px solid #000;
}
.tabinner button {
font-family: var(--font-heading-family);
}
.outerdic .slider-counter {
display: none !important;
}
.final:after {
content: "";
position: absolute;
top: var(--buttons-border-width);
right: var(--buttons-border-width);
bottom: var(--buttons-border-width);
left: var(--buttons-border-width);
z-index: 1;
border-radius: var(--buttons-radius);
}
.final:hover::after {
content: "";
position: absolute;
top: var(--buttons-border-width);
right: var(--buttons-border-width);
bottom: var(--buttons-border-width);
left: var(--buttons-border-width);
z-index: 1;
border-radius: var(--buttons-radius);
}
a.center.final.button.button--secondary {
text-align: center;
margin: 0 auto;
width: 20rem;
display: block;
padding: 1.2rem;
font-size: 2.4rem
}
.extrapass{
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (max-width:749px){
a.center.final.button.button--secondary {
font-size: 1.8rem;
}
}
.extrapass a.center.final.button.button--secondary {
width: 30rem;
}
{%- endstyle -%}
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
assign show_mobile_slider = true
endif
assign show_desktop_slider = true
if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}
<div class="color-{{ section.settings.color_scheme }} isolate gradient">
<div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
<div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
{%- if section.settings.title != blank -%}
<h2 class="title {{ section.settings.heading_size }}">{{ section.settings.title | escape }}</h2>
{%- endif -%}
{%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}
<div class="collection__description {{ section.settings.description_style }}">{%- if section.settings.show_description -%}{{ section.settings.collection.description }}{%- else -%}{{ section.settings.description }}{% endif %}</div>
{%- endif -%}
</div>
{%- if section.settings.show_view_all and more_in_collection -%}
<div class="center collection__view-all">
<a href="{{ section.settings.collection.url }}"
class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
>
{{ 'sections.featured_collection.view_all' | t }}
</a>
</div>
{%- endif -%}
</div>
</div>
<div class="tab">
<div class="tabinner">
<button class="tablinks" onclick="openCity(event, '{{ section.settings.collection }}')" id="defaultOpen">{{ section.settings.collection.title }}</button>
<button class="tablinks" onclick="openCity(event, '{{ section.settings.collection1 }}')">{{ section.settings.collection1.title }}</button>
<button class="tablinks" onclick="openCity(event, '{{ section.settings.collection2 }}')">{{ section.settings.collection2.title }}</button>
</div>
</div>
<div id="{{ section.settings.collection }}" class="tabcontent" >
<div class="outerdic page-width">
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
<ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'card-product', show_vendor: section.settings.show_vendor %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons no-js-hidden">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
</div>
<div id="{{ section.settings.collection1 }}" class="tabcontent">
<div class="outerdic page-width">
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
<ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection1 == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
{%- for product in section.settings.collection1.products limit: section.settings.products_to_show -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'card-product', show_vendor: section.settings.show_vendor %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons no-js-hidden">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
</div>
<div id="{{ section.settings.collection2 }}" class="tabcontent">
<div class="outerdic page-width">
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
<ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection2 == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
{%- for product in section.settings.collection2.products limit: section.settings.products_to_show -%}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'card-product', show_vendor: section.settings.show_vendor %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons no-js-hidden">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("defaultOpen").click();
});
</script>
{% schema %}
{
"name": "PWC - Tab Collections",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "richtext",
"id": "description",
"label": "t:sections.featured-collection.settings.description.label"
},
{
"type": "checkbox",
"id": "show_description",
"label": "t:sections.featured-collection.settings.show_description.label",
"default": false
},
{
"type": "select",
"id": "description_style",
"label": "t:sections.featured-collection.settings.description_style.label",
"options": [
{
"value": "body",
"label": "t:sections.featured-collection.settings.description_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.featured-collection.settings.description_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.featured-collection.settings.description_style.options__3.label"
}
],
"default": "body"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "collection",
"id": "collection1",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "collection",
"id": "collection2",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.products_to_show.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.columns_desktop.label"
},
{
"type": "checkbox",
"id": "full_width",
"label": "t:sections.featured-collection.settings.full_width.label",
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection.settings.show_view_all.label"
},
{
"type": "select",
"id": "view_all_style",
"label": "t:sections.featured-collection.settings.view_all_style.label",
"options": [
{
"value": "link",
"label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
},
{
"value": "outline",
"label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
},
{
"value": "solid",
"label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
}
],
"default": "solid"
},
{
"type": "checkbox",
"id": "enable_desktop_slider",
"label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
"default": false
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "t:sections.featured-collection.settings.enable_quick_buy.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "PWC- Tab Collection"
}
]
}
{% endschema %}
Hello @Rahul_dhiman
It working fine. but can we add the option no. column in desktop as well.
Thanks for your time.
Best,
Sohan
Hello @Rahul_dhiman
It working fine. but can we add the option no. row in desktop as well.
Thanks for your time.
Best,
Sohan
Yes that can be done .
But can you send a screenshot of what you need or an example
Hi @Sohan2198 I am currently out and away from my workstation.
will return today and do the changes.
This is an accepted solution.
Hello @Sohan2198 ,
Sorry for late reply
Here is the updated code .
<style>
.tabs {
display: flex;
margin-bottom: 20px;
cursor: pointer;
width: 60%;
margin: 0 auto;
}
.tabs button {
flex: 1;
padding: 10px;
background: #f1f1f1;
border: none;
margin-right: 2px;
transition: background 0.3s;
}
.tabs button:hover, .tabs button.active {
background: #ddd;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
</style>
<div class="tabs">
{% for block in section.blocks %}
{% if block.settings.collection %}
<button class="tab-button" data-collection-id="collection-{{ block.id }}">{{ block.settings.collection.title }}</button>
{% endif %}
{% endfor %}
</div>
{% for block in section.blocks %}
{% if block.settings.collection %}
<div class="tab-content" id="collection-{{ block.id }}">
{% assign collection = block.settings.collection %}
<div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
<div class="loading-overlay gradient"></div>
<ul
id="product-grid"
data-id="{{ section.id }}"
class="
grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
grid--{{ section.settings.columns_desktop }}-col-desktop
"
>
{%- for product in collection.products limit: section.settings.products_per_page -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
<li
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- endfor -%}
</ul>
</div>
</div>
{% endif %}
{% endfor %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const collectionId = button.getAttribute('data-collection-id');
// Remove active class from all buttons and content
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to the clicked button and corresponding content
button.classList.add('active');
document.getElementById(collectionId).classList.add('active');
});
});
// Trigger click on the first tab button to show the first tab by default
if (tabButtons.length > 0) {
tabButtons[0].click();
}
});
</script>
{% schema %}
{
"name": "Collections Tabs Blocks",
"settings": [
{
"type": "range",
"id": "products_per_page",
"min": 8,
"max": 24,
"step": 4,
"default": 16,
"label": "Products per page"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "Columns on desktop"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"info": "Has cards info",
"default": "scheme-1"
},
{
"type": "header",
"content": "Image settings"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "Adapt"
},
{
"value": "portrait",
"label": "Portrait"
},
{
"value": "square",
"label": "Square"
}
],
"default": "adapt",
"label": "Image ratio"
},
{
"type": "select",
"id": "image_shape",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "arch",
"label": "Arch"
},
{
"value": "blob",
"label": "Blob"
},
{
"value": "chevronleft",
"label": "Chevron left"
},
{
"value": "chevronright",
"label": "Chevron right"
},
{
"value": "diamond",
"label": "Diamond"
},
{
"value": "parallelogram",
"label": "Parallelogram"
},
{
"value": "round",
"label": "Round"
}
],
"default": "default",
"label": "Image shape",
"info": "Image shape info"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "Show secondary image"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "Show rating",
"info": "Show rating info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "Enable quick add"
},
{
"type": "header",
"content": "Filtering settings"
},
{
"type": "checkbox",
"id": "enable_filtering",
"default": true,
"label": "Enable filtering",
"info": "Enable filtering info"
},
{
"type": "select",
"id": "filter_type",
"options": [
{
"value": "horizontal",
"label": "Horizontal"
},
{
"value": "vertical",
"label": "Vertical"
},
{
"value": "drawer",
"label": "Drawer"
}
],
"default": "horizontal",
"label": "Filter type",
"info": "Filter type info"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "Enable sorting"
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "Columns on mobile",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
]
},
{
"type": "header",
"content": "Padding settings"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Select Collection"
}
]
}
],
"presets": [
{
"name": "Collections Tabs Blocks",
"category": "Custom"
}
]
}
{% endschema %}
Thanks a lot @Rahul_dhiman,
Can please help to make,
description, shipping accordion like this on pdp
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024