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,

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. 

[EBOOST]

Hi,

Which theme are you using? Code above only apply for free themes from Shopify.  You can install Dawn theme. Create snippets/card-product.liquid on your theme after that copy content from Dawn theme. However, I think CSS will not apply.

Or

You can try to find ' snippets/product-grid-item.liquid '  or ' snippets/product-item.liquid'. Refer screenshot below to replace code

The case: If you can't apply. Could you let me access your store? I will help to take a look the issue for you.

[SSxRS]

Hey I am using the Aurora theme. Cant give access to the store right now but can I use it on Aurora?

[EBOOST]

Hi @SSxRS ,

It's possible use on Aurora theme. However, we need custom a little code. The structure is different free theme. So it shown an error when you add code. Because this theme is not free. I don't know it's structure.  So I asked you to access your store to check structure.

[Zapper]

hey, can i use this code for the new 2025 pitch theme, i need help in that

[MRamzan]

Here is the solution which you can follow:

You don't need to use any App.