COMPLETETLY FREE CODE TO ADD A COLLECTION TABS WITH PRODUCT SLIDER SECTION IN SHOPIFY
To add a new section , Go to Themes then select three dots that highlighted in below screensot and then select Edit Code
Now click on Add a new section and type a name for new section. For example: tabs-collection.liquid
Now open this newly created file and paste below code and save it
{% if section.blocks.size > 0 %}
<div class="tabs-section page-width">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
{% if section.settings.useslider %}
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
{% endif %}
{% if section.settings.title != blank %}
<h2 class="h1">{{ section.settings.title }}</h2>
{% endif %}
<div id="tabs" class="tabs">
{% assign tabContent = '' %}
<ul>
{% for block in section.blocks %}
{% assign collection = collections[block.settings.collection] %}
<li><a href="#tabs-{{ collection.id }}">{{ collection.title }}</a></li>
{% capture content %}
<div id="tabs-{{ collection.id }}">
<ul class="grid product-grid grid--2-col-tablet-down grid--4-col-desktop">
{%- for product in block.settings.collection.products limit: 4 -%}
<li class="grid__item scroll-trigger animate--slide-in">
{% 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,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- endfor -%}
</ul>
{% if block.settings.viewall %}
<div class="center collection__view-all scroll-trigger animate--slide-in">
<a class="button" href="{{ block.settings.collection.url }}"> View all </a>
</div>
{% endif %}
</div>
{% endcapture %}
{% assign tabContent = tabContent | append: content %}
{% endfor %}
</ul>
{{ tabContent }}
</div>
</div>
<script>
$( function() {
{% if section.settings.useslider %}
function tabSlider(){
$('.tabs .product-grid.slick-initialized ').slick('unslick');
$('.tabs .product-grid ').slick({
dots: false,
arrows: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
{% endif %}
$( "#tabs" ).tabs({
create: function( event, ui ) {
{% if section.settings.useslider %}
tabSlider()
{% endif %}
},
activate: function( event, ui ) {
{% if section.settings.useslider %}
tabSlider()
{% endif %}
}
});
} );
</script>
<style>
@media(max-width: 749px){
.tabs .product-grid > li:nth-child(3),
.tabs .product-grid > li:nth-child(4){
display: none;
}
}
.tabs .slick-track .grid__item {
padding: 0 5px;
}
.tabs .slick-next {
right: 0;
}
.tabs .slick-prev {
left: 0;
}
.tabs .slick-next,.tabs .slick-prev {
transform: none;
top: -20px;
}
.tabs .slick-next::before,.tabs .slick-prev::before { color: #000;}
.tabs .slick-slider{ margin: 0 -5px;}
.tabs .collection__view-all a{ color: white!important;}
.tabs { background: none!important;border: none!important}
.tabs.ui-tabs .ui-tabs-nav {
background: none;
padding: 0;
display: flex;
justify-content: center;
border: none;
}
.tabs-section h2 {
text-align: center;
}
.tabs.ui-tabs .ui-tabs-nav li {
border: none;
background: none;
}
.tabs.ui-tabs .ui-tabs-nav li a{
color: #ddd;
padding: 5px 40px;
border-radius: 50px;
}
.tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
background: grey;
}
</style>
{% endif %}
{% schema %}
{
"name": "Tabs",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "checkbox",
"id": "useslider",
"label": "Use slider",
"default": true
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"limit": 5,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "checkbox",
"id": "viewall",
"label": "Show view all",
"default": true
}
]
}
],
"presets": [
{
"name": "Tabs",
"blocks": []
}
]
}
{% endschema %}
Now after saving open front theme customizer and click on add section and you can see a new section Tabs
Now you can click on it to add it and then you can click on Add Tab and then can select collection.
You can control both slider and view all button, if you dont want view all button or slider , you can disable it
So now when you save it and check in frontend you can see a beautiful collection tabs with products and slider options.
Related terms
How to create a custom section in Shopify Theme
How to create a product slider with collection tabs section in shopify
Thanks
Comments
Post a Comment