Skip to main content

Shopify: Add Collection Tabs section


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

or

How to create a product slider with collection tabs section in shopify


Thanks

Labels:

Comments

Post a Comment

Popular posts from this blog

Convert website to android and ios application using react native expo webview

Convert website to android and ios application using react native expo webview If you want to check you can check on github by using below link also dont forget to give star ;) Source Code: https://github.com/shubham715/react-native-expo-webview-convert-website-to-app React native is the best choice to create multi platform mobile application , but sometimes we dont want to write a complete application because we already have a web application or a website and its complicated to manage both . So we have a solution for this problem. React native supports webView that makes easy to run any website url like an app natively. What is webview in react native? In React native, WebView helps to show web content in a native view. For this tutorial we will use EXPO. What is EXPO ? EXPO a set of tools to help you quickly start an app. Expo have many inbuilt components that helps to simplify the development and testing of React Native app. So please follow the below steps to c...
45 comments
Read more

Solution-windows 'expo' is not recognized as an internal or external command

Solution for expo is not recognized as an internal or external command,operable program or batch file in Windows 10 Sometimes expo will not work globally mostly in windows 10, If you are facing same issue then follow the below Steps 1) Click on windows button and search for  " Environment variables"  and click on "Edit the system environment variables" 2) Now you will see a popup like below screen. Then you need to click on Environment Variables. (Please see highlight part in below image)     3)Then click on new button that i have highlighted in below image 4. Then a popup will open and you need to fill details like below mentioned Variable Name :Path Variable Value: %USERPROFILE%\AppData\Roaming\npm Here we are creating a new path variable and passing location of npm.   Now Click on OK and close all the terminal windows and open new CMD or terminal and type Expo . Great now you can access expo from any...
23 comments
Read more

Read files from folder using php

Read files from folder using PHP Today we learn how to read all files from a folder . we will learn to list all files and read all files . So please follow below steps:-   METHOD 1 1) List all files from folder If you want the list of all files in a folder then you can do by using below code //Get a list of file paths using the glob function. $allFilesList= glob('myfolder/*'); //Loop through the array that glob returned. foreach($allFilesList as $filename){ //Simply print them out onto the screen. echo $filename; echo '<br>'; } The above code will print list of all files like file1.jpg file2.png file3.gif file4.pdf   If you want to read only specific extension file like you just want to a list of all png files then you can do it by using below code. //Get a list of all files ending in .txt $fileList = glob('myfolder/*.png);   METHOD 2 Here is the second method. here we are using scandir() function to s...
1 comment
Read more