Hi Team,
I want to add my collection tabs on my homepage like below on my dawn theme:
I have seen couple of solutions and those are now not working good and giving some bugs maybe as those were old and now the new versions might not be supporting the code changes etc.
Please help me if there is any working solution available?
Thanks.
Fetched: Adding collection tabs and products view associated with it
The cleanest way to do this on Dawn without breaking on updates is to build it as a custom section. Dawn does not have a tabbed collections section natively so any snippet based workaround you find online is likely tied to an older Dawn version which is probably why you are running into bugs.
The proper approach is a new section file that loops through multiple collections you define in the schema, renders product cards per tab, and uses vanilla JS to handle the tab switching. This way it lives completely separate from Dawn’s core files and survives theme updates.
What version of Dawn are you on? If you can also share roughly how many collections you want in the tabs that would help narrow down the right approach.
Hi @swarique,
Goto theme > edit code > section folder > make a file name custom-collection-tabs.liquid>paste the code
<div class="collection-tabs-container page-width" style="margin-top: 40px; margin-bottom: 40px;">
<h2 class="title inline-richtext h1 center">{{ section.settings.heading }}</h2>
<div class="tabs-header center" style="display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap;">
{% for block in section.blocks %}
<button class="tab-link-custom {% if forloop.first %}active{% endif %}" data-tab="tab-{{ block.id }}-{{ section.id }}">
{{ block.settings.collection.title | default: "Collection " | append: forloop.index }}
</button>
{% endfor %}
</div>
<div class="tabs-content">
{% for block in section.blocks %}
<div id="tab-{{ block.id }}-{{ section.id }}" class="tab-panel-custom" style="{% if forloop.first %}display: block;{% else %}display: none;{% endif %}">
<ul class="grid grid--2-col-tablet-down grid--4-col-desktop">
{%- if block.settings.collection != blank -%}
{%- for product in block.settings.collection.products limit: 4 -%}
<li class="grid__item">
{% render 'card-product',
card_product: product,
media_aspect_ratio: 'portrait',
show_secondary_image: true
%}
</li>
{%- endfor -%}
{%- else -%}
<p class="center">Please select a collection in the customizer.</p>
{%- endif -%}
</ul>
</div>
{% endfor %}
</div>
</div>
<style>
.tab-link-custom {
padding: 12px 24px;
border: 1px solid #e5e5e5;
background: #fff;
cursor: pointer;
text-transform: uppercase;
font-size: 1.3rem;
letter-spacing: 0.1rem;
transition: all 0.3s ease;
}
.tab-link-custom.active {
background: #000;
color: #fff;
border-color: #000;
}
.tab-panel-custom {
animation: fadeInTabs 0.5s ease;
}
@keyframes fadeInTabs {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
{% schema %}
{
"name": "Custom Collection Tabs",
"settings": [
{ "type": "text", "id": "heading", "label": "Section Heading", "default": "PALMONAS TOP STYLES" }
],
"blocks": [
{
"type": "collection",
"name": "Collection Tab",
"limit": 8,
"settings": [
{ "type": "collection", "id": "collection", "label": "Select Collection" }
]
}
],
"presets": [
{ "name": "Custom Collection Tabs" }
]
}
{% endschema %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.tab-link-custom');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const parent = this.closest('.collection-tabs-container');
const targetId = this.getAttribute('data-tab');
parent.querySelectorAll('.tab-link-custom').forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
parent.querySelectorAll('.tab-panel-custom').forEach(panel => panel.style.display = 'none');
document.getElementById(targetId).style.display = 'block';
});
});
});
</script>
Goto base..css>paste the code
.header {
display: flex !important;
flex-direction: row !important;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap !important;
gap: 1rem;
}
.header__heading {
flex-shrink: 0;
}
.header__inline-menu {
flex-grow: 1;
}
.list-menu--inline {
display: flex !important;
flex-direction: row !important;
}
.header__search-container {
flex-basis: 350px;
min-width: 250px;
}
.header__icons {
flex-shrink: 0;
display: flex;
gap: 1rem;
}
.header--middle-left {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
column-gap: 2rem !important;
}
.header__inline-menu .list-menu--inline {
display: flex !important;
flex-wrap: nowrap !important;
column-gap: 1.5rem !important;
}
.header {
column-gap: 1rem !important;
padding-left: 2rem !important;
padding-right: 2rem !important;
}
.header__search-container {
max-width: 350px !important;
flex: 0 1 350px !important;
}
Hi @swarique, I’m Sajini from Identixweb, a Shopify development company.
I understand you’re looking to add collection tabs to your homepage with the Dawn theme. Since the solutions you tried earlier are causing issues, it’s likely due to compatibility with the latest theme version.
Here’s what I recommend:
Custom Code Implementation: You can manually add collection tabs by customizing the Liquid code in your theme. You’ll need to edit the collection-template.liquid or index.liquid file to include your custom tab navigation and then link it to the corresponding collections. Make sure to adjust your CSS to style the tabs as you want them.
Utilize Theme Sections: The Dawn theme allows the use of customizable sections on the homepage. You could use the Custom Liquid section to add HTML and create tabbed navigation. This option requires basic knowledge of HTML and Liquid templating.
Check Theme Updates: Ensure that your theme is fully updated and that there are no conflicts with previous customizations. Sometimes, outdated code can cause bugs when newer versions of themes are released.
If you’re not comfortable with coding, it might be best to reach out to a Shopify expert or developer to implement this customization properly.
Hope this helps! Let me know if you need any more guidance.
Hi Thanks for the reply. I am using Dawn 15.4.1 and planning to have 6 - 7 Tabs. Your step by step guide to me will be highly appreciated as I am navie to changing the codes etc.
Hi @swarique
The code suggested by @topnewyork is correct. We checked that the images are displaying correctly and also products are clickable.
Just copy/paste the code below and replace the whole code of this section: custom-collection-tabs.liquid
{{ '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 }}
{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- unless section.settings.quick_add == 'none' -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}
{%- if section.settings.quick_add == 'standard' -%}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if section.settings.quick_add == 'bulk' -%}
<script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- 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;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="collection-tabs-container page-width color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding" style="margin-top: 40px; margin-bottom: 40px;">
<h2 class="title inline-richtext h1 center">{{ section.settings.heading }}</h2>
<div class="tabs-header center" style="display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap;">
{% for block in section.blocks %}
<button class="tab-link-custom {% if forloop.first %}active{% endif %}" data-tab="tab-{{ block.id }}-{{ section.id }}">
{{ block.settings.collection.title | default: "Collection " | append: forloop.index }}
</button>
{% endfor %}
</div>
<div class="tabs-content">
{% for block in section.blocks %}
<div id="tab-{{ block.id }}-{{ section.id }}" class="tab-panel-custom" style="{% if forloop.first %}display: block;{% else %}display: none;{% endif %}">
<ul class="grid grid--2-col-tablet-down grid--4-col-desktop">
{%- if block.settings.collection != blank -%}
{%- for product in block.settings.collection.products limit: 4 -%}
<li class="grid__item">
{% 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,
section_id: section.id,
quick_add: section.settings.quick_add
%}
</li>
{%- endfor -%}
{%- else -%}
<p class="center">Please select a collection in the customizer.</p>
{%- endif -%}
</ul>
</div>
{% endfor %}
</div>
</div>
<style>
.tab-link-custom {
padding: 12px 24px;
border: 1px solid #e5e5e5;
background: #fff;
cursor: pointer;
text-transform: uppercase;
font-size: 1.3rem;
letter-spacing: 0.1rem;
transition: all 0.3s ease;
}
.tab-link-custom.active {
background: #000;
color: #fff;
border-color: #000;
}
.tab-panel-custom {
animation: fadeInTabs 0.5s ease;
}
@keyframes fadeInTabs {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
{% schema %}
{
"name": "Custom Collection Tabs",
"settings": [
{ "type": "text", "id": "heading", "label": "Section Heading", "default": "PALMONAS TOP STYLES" },
{
"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": "select",
"id": "image_shape",
"options": [
{
"value": "default",
"label": "t:sections.all.image_shape.options__1.label"
},
{
"value": "arch",
"label": "t:sections.all.image_shape.options__2.label"
},
{
"value": "blob",
"label": "t:sections.all.image_shape.options__3.label"
},
{
"value": "chevronleft",
"label": "t:sections.all.image_shape.options__4.label"
},
{
"value": "chevronright",
"label": "t:sections.all.image_shape.options__5.label"
},
{
"value": "diamond",
"label": "t:sections.all.image_shape.options__6.label"
},
{
"value": "parallelogram",
"label": "t:sections.all.image_shape.options__7.label"
},
{
"value": "round",
"label": "t:sections.all.image_shape.options__8.label"
}
],
"default": "default",
"label": "t:sections.all.image_shape.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": "select",
"id": "quick_add",
"default": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.label",
"options": [
{
"value": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
},
{
"value": "standard",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
},
{
"value": "bulk",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
}
]
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"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
}
],
"blocks": [
{
"type": "collection",
"name": "Collection Tab",
"limit": 8,
"settings": [
{ "type": "collection", "id": "collection", "label": "Select Collection" }
]
}
],
"presets": [
{ "name": "Custom Collection Tabs" }
]
}
{% endschema %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.tab-link-custom');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const parent = this.closest('.collection-tabs-container');
const targetId = this.getAttribute('data-tab');
parent.querySelectorAll('.tab-link-custom').forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
parent.querySelectorAll('.tab-panel-custom').forEach(panel => panel.style.display = 'none');
document.getElementById(targetId).style.display = 'block';
});
});
});
</script>
With above code you can enable add to cart button, add padding , change color scheme and all the other settings which are there in Dawn theme.
See screenshot:
To change button style like making rounded or square: you can change from customize see screenshot:
Hope this help
Thanks
Hi Thank you for this updated code. I can now see the images. However, I am finding below issue
okay @swarique
Please allow some time; I will post the full code here covering all your requirements.
Pls clarify point 4: the Add to Cart button appears below the product by default. Please refer to the screenshot below
Thanks
Hi @swarique
copy/paste the code below and replace the whole code of this section: custom-collection-tabs.liquid
All your points are covered
Tab label is taking the name of Collection. There is no option to change the name
I’ve created a field where you can add a custom name. If no name is added, the collection name will be displayed by default.
Tab color is not getting changed Its Black & White only. There is no option to set the color
I’ve created a field that lets you change the background and text color of the tab button, both in its normal and active states.
Can there be View All button after defining how many products should be visible?
I’ve added the code for this—now the “View All” button will be visible. When collection have more than 4 products.
Can there be Add to Cart below products?I
It’s already there—just enable it from the Customize settings.
The setting change is changing the other CTA’s and not the Tabs above. Apologies if I may have caused confusion earlier
Created separate settings for the tab buttons.
{{ '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 }}
{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- unless section.settings.quick_add == 'none' -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}
{%- if section.settings.quick_add == 'standard' -%}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if section.settings.quick_add == 'bulk' -%}
<script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- 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;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.tab-link-custom {
padding: 12px 24px;
border: 1px solid #e5e5e5;
background: {{ section.settings.tab_btn_bg_color }};
color: {{ section.settings.tab_btn_color }};
cursor: pointer;
text-transform: uppercase;
font-size: 1.3rem;
letter-spacing: 0.1rem;
transition: all 0.3s ease;
}
.tab-link-custom.active {
background: {{ section.settings.tab_btn_bg_color_hover }};
color: {{ section.settings.tab_btn_color_hover }};
border-color: #000;
}
.tab-panel-custom {
animation: fadeInTabs 0.5s ease;
}
@keyframes fadeInTabs {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* .view-all-btn {
display: none;
}
.view-all-btn.active {
display: inline-flex;
} */
.button-row.center {
margin-top: 4rem;
}
{%- endstyle -%}
<div class="collection-tabs-container page-width color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding" style="margin-top: 40px; margin-bottom: 40px;">
<h2 class="title inline-richtext h1 center">{{ section.settings.heading }}</h2>
<div class="tabs-header center" style="display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap;">
{% for block in section.blocks %}
<button class="tab-link-custom {% if forloop.first %}active{% endif %}" data-tab="tab-{{ block.id }}-{{ section.id }}">
{% if block.settings.title != blank %}
{{ block.settings.title }}
{% else %}
{{ block.settings.collection.title | default: "Collection " | append: forloop.index }}
{% endif %}
</button>
{% endfor %}
</div>
<div class="tabs-content">
{% for block in section.blocks %}
<div id="tab-{{ block.id }}-{{ section.id }}" class="tab-panel-custom" style="{% if forloop.first %}display: block;{% else %}display: none;{% endif %}">
<ul class="grid grid--2-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop">
{%- if block.settings.collection != blank -%}
{%- for product in block.settings.collection.products limit: section.settings.columns_desktop -%}
<li class="grid__item">
{% 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,
section_id: section.id,
quick_add: section.settings.quick_add
%}
</li>
{%- endfor -%}
{%- else -%}
<p class="center">Please select a collection in the customizer.</p>
{%- endif -%}
</ul>
{% if block.settings.collection != blank and block.settings.collection.all_products_count > section.settings.columns_desktop %}
<div class="button-row center">
<a href="{{ block.settings.collection.url }}" class="button view-all-btn" data-view="tab-{{ block.id }}-{{ section.id }}">
View All
</a>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.tab-link-custom');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const parent = this.closest('.collection-tabs-container');
const targetId = this.getAttribute('data-tab');
parent.querySelectorAll('.tab-link-custom').forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
parent.querySelectorAll('.tab-panel-custom').forEach(panel => panel.style.display = 'none');
document.getElementById(targetId).style.display = 'block';
});
});
});
</script>
{% schema %}
{
"name": "Custom Collection Tabs",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Section Heading",
"default": "PALMONAS TOP STYLES"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_collection.content"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 4,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.columns_desktop.label"
},
{
"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": "select",
"id": "image_shape",
"options": [
{
"value": "default",
"label": "t:sections.all.image_shape.options__1.label"
},
{
"value": "arch",
"label": "t:sections.all.image_shape.options__2.label"
},
{
"value": "blob",
"label": "t:sections.all.image_shape.options__3.label"
},
{
"value": "chevronleft",
"label": "t:sections.all.image_shape.options__4.label"
},
{
"value": "chevronright",
"label": "t:sections.all.image_shape.options__5.label"
},
{
"value": "diamond",
"label": "t:sections.all.image_shape.options__6.label"
},
{
"value": "parallelogram",
"label": "t:sections.all.image_shape.options__7.label"
},
{
"value": "round",
"label": "t:sections.all.image_shape.options__8.label"
}
],
"default": "default",
"label": "t:sections.all.image_shape.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": "select",
"id": "quick_add",
"default": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.label",
"options": [
{
"value": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
},
{
"value": "standard",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
},
{
"value": "bulk",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
}
]
},
{
"type": "header",
"content": "Set background and text color for tab button"
},
{
"type": "color",
"id": "tab_btn_bg_color",
"label": "Button Background Color"
},
{
"type": "color",
"id": "tab_btn_color",
"label": "Button Text Color"
},
{
"type": "color",
"id": "tab_btn_bg_color_hover",
"label": "Button Background Color (Active)"
},
{
"type": "color",
"id": "tab_btn_color_hover",
"label": "Button Text Color (Active)"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"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
}
],
"blocks": [
{
"type": "collection",
"name": "Collection Tab",
"limit": 8,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Select Collection"
},
{
"type": "text",
"id": "title",
"label": "Title"
}
]
}
],
"presets": [
{
"name": "Custom Collection Tabs"
}
]
}
{% endschema %}
Thanks
Hey, Thanks a lot. It is really nice now. Only one thing, Can an option be added for the button border color and also to place the heading on left/ right?
Also, In mobile view can option be given for stacked/ carousel?
Sorry, I know I must be too demanding and bothering you. Apologies if that will be inconvenient.
Appreciate your so much help.
Hi @swarique
copy/paste the code below and replace the whole code of this section: custom-collection-tabs.liquid
All your pointers are covered.
{{ '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 }}
{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- unless section.settings.quick_add == 'none' -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}
{%- if section.settings.quick_add == 'standard' -%}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if section.settings.quick_add == 'bulk' -%}
<script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- 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;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.tab-link-custom {
padding: 12px 24px;
border: 1px solid {{ section.settings.button_border_color }};
background: {{ section.settings.tab_btn_bg_color }};
color: {{ section.settings.tab_btn_color }};
cursor: pointer;
text-transform: uppercase;
font-size: 1.3rem;
letter-spacing: 0.1rem;
transition: all 0.3s ease;
}
.tab-link-custom.active {
background: {{ section.settings.tab_btn_bg_color_hover }};
color: {{ section.settings.tab_btn_color_hover }};
border-color: #000;
}
.tab-panel-custom {
animation: fadeInTabs 0.5s ease;
}
@keyframes fadeInTabs {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.button-row.center {
margin-top: 4rem;
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.collection-tabs-container.page-width.mobile-layout-carousel {
padding: 0;
}
}
@media screen and (max-width: 749px) {
.mobile-layout-stacked .tabs-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-layout-stacked .tab-link-custom {
width: 100%;
}
.mobile-layout-flex .tabs-header {
justify-content: flex-start !important;
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: 10px;
padding-bottom: 5px;
}
.mobile-layout-flex .tab-link-custom {
flex: 0 0 auto;
white-space: nowrap;
scroll-snap-align: start;
}
.mobile-layout-flex .tabs-header::-webkit-scrollbar {
display: none;
}
.collection-tabs-container.page-width.mobile-layout-carousel {
padding-right: 0;
}
.mobile-layout-carousel .tabs-content ul {
margin-left: -1.5rem !important;
width: auto !important;
}
.mobile-layout-stacked .tabs-header.center {
margin-right: -1.5rem;
}
}
{%- endstyle -%}
<div class="collection-tabs-container page-width color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding mobile-layout-flex mobile-layout-{{ section.settings.mobile_layout }}" style="margin-top: 40px; margin-bottom: 40px;">
<h2 class="title inline-richtext h1 center" style="text-align: {{ section.settings.heading_alignment }};">
{{ section.settings.heading }}
</h2>
<div class="tabs-header center" style="display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap;">
{% for block in section.blocks %}
<div class="tabs-wrapper">
<button
class="tab-link-custom {% if forloop.first %}active{% endif %}"
data-tab="tab-{{ block.id }}-{{ section.id }}"
>
{% if block.settings.title != blank %}
{{ block.settings.title }}
{% else %}
{{ block.settings.collection.title | default: 'Collection ' }}
{% endif %}
</button>
</div>
{% endfor %}
</div>
<div class="tabs-content">
{% for block in section.blocks %}
<div
id="tab-{{ block.id }}-{{ section.id }}"
class="tab-panel-custom"
style="{% if forloop.first %}display: block;{% else %}display: none;{% endif %}"
>
{% if section.settings.mobile_layout == 'carousel' %}
<slider-component class="slider-mobile-gutter">
{% endif %}
<ul
id="Slider-{{ block.id }}-{{ section.id }}"
class="grid product-grid contains-card contains-card--product grid--2-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop {% if section.settings.mobile_layout == 'carousel' %}slider slider--tablet grid--peek{% endif %}"
role="list"
aria-label="{{ 'general.slider.name' | t }}"
>
{%- if block.settings.collection != blank -%}
{%- for product in block.settings.collection.products limit: section.settings.columns_desktop -%}
<li class="grid__item {% if section.settings.mobile_layout == 'carousel' %}slider__slide{% 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,
section_id: section.id,
quick_add: section.settings.quick_add
%}
</li>
{%- endfor -%}
{%- else -%}
<p class="center">Please select a collection in the customizer.</p>
{%- endif -%}
</ul>
{% if section.settings.mobile_layout == 'carousel' %}
</slider-component>
{% endif %}
{% if block.settings.collection != blank and block.settings.collection.all_products_count > section.settings.columns_desktop %}
<div class="button-row center">
<a
href="{{ block.settings.collection.url }}"
class="button view-all-btn"
data-view="tab-{{ block.id }}-{{ section.id }}"
>
View All
</a>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.tab-link-custom');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const parent = this.closest('.collection-tabs-container');
const targetId = this.getAttribute('data-tab');
parent.querySelectorAll('.tab-link-custom').forEach(btn => {
btn.classList.remove('active');
});
this.classList.add('active');
parent.querySelectorAll('.tab-panel-custom').forEach(panel => {
panel.style.display = 'none';
});
document.getElementById(targetId).style.display = 'block';
});
});
});
</script>
{% schema %}
{
"name": "Custom Collection Tabs",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Section Heading",
"default": "PALMONAS TOP STYLES"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_collection.content"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 4,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.columns_desktop.label"
},
{
"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": "select",
"id": "image_shape",
"options": [
{
"value": "default",
"label": "t:sections.all.image_shape.options__1.label"
},
{
"value": "arch",
"label": "t:sections.all.image_shape.options__2.label"
},
{
"value": "blob",
"label": "t:sections.all.image_shape.options__3.label"
},
{
"value": "chevronleft",
"label": "t:sections.all.image_shape.options__4.label"
},
{
"value": "chevronright",
"label": "t:sections.all.image_shape.options__5.label"
},
{
"value": "diamond",
"label": "t:sections.all.image_shape.options__6.label"
},
{
"value": "parallelogram",
"label": "t:sections.all.image_shape.options__7.label"
},
{
"value": "round",
"label": "t:sections.all.image_shape.options__8.label"
}
],
"default": "default",
"label": "t:sections.all.image_shape.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": "select",
"id": "quick_add",
"default": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.label",
"options": [
{
"value": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
},
{
"value": "standard",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
},
{
"value": "bulk",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
}
]
},
{
"type": "header",
"content": "Set background and text color for tab button"
},
{
"type": "color",
"id": "tab_btn_bg_color",
"label": "Button Background Color"
},
{
"type": "color",
"id": "tab_btn_color",
"label": "Button Text Color"
},
{
"type": "color",
"id": "tab_btn_bg_color_hover",
"label": "Button Background Color (Active)"
},
{
"type": "color",
"id": "tab_btn_color_hover",
"label": "Button Text Color (Active)"
},
{
"type": "color",
"id": "button_border_color",
"label": "Button Border Color",
"default": "#000000"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"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
},
{
"type": "select",
"id": "mobile_layout",
"label": "Mobile Layout",
"options": [
{
"value": "stacked",
"label": "Stacked"
},
{
"value": "carousel",
"label": "Carousel"
}
],
"default": "stacked"
}
],
"blocks": [
{
"type": "collection",
"name": "Collection Tab",
"limit": 8,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Select Collection"
},
{
"type": "text",
"id": "title",
"label": "Title"
}
]
}
],
"presets": [
{
"name": "Custom Collection Tabs"
}
]
}
{% endschema %}
Thanks
Hey Buddy! Thanks and heartfelt gratitude for so much great support. Words are not enough to express my appreciation the way you have helped me to figure this thing out when I have almost given up.
Wish you a great day. We will keep on meeting on other posts
Thanks Again 
Hi, This is working well for me and really appreciate your efforts for it. However, the few pieces I am missing are
Is there a way that this can be added?
Thanks