Collection Tab Issues ( Dawn Theme )

[dreamtechzone_5]

Hello Everyone!

I have added collection tabs through coding. But I noticed some problems. Collection tabs are not showing well on mobile. (1) I want to show 2 or 3 collection tabs in mobile mode. But I want to show the rest of the collection tabs through the slider. (2) Also, I can see the font text of the collection tab and the website font text are different. I also want to fix the font text. (3) Want to keep space above and below products in desktop and mobile mode. Please help me. Thank you.

Store: https://delicious-fruits-vegetables.myshopify.com/

Password: Admin

(1) Now

(3) Space

(1) It will be something like this

I have used this 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 %}

[DaisyVo]

Hi @dreamtechzone_5 

Your issue can only be fixed in the theme's Liquid file and cannot be customized with CSS. You should contact the theme developer or third-party apps for the best support.

Best,

Daisy