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. 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. Please help me. Thank you.

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

Password: Admin

Now

It will be something like this

[topnewyork]

Hi @dreamtechzone_5

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[dreamtechzone_5]

It doesn’t look good. Don’t want to add a scroll bar.

Can it be kept like this?

[topnewyork]

@dreamtechzone_5

How did you create this section? Can you share a screenshot of the customization?

[dreamtechzone_5]

Here is the full code of the Collection tab. Also, is it possible to add a View More button below each collection?

.tabs { display: flex; margin-bottom: 20px; cursor: pointer; width: 60%; margin: 0 auto; } .tabs button { flex: 1; padding: 10px; background: #936E00; color: white; border: none; margin-right: 2px; transition: background 0.3s; } .tabs button:hover, .tabs button.active { background: #000; color: white; } .tab-content { display: none; } .tab-content.active { display: block; }

{% for block in section.blocks %} {% if block.settings.collection %} {{ block.settings.collection.title }} {% endif %} {% endfor %}

{% for block in section.blocks %}
{% if block.settings.collection %}

{% assign collection = block.settings.collection %}

{%- for product in collection.products limit: section.settings.products_per_page -%} {% assign lazy_load = false %} {%- if forloop.index > 2 -%} {%- assign lazy_load = true -%} {%- 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 %}
{%- endfor -%}

{% endif %} {% endfor %}

{% 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 %}

[topnewyork]

@dreamtechzone_5

I don’t need your code, I want to see a screenshot of how you are doing the customization this section in Shopify.

[dreamtechzone_5]

[topnewyork]

@dreamtechzone_5

Try doing it with 1 instead of 2

[dreamtechzone_5]

Actually, I want the collection tab to look nicer in mobile mode. It looks great in desktop mode but not good in mobile mode.

3 tab menus on the top line and the rest of the menus below can be kept beautifully in mobile mode? And it would look nice if the tab menus below started from the center ( Align ).

Desktop Mode looks Good

Mobile Mode Not Good

[dreamtechzone_5]

3 or 4 tab menus will be on the first line. Can this be done in mobile mode?