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?

[empressculture]

@EBOOST Hi, sorry to bother, I try to use the code in my craft theme website, it work, the only bug is, i need to have a feature collection in the same page, if not the image will not be shown at all, do you have any idea what is the problem?

here is my website link: https://18s8pg-0g.myshopify.com

thank you.

[EBOOST]

Hi @empressculture ,

Do you mean if don't have an feature collection section then products on tabs will not show?

[empressculture]

@EBOOST The products will show, but without any images, here is the screenshot of the bug.

[EBOOST]

Hi, 

Could you share your theme store? I didn't see this on on https://18s8pg-0g.myshopify.com/

[empressculture]

@EBOOST hi I am trying some coding just now, sorry, now already put it back, could you see the collection tab edi?

[EBOOST]

Hi @empressculture ,

Maybe this theme is new version so it is missing some CSS and js. You can add code below to top of code above

{{ '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 }}

{% if section.settings.image_shape == 'blob' %}
  {{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- unless section.settings.quick_add == 'none' -%}
  {{ 'quick-add.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}

{%- if section.settings.quick_add == 'standard' -%}
  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{%- if section.settings.quick_add == 'bulk' -%}
  <script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

[empressculture]

@EBOOST can show normally  edi, thank you for your help.

[empressculture]

@EBOOST so sorry to bother again, but when I try to add second tab in the same page, then the second tab could not work normally, do you have any idea what is the problem?

here is my website link: https://18s8pg-0g.myshopify.com/

Thank you.

[EBOOST]

Hi @empressculture ,

Code above only support to add one time. You can refer screenshot below to add to fix it.

Add code below like the screenshot.

-{{ section.id }}

[empressculture]

@EBOOST worked edi, thank you very much.

[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!