Create A Collection Tabs For My Shopify Page

[qwertyuiioop]

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.

[EBOOST]

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

[wasimkhann]

Hi, Will this code work on Dawn Theme 10.0 ?

[EBOOST]

Hi, yes it will work on Dawn Theme 10.0 as well.

[wasimkhann]

I have one more question about shopify

[wasimkhann]

Can we add button in Tab to view all products ?

[qwertyuiioop]

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!

[EBOOST · 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

[qwertyuiioop]

@EBOOST it works! Thank you!

[wasimkhann]

Can we use two products on mobile and four on desktop?

[EBOOST]

Hi @wasimkhann ,

You can refer the screenshot below to update.

[wasimkhann]

It still shows four products on the mobile version...

[EBOOST]

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

[wasimkhann]

Thank You, It's working.

[qwertyuiioop]

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.

[EBOOST]

Hi @qwertyuiioop ,

You need add little CSS code to do it.

[qwertyuiioop]

do you know the css code for it?

[EBOOST]

You can refer the document here https://www.w3schools.com/css/default.asp

To adjust the postion, font size, font style, color, background ....

[Ashif2]

1. images not showing on beyours theme,,,

[EBOOST]

Hi @Ashif2 ,

Because this is a custom theme -> need check code to apply. This code only apply for basic theme( free theme) from Shopify.

[Smokeking]

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? 

[maestroparfum]

DAWN 13 NOT WORK ?

[tvphmic]

Im still on DAWN 12. It works but when I add another one of that section it
doesnt work

[AryavK]

@EBOOST , can you pls tell how to make the product images in potrait

thanks

[tvphmic]

Why is it when i add another one of this section it doesnt work?

[nafraaj]

I have bought California Theme from Shopify store. Will this code work on California theme?

[EBOOST]

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.

[Cherry3427]

Hi, is it possible i only want add the link not the product?

[EBOOST]

Hi, 

It's possible. However, you need to change some code.

[Cherry3427]

Hi, Thank you so much. How to change it? Could you help me?

[EBOOST]

Hi, 

Would you like the screenshot below?

[Cherry3427]

Hi, When you click on 'all' in your screenshot, can jump to a specified link, which can be customized.

[EBOOST]

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

[Cherry3427]

Thank you so much. But maybe something wrong. like this.

 

[EBOOST]

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

[Hasan112]

Hello, I need it, on two columns, can you please help me 

[EBOOST]

Hi,

Do you mean that you would like to show 2 columns instead 4 columns?

[AMCEnterprise51]

Can it be used for Crave or sense template?

[EBOOST]

Hi,

It's possible

[Chr-]

Hi.This will work on Sense Theme? Thank you in advanced!

[EBOOST]

Hi,

Yes. It can work on Sense theme.

[Techms]

We want to show  quick add to cart button ? 
Please help

[EBOOST]

Hi,

You can refer the screenshot below to add it.

[wahab55]

hi can you please add ( add to cart button ) like in picture below

[EBOOST]

Hi, 

You ca refer the screenshot below

[wahab55]

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

[EBOOST]

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

[SSxRS]

Hey I tried this code but this is the error I am getting. How can I fix it?

[EBOOST]

Hi,

Could you share error? I will help to take a look.

[SSxRS]

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.