When managing an online store, particularly on Shopify, ensuring a clean and user-friendly homepage is crucial. A common issue many store owners face is the cluttered appearance of the homepage when too many featured collections are added. This not only makes the page lengthy but also detracts from the overall user experience.
To address this issue, we’re introducing a simple and effective solution: the Collection Tabs feature. This feature allows you to organize multiple collections into tabs on your homepage, making your store look neat and professional.
What Are Collection Tabs?
Collection Tabs are essentially a customizable section on your Shopify homepage where you can display multiple collections in a tabbed interface. Instead of listing all your collections one after the other, you can group them under different tabs. This way, visitors can easily navigate through your collections without overwhelming your homepage.
Key Benefits of Using Collection Tabs
- Improved User Experience: By organizing your collections into tabs, you reduce the clutter on your homepage, making it easier for visitors to find what they’re looking for.
- Customization Options: You can customize how each tab looks by choosing to display text, images, or a combination of both.
- Optimized Layout: This feature is particularly useful for stores using Shopify’s DAWN theme, as it adds functionality not available by default. You can significantly reduce the size of your homepage by displaying collections in a more compact and organized manner.
How to Implement Collection Tabs in Your Shopify Store
Implementing Collection Tabs is straightforward and can be done by following these steps:
Create a Section with any name and paste this code into file
<style>
#__grt_tag_slide_{{ section.id }}{margin-top:{{ section.settings.margin_top }}px; margin-bottom:{{ section.settings.margin_bottom }}px;}
.slider {display: flex; overflow-x: auto; scroll-snap-type: x mandatory;}
.slide {flex: 0 0 80%; scroll-snap-align: center; margin-right: 20px; text-decoration: none; padding: 5px 10px; border-radius: 26px; text-align: center; border: 1px solid black; color:black;}
.slide a {text-decoration: none; color: #333; font-weight: bold;}
._grt_tab_active{background:black !important; color:yellow !important;}
@media (min-width: 768px) {
.slider {overflow-x: visible;}
.slide {flex: 1; margin-right: 0; display: inline-block; width: 23%; margin: 1%;}
}
{% if section.settings.is_collection == false %}
.{{ section.settings.data_hide_class }}:not(.featured_visible){display:none !important}
{% endif %}
</style>
{% if section.blocks.size > 0 %}
<div class="slider {{ section.settings.tag_container_class }} page-width" id="__grt_tag_slide_{{ section.id }}">
{%- for block in section.blocks -%}
{%- assign b = block.settings -%}
{% case section.settings.normal_collection_type %}
{% when '_text' %}
<a
{% if section.settings.is_collection %}
href="{{ b.collection_link }}"
{% else %}
href="javascript:void(0)" data-toggleclass=".{{ section.settings.data_hide_class }}"
data-toggletarget=".{{ b.data_show_class }}"
{% if forloop.first %} data-nodeactive=".{{ b.data_show_class }}"{% endif %}
{% endif %}
class="slide __grt-slidertag {% if section.settings.is_collection %} {% endif %} {% if forloop.index0 == 0 %} _grt_tab_active {% endif %}"
>
{% if b.collection_name == blank %}
{{ b.collection_link.title -}}
{%- else -%}
{{- b.collection_name -}}
{%- endif %}
</a>
{% when '_image' %}
<a
style=" border:none;"
{% if section.settings.is_collection %}
href="collections/{{ b.collection_link }}"
{% else %}
href="javascript:void(0)" data-toggleclass=".{{ section.settings.data_hide_class }}"
data-toggletarget=".{{ b.data_show_class }}"
{% if forloop.first %} data-nodeactive=".{{ b.data_show_class }}"{% endif %}
{% endif %}
class="slide __grt-slidertag {% if section.settings.is_collection %} {% endif %} "
>
<img
style="box-shadow: 5px 10px 8px 2px #888888; border-radius:10px;"
width="200px"
src="{{ b.normal_collection_img | image_url}}"
>
</a>
{% when '_text_with_image' %}
<a
style="border:none; position:relative;"
{% if section.settings.is_collection %}
href="collections/{{ b.collection_link }}"
{% else %}
href="javascript:void(0)"
data-toggleclass=".{{ section.settings.data_hide_class }}"
data-toggletarget=".{{ b.data_show_class }}"
{% if forloop.first %} data-nodeactive=".{{ b.data_show_class }}"{% endif %}
{% endif %}
class="slide __grt-slidertag {% if section.settings.is_collection %} {% endif %}">
<div style="position:relative;">
<img
style="box-shadow: 5px 10px 8px 2px #888888; border-radius:10px; width:200px; display: block;"
src="{{ b.normal_collection_img | image_url}}"
>
<!-- Overlay div -->
<div style="position: absolute; top: 0; left: 0; width: 86%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); border-radius:10px;
display: flex; align-items: center; justify-content: center;">
<h2 style="color: white; font-size: 18px; font-weight: bold; margin: 0;">
{% if b.collection_name == blank %}
{{ b.collection_link.title -}}
{%- else -%}
{{- b.collection_name -}}
{%- endif %}
</h2>
</div>
</div>
</a>
{% endcase %}
{% endfor %}
</div>
{% endif %}
{% if section.settings.is_collection == false %}
<script>
$(function() {
var _tnode = $(".__grt-slidertag[data-nodeactive]").attr("data-nodeactive");
$(_tnode).addClass("featured_visible");
$(document).on("click", '[data-toggleclass]', function() {
var _tclass = $(this).attr("data-toggleclass");
var _ttarget = $(this).attr("data-toggletarget");
$(_tclass).removeClass("featured_visible");
$(_ttarget).addClass("featured_visible");
$(".slide.__grt-slidertag").removeClass("_grt_tab_active");
$(this).addClass("_grt_tab_active");
});
});
</script>
{% endif %}
{% schema %}
{
"name": "GRT Tag slider",
"settings": [
{
"type": "checkbox",
"id": "is_collection",
"default": false,
"label":"Normal collection",
"info": "True will set the behavior as normal tag collection, False will change behavior as tab navigation"
},
{
"type": "select",
"id": "normal_collection_type",
"label": "Normal Collection Type",
"options": [
{
"label": "Only Text",
"value": "_text"
},
{
"label": "Only Image",
"value": "_image"
},{
"label": "Image With Text",
"value": "_text_with_image"
}
]
},
{
"type": "text",
"id": "tag_container_class",
"label": "Enter class name or container",
"default": "__grt-container-list-wrapper",
"info": "Container class can be use to override the existing design"
},
{
"type": "checkbox",
"id": "is_slider",
"default": false,
"label": "Enable slider"
},
{
"type": "text",
"id": "data_hide_class",
"label": "Target class to hide should be common in related sections",
"info": "Enter class name script will hide these element on load and click action, this should be same as featured section"
},
{
"type": "range",
"id": "margin_top",
"label": "Top margin",
"min": 0,
"max": 100,
"step": 1,
"default": 24
},
{
"type": "range",
"id": "margin_bottom",
"label": "Bottom margin",
"min": 0,
"max": 100,
"step": 1,
"default": 24
}
],
"blocks": [
{
"type": "tagslider",
"name": "Choose collection",
"settings": [
{
"type": "collection",
"id": "collection_link",
"label": "Select Collection",
},
{
"type": "image_picker",
"id": "normal_collection_img",
"label": "Normal Collection Image",
},
{
"type": "text",
"id": "collection_name",
"label": "Collection Name",
},
{
"type": "text",
"id": "data_show_class",
"label": "Target class to show",
"info": "Enter class name which will be used to show the section, this should be same as featured section"
}
]
}
],
"presets": [
{
"name": "GRT Tag slider",
"blocks": [
{
"type": "tagslider"
}
]
}
]
}
{% endschema %}Open Feature Collection Section featured-collection.liquid And add Add a Schema Setting And Add This Setting Value On Parent div of feature collection
{
"type": "text",
"id": "featued_section_class",
"default": "__grt_section_class",
"label": "Section class"
},
{{ section.settings.featued_section_class }}
Why to use collection Tabs
By using the Collection Tabs feature, you can streamline your Shopify store's homepage, improve navigation, and create a more enjoyable shopping experience for your customers. This method is especially beneficial for stores with a large number of collections, as it helps in maintaining a clean and organized layout.
Stay tuned for more tutorials and happy selling!
Need help in Installation | Hire us
Rs. 1,200.00