Shopify themes, liquid, logos, and UX
Hi, I'm new to Shopify and coding and I want to create A collection tabs on my shopify store. Currently I'm using the craft theme and I would like to add a collection tab section[see the photo below for reference]. Can someone have the code for this and also I would appreciate if you would tell me how to do it. Thanks.
(from the Pipeline Theme) unfortunately this theme is paid and I don't have the means to buy it since I'm also just aiming for the collection tabs.
Solved! Go to the solution
This is an accepted solution.
Hi @qwertyuiioop , @wasimkhann
You can use code below to replace above
{% 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: 8 -%}
<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>
.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 %}
@wasimkhann-> Pls uncheck "use slider" to remove slider in the customize
@qwertyuiioop-> Please uncheck "show view all" to remove "view all" button in the customize
Hi @qwertyuiioop ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> Edit code
2. Add a new section with name is "tabs" and type is "liquid"
3. Add code below to file
{% 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.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: 8 -%}
<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>
</div>
{% endcapture %}
{% assign tabContent = tabContent | append: content %}
{% endfor %}
</ul>
{{ tabContent }}
</div>
</div>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
<style>
.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"
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"limit": 5,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Tabs",
"blocks": []
}
]
}
{% endschema %}
4. Go to Go to Store Online-> theme -> Customize
5. Add "tabs" section
Hi, Will this code work on Dawn Theme 10.0 ?
Hi, yes it will work on Dawn Theme 10.0 as well.
I have one more question about shopify
Can we add button in Tab to view all products ?
Hi can you help me the photos for each product is not appearing and can you also give me the code for the arrow here [see photo below]. Thank you very much!
This is an accepted solution.
Hi @qwertyuiioop , @wasimkhann
You can use code below to replace above
{% 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: 8 -%}
<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>
.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 %}
@wasimkhann-> Pls uncheck "use slider" to remove slider in the customize
@qwertyuiioop-> Please uncheck "show view all" to remove "view all" button in the customize
Can we use two products on mobile and four on desktop?
Hi @wasimkhann ,
You can refer the screenshot below to update.
It still shows four products on the mobile version...
Hi @wasimkhann ,
You can replace code below to suite that one.
{% 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 %}
Thank You, It's working.
Hi, how can I customize the slider button?? like make it large and adjust the position of it? Also How can I customize the font of the tabs? I already change the background color but I don't how to change the font.
Hi @qwertyuiioop ,
You need add little CSS code to do it.
do you know the css code for it?
You can refer the document here https://www.w3schools.com/css/default.asp
To adjust the postion, font size, font style, color, background ....
Hi @Ashif2 ,
Because this is a custom theme -> need check code to apply. This code only apply for basic theme( free theme) from Shopify.
Hello, thanks for your code it works fine. But i wanted to ask how to make tabs mobile responsive. If I'm having 3 tabs with long titles - they're being cut off on mobile version. how do i make it responsive?
DAWN 13 NOT WORK ?
Why is it when i add another one of this section it doesnt work?
I have bought California Theme from Shopify store. Will this code work on California theme?
Hi @nafraaj ,
I am not sure. Because this is not free theme. Maybe structure of theme will be different. You can try to add code above.
Maybe You only need to update snippets/card-product with card file of theme.
Hi, is it possible i only want add the link not the product?
Hi,
It's possible. However, you need to change some code.
Hi, Thank you so much. How to change it? Could you help me?
Hi,
Would you like the screenshot below?
Hi, When you click on 'all' in your screenshot, can jump to a specified link, which can be customized.
Hi @Cherry3427 ,
We can't click to show tab and redirect to new page. I updated that tab will be shown after hover on it and redicrect when we click on button. You can get code here https://github.com/eboost10/2640367/blob/main/2642389/sections/tabs.liquid
Thank you so much. But maybe something wrong. like this.
Hi,
Maybe it conflict jquery on your theme. I updated code to get the last version of jquery ui. You can get it here https://github.com/eboost10/2640367/blob/main/2642389/sections/tabs.liquid
Hello, I need it, on two columns, can you please help me
Hi,
Do you mean that you would like to show 2 columns instead 4 columns?
Can it be used for Crave or sense template?
Hi,
It's possible
Hi.This will work on Sense Theme? Thank you in advanced!
Hi,
Yes. It can work on Sense theme.
We want to show quick add to cart button ?
Please help
Hi,
You can refer the screenshot below to add it.
hi can you please add ( add to cart button ) like in picture below
Hi,
You ca refer the screenshot below
I did this but nothing happens
This is the code
{% 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.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: true,
section_id: section.id
%}
</li>
{%- endfor -%}
</ul>
</div>
{% endcapture %}
{% assign tabContent = tabContent | append: content %}
{% endfor %}
</ul>
{{ tabContent }}
</div>
</div>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
<style>
.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: #212E38;
padding: 5px 40px;
border-radius: 50px;
}
.tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
background: white;
}
</style>
{% endif %}
{% schema %}
{
"name": "Tabs",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"limit": 4,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Tabs",
"blocks": []
}
]
}
{% endschema %}
Hi @wahab55 ,
Code above for Dawn theme. You can use code below for trade theme.
{% if section.blocks.size > 0 %}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<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 contains-card contains-card--product grid--4-col-desktop grid--2-col-tablet-down">
{%- for product in block.settings.collection.products limit: 8 -%}
<li class="grid__item scroll-trigger animate--slide-in">
{% render 'card-product',
card_product: product,
media_aspect_ratio: 'portrait',
image_shape: 'default',
show_secondary_image: true,
show_vendor: false,
show_rating: false,
section_id: section.id,
quick_add: 'standard'
%}
</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>
.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 %}
Hey I tried this code but this is the error I am getting. How can I fix it?
Hi,
Could you share error? I will help to take a look.
I had the error
Liquid error (sections/Tabs line 20): Could not find asset snippets/card-product.liquid
I realized I needed to add a snippet code so did that but now I want to know how to edit the snippet code to achieve the look I want.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024