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
.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; }{% for block in section.blocks %}
{% if 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 -%}
{% 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 %}