Re: Want to add the tab collection in dawn theme

Solved

Want to add the tab collection in dawn theme

Sohan2198
Pathfinder
124 8 18

Sohan2198_0-1717646308867.png

Hello, 
I want to add the tab collection in shopify dawn theme.

like above mentioned.

 

Please help to resolve my problem.

Best,

Sohan

Shopify_
Accepted Solutions (2)

Rahul_dhiman
Shopify Partner
610 120 123

This is an accepted solution.

I there ,

Please check this video I have created for you .


In order to do this , You can add a section called tabbed-collections.liquid and add this code .

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
{%- if section.settings.enable_quick_add -%}
  <link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
button.tablinks {
    border: none;
    background: none;
    font-size: 1.2rem;
   
    padding: 12px 20px;
}
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
    button.tablinks {
    border: none;
    background: none;
    font-size: 2.2rem;
  
    padding: 12px 20px;
color: #000;
}
    .outerdic {
    
    margin: 0 auto;
}
  }
  .tab {
    margin: 0 auto;
    text-align: center;
    display: block;
}

  
  button.tablinks.active {
    border-bottom: 3px solid #000;
}
  .tabinner {
    width: fit-content;
    margin: 0 auto;
    border-bottom: 1px solid #000;
}
  .tabinner button {
    font-family: var(--font-heading-family);
}

  .outerdic .slider-counter {
   
    display: none !important;
}
.final:after {
    content: "";
    position: absolute;
    top: var(--buttons-border-width);
    right: var(--buttons-border-width);
    bottom: var(--buttons-border-width);
    left: var(--buttons-border-width);
    z-index: 1;
    border-radius: var(--buttons-radius);
  
}
.final:hover::after {
  content: "";
    position: absolute;
    top: var(--buttons-border-width);
    right: var(--buttons-border-width);
    bottom: var(--buttons-border-width);
    left: var(--buttons-border-width);
    z-index: 1;
    border-radius: var(--buttons-radius);
 
}
 a.center.final.button.button--secondary {
    text-align: center;
    margin: 0 auto;
    width: 20rem;
    display: block;
    padding: 1.2rem;
  
   font-size: 2.4rem
}

  .extrapass{
  padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    
  }
  @media screen and (max-width:749px){
a.center.final.button.button--secondary {
   
    font-size: 1.8rem;
}
    
  }

  .extrapass a.center.final.button.button--secondary {
  
    width: 30rem;
 
}
{%- endstyle -%}

{%- liquid
  assign products_to_display = section.settings.collection.all_products_count

  if section.settings.collection.all_products_count > section.settings.products_to_show
    assign products_to_display = section.settings.products_to_show
    assign more_in_collection = true
  endif

  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
    assign show_mobile_slider = true
  endif

  assign show_desktop_slider = true
  if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
    assign show_desktop_slider = true
  endif
    -%}

 <div class="color-{{ section.settings.color_scheme }} isolate gradient">
  <div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
      <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
        {%- if section.settings.title != blank -%}
          <h2 class="title {{ section.settings.heading_size }}">{{ section.settings.title | escape }}</h2>
        {%- endif -%}
        {%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}
          <div class="collection__description {{ section.settings.description_style }}">{%- if section.settings.show_description -%}{{ section.settings.collection.description }}{%- else -%}{{ section.settings.description }}{% endif %}</div>
        {%- endif -%}
      </div>


    
    {%- if section.settings.show_view_all and more_in_collection -%}
      <div class="center collection__view-all">
        <a href="{{ section.settings.collection.url }}"
          class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
          aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
        >
          {{ 'sections.featured_collection.view_all' | t }}
        </a>
      </div>
    {%- endif -%}
  </div>
</div> 
<div class="tab">
  <div class="tabinner">
  <button class="tablinks" onclick="openCity(event, '{{ section.settings.collection }}')" id="defaultOpen">{{ section.settings.collection.title }}</button>
  <button class="tablinks" onclick="openCity(event, '{{ section.settings.collection1 }}')">{{ section.settings.collection1.title }}</button>
  <button class="tablinks" onclick="openCity(event, '{{ section.settings.collection2 }}')">{{ section.settings.collection2.title }}</button>
  </div>
</div>

<div id="{{ section.settings.collection }}" class="tabcontent" >
  <div class="outerdic page-width">
    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
      <ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
        {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
          <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: section.settings.image_ratio,
              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>
        {%- else -%}
          {%- for i in (1..4) -%}
            <li class="grid__item">
              {% render 'card-product', show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider or show_desktop_slider -%}
        <div class="slider-buttons no-js-hidden">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ products_to_display }}</span>
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
        </div>
      {%- endif -%}
    </slider-component>
</div>
</div>

<div id="{{ section.settings.collection1 }}" class="tabcontent">
  <div class="outerdic page-width">
    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
      <ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection1 == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
        {%- for product in section.settings.collection1.products limit: section.settings.products_to_show -%}
          <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: section.settings.image_ratio,
              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>
        {%- else -%}
          {%- for i in (1..4) -%}
            <li class="grid__item">
              {% render 'card-product', show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider or show_desktop_slider -%}
        <div class="slider-buttons no-js-hidden">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ products_to_display }}</span>
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
        </div>
      {%- endif -%}
    </slider-component>
</div>
</div>

<div id="{{ section.settings.collection2 }}" class="tabcontent">
  <div class="outerdic page-width">
    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
      <ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection2 == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
        {%- for product in section.settings.collection2.products limit: section.settings.products_to_show -%}
          <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: section.settings.image_ratio,
              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>
        {%- else -%}
          {%- for i in (1..4) -%}
            <li class="grid__item">
              {% render 'card-product', show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider or show_desktop_slider -%}
        <div class="slider-buttons no-js-hidden">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ products_to_display }}</span>
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
        </div>
      {%- endif -%}
    </slider-component>
</div>

 
</div>
 
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
     
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.addEventListener('DOMContentLoaded', (event) => {
   document.getElementById("defaultOpen").click();
});
</script>


{% schema %}
{
  "name": "PWC - Tab Collections",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Featured collection",
      "label": "t:sections.featured-collection.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "t:sections.featured-collection.settings.description.label"
    },
     
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "t:sections.featured-collection.settings.show_description.label",
      "default": false
    },
    {
      "type": "select",
      "id": "description_style",
      "label": "t:sections.featured-collection.settings.description_style.label",
      "options": [
        {
          "value": "body",
          "label": "t:sections.featured-collection.settings.description_style.options__1.label"
        },
        {
          "value": "subtitle",
          "label": "t:sections.featured-collection.settings.description_style.options__2.label"
        },
        {
          "value": "uppercase",
          "label": "t:sections.featured-collection.settings.description_style.options__3.label"
        }
      ],
      "default": "body"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    {
      "type": "collection",
      "id": "collection1",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    {
      "type": "collection",
      "id": "collection2",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.products_to_show.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.columns_desktop.label"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "t:sections.featured-collection.settings.full_width.label",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-collection.settings.show_view_all.label"
    },
    {
      "type": "select",
      "id": "view_all_style",
      "label": "t:sections.featured-collection.settings.view_all_style.label",
      "options": [
        {
          "value": "link",
          "label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
        },
        {
          "value": "outline",
          "label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
        },
        {
          "value": "solid",
          "label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
        }
      ],
      "default": "solid"
    },
    {
      "type": "checkbox",
      "id": "enable_desktop_slider",
      "label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
      "default": false
    },

    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.featured-collection.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_rating.label",
      "info": "t:sections.featured-collection.settings.show_rating.info"
    },
    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "t:sections.featured-collection.settings.enable_quick_buy.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "PWC- Tab Collection"
    }
  ]
}
{% endschema %}
Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

View solution in original post

Rahul_dhiman
Shopify Partner
610 120 123

This is an accepted solution.

Hello @Sohan2198  ,
Sorry for late reply 
Here is the updated code .

<style>
  .tabs {
      display: flex;
      margin-bottom: 20px;
      cursor: pointer;
      width: 60%;
      margin: 0 auto;
  }
  .tabs button {
      flex: 1;
      padding: 10px;
      background: #f1f1f1;
      border: none;
      margin-right: 2px;
      transition: background 0.3s;
  }
  .tabs button:hover, .tabs button.active {
      background: #ddd;
  }
  .tab-content {
      display: none;
  }
  .tab-content.active {
      display: block;
  }
</style>

<div class="tabs">
  {% for block in section.blocks %}
    {% if block.settings.collection %}
      <button class="tab-button" data-collection-id="collection-{{ block.id }}">{{ block.settings.collection.title }}</button>
    {% endif %}
  {% endfor %}
</div>

{% for block in section.blocks %}
  {% if block.settings.collection %}
    <div class="tab-content" id="collection-{{ block.id }}">
      {% assign collection = block.settings.collection %}
      <div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
        <div class="loading-overlay gradient"></div>
        <ul
          id="product-grid"
          data-id="{{ section.id }}"
          class="
            grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
            grid--{{ section.settings.columns_desktop }}-col-desktop
          "
        >
          {%- for product in collection.products limit: section.settings.products_per_page -%}
            {% assign lazy_load = false %}
            {%- if forloop.index > 2 -%}
              {%- assign lazy_load = true -%}
            {%- endif -%}
            <li
              class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
              {% if settings.animations_reveal_on_scroll %}
                data-cascade
                style="--animation-order: {{ forloop.index }};"
              {% endif %}
            >
              {% 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,
                lazy_load: lazy_load,
                show_quick_add: section.settings.enable_quick_add,
                section_id: section.id
              %}
            </li>
          {%- endfor -%}
        </ul>
      </div>
    </div>
  {% endif %}
{% endfor %}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(button => {
      button.addEventListener('click', () => {
        const collectionId = button.getAttribute('data-collection-id');

        // Remove active class from all buttons and content
        tabButtons.forEach(btn => btn.classList.remove('active'));
        tabContents.forEach(content => content.classList.remove('active'));

        // Add active class to the clicked button and corresponding content
        button.classList.add('active');
        document.getElementById(collectionId).classList.add('active');
      });
    });

    // Trigger click on the first tab button to show the first tab by default
    if (tabButtons.length > 0) {
      tabButtons[0].click();
    }
  });
</script>

{% schema %}
{
  "name": "Collections Tabs Blocks",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "Products per page"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "Columns on desktop"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "info": "Has cards info",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "Image settings"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "portrait",
          "label": "Portrait"
        },
        {
          "value": "square",
          "label": "Square"
        }
      ],
      "default": "adapt",
      "label": "Image ratio"
    },
    {
      "type": "select",
      "id": "image_shape",
      "options": [
        {
          "value": "default",
          "label": "Default"
        },
        {
          "value": "arch",
          "label": "Arch"
        },
        {
          "value": "blob",
          "label": "Blob"
        },
        {
          "value": "chevronleft",
          "label": "Chevron left"
        },
        {
          "value": "chevronright",
          "label": "Chevron right"
        },
        {
          "value": "diamond",
          "label": "Diamond"
        },
        {
          "value": "parallelogram",
          "label": "Parallelogram"
        },
        {
          "value": "round",
          "label": "Round"
        }
      ],
      "default": "default",
      "label": "Image shape",
      "info": "Image shape info"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "Show secondary image"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "Show vendor"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "Show rating",
      "info": "Show rating info"
    },
    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "Enable quick add"
    },
    {
      "type": "header",
      "content": "Filtering settings"
    },
    {
      "type": "checkbox",
      "id": "enable_filtering",
      "default": true,
      "label": "Enable filtering",
      "info": "Enable filtering info"
    },
    {
      "type": "select",
      "id": "filter_type",
      "options": [
        {
          "value": "horizontal",
          "label": "Horizontal"
        },
        {
          "value": "vertical",
          "label": "Vertical"
        },
        {
          "value": "drawer",
          "label": "Drawer"
        }
      ],
      "default": "horizontal",
      "label": "Filter type",
      "info": "Filter type info"
    },
    {
      "type": "checkbox",
      "id": "enable_sorting",
      "default": true,
      "label": "Enable sorting"
    },
    {
      "type": "header",
      "content": "Mobile settings"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "Columns on mobile",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ]
    },
    {
      "type": "header",
      "content": "Padding settings"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Select Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collections Tabs Blocks",
      "category": "Custom"
    }
  ]
}
{% endschema %}



Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

View solution in original post

Replies 13 (13)

PageFly-Garcia
Shopify Partner
497 80 137

Hi @Sohan2198
The Dawn theme does not inherently include a tab element, so you need to code it yourself. This can be quite challenging, requiring at least a good understanding of HTML, CSS, and Liquid, you can refer this article https://community.shopify.com/c/shopify-design/how-to-add-tabs-in-dawn-theme-under-the-product-descr... or else you might need to hire a developer to code it for you, as it involves writing at least 50 lines of code. If you are not confotable with this option, another option is to switch to a theme that includes a tab element (e.g., Impulse or Empire theme). Alternatively, you can use a page builder to create this tab section. With a page builder, you can simply drag and drop elements, customize colors, and then add that section to your theme effortlessly. 

Hope it helps! 

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.


Darshanp712
Shopify Partner
137 21 18

Hello @Sohan2198, I can do it for you. I have done it in some online stores. Please reply if you want to do it in the store.
Also can create some other sections if you go further with it. 

 

Best regards,
Thanks!

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.

Rahul_dhiman
Shopify Partner
610 120 123

This is an accepted solution.

I there ,

Please check this video I have created for you .


In order to do this , You can add a section called tabbed-collections.liquid and add this code .

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
{%- if section.settings.enable_quick_add -%}
  <link rel="stylesheet" href="{{ 'quick-add.css' | asset_url }}" media="print" onload="this.media='all'">
  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
button.tablinks {
    border: none;
    background: none;
    font-size: 1.2rem;
   
    padding: 12px 20px;
}
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
    button.tablinks {
    border: none;
    background: none;
    font-size: 2.2rem;
  
    padding: 12px 20px;
color: #000;
}
    .outerdic {
    
    margin: 0 auto;
}
  }
  .tab {
    margin: 0 auto;
    text-align: center;
    display: block;
}

  
  button.tablinks.active {
    border-bottom: 3px solid #000;
}
  .tabinner {
    width: fit-content;
    margin: 0 auto;
    border-bottom: 1px solid #000;
}
  .tabinner button {
    font-family: var(--font-heading-family);
}

  .outerdic .slider-counter {
   
    display: none !important;
}
.final:after {
    content: "";
    position: absolute;
    top: var(--buttons-border-width);
    right: var(--buttons-border-width);
    bottom: var(--buttons-border-width);
    left: var(--buttons-border-width);
    z-index: 1;
    border-radius: var(--buttons-radius);
  
}
.final:hover::after {
  content: "";
    position: absolute;
    top: var(--buttons-border-width);
    right: var(--buttons-border-width);
    bottom: var(--buttons-border-width);
    left: var(--buttons-border-width);
    z-index: 1;
    border-radius: var(--buttons-radius);
 
}
 a.center.final.button.button--secondary {
    text-align: center;
    margin: 0 auto;
    width: 20rem;
    display: block;
    padding: 1.2rem;
  
   font-size: 2.4rem
}

  .extrapass{
  padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    
  }
  @media screen and (max-width:749px){
a.center.final.button.button--secondary {
   
    font-size: 1.8rem;
}
    
  }

  .extrapass a.center.final.button.button--secondary {
  
    width: 30rem;
 
}
{%- endstyle -%}

{%- liquid
  assign products_to_display = section.settings.collection.all_products_count

  if section.settings.collection.all_products_count > section.settings.products_to_show
    assign products_to_display = section.settings.products_to_show
    assign more_in_collection = true
  endif

  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
    assign show_mobile_slider = true
  endif

  assign show_desktop_slider = true
  if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
    assign show_desktop_slider = true
  endif
    -%}

 <div class="color-{{ section.settings.color_scheme }} isolate gradient">
  <div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
      <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
        {%- if section.settings.title != blank -%}
          <h2 class="title {{ section.settings.heading_size }}">{{ section.settings.title | escape }}</h2>
        {%- endif -%}
        {%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}
          <div class="collection__description {{ section.settings.description_style }}">{%- if section.settings.show_description -%}{{ section.settings.collection.description }}{%- else -%}{{ section.settings.description }}{% endif %}</div>
        {%- endif -%}
      </div>


    
    {%- if section.settings.show_view_all and more_in_collection -%}
      <div class="center collection__view-all">
        <a href="{{ section.settings.collection.url }}"
          class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
          aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
        >
          {{ 'sections.featured_collection.view_all' | t }}
        </a>
      </div>
    {%- endif -%}
  </div>
</div> 
<div class="tab">
  <div class="tabinner">
  <button class="tablinks" onclick="openCity(event, '{{ section.settings.collection }}')" id="defaultOpen">{{ section.settings.collection.title }}</button>
  <button class="tablinks" onclick="openCity(event, '{{ section.settings.collection1 }}')">{{ section.settings.collection1.title }}</button>
  <button class="tablinks" onclick="openCity(event, '{{ section.settings.collection2 }}')">{{ section.settings.collection2.title }}</button>
  </div>
</div>

<div id="{{ section.settings.collection }}" class="tabcontent" >
  <div class="outerdic page-width">
    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
      <ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
        {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
          <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: section.settings.image_ratio,
              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>
        {%- else -%}
          {%- for i in (1..4) -%}
            <li class="grid__item">
              {% render 'card-product', show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider or show_desktop_slider -%}
        <div class="slider-buttons no-js-hidden">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ products_to_display }}</span>
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
        </div>
      {%- endif -%}
    </slider-component>
</div>
</div>

<div id="{{ section.settings.collection1 }}" class="tabcontent">
  <div class="outerdic page-width">
    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
      <ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection1 == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
        {%- for product in section.settings.collection1.products limit: section.settings.products_to_show -%}
          <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: section.settings.image_ratio,
              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>
        {%- else -%}
          {%- for i in (1..4) -%}
            <li class="grid__item">
              {% render 'card-product', show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider or show_desktop_slider -%}
        <div class="slider-buttons no-js-hidden">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ products_to_display }}</span>
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
        </div>
      {%- endif -%}
    </slider-component>
</div>
</div>

<div id="{{ section.settings.collection2 }}" class="tabcontent">
  <div class="outerdic page-width">
    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
      <ul id="Slider-{{ section.id }}" class="grid product-grid contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection2 == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'sections.featured_collection.slider' | t }}">
        {%- for product in section.settings.collection2.products limit: section.settings.products_to_show -%}
          <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}">
            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: section.settings.image_ratio,
              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>
        {%- else -%}
          {%- for i in (1..4) -%}
            <li class="grid__item">
              {% render 'card-product', show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider or show_desktop_slider -%}
        <div class="slider-buttons no-js-hidden">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ products_to_display }}</span>
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button>
        </div>
      {%- endif -%}
    </slider-component>
</div>

 
</div>
 
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
     
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.addEventListener('DOMContentLoaded', (event) => {
   document.getElementById("defaultOpen").click();
});
</script>


{% schema %}
{
  "name": "PWC - Tab Collections",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Featured collection",
      "label": "t:sections.featured-collection.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "t:sections.featured-collection.settings.description.label"
    },
     
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "t:sections.featured-collection.settings.show_description.label",
      "default": false
    },
    {
      "type": "select",
      "id": "description_style",
      "label": "t:sections.featured-collection.settings.description_style.label",
      "options": [
        {
          "value": "body",
          "label": "t:sections.featured-collection.settings.description_style.options__1.label"
        },
        {
          "value": "subtitle",
          "label": "t:sections.featured-collection.settings.description_style.options__2.label"
        },
        {
          "value": "uppercase",
          "label": "t:sections.featured-collection.settings.description_style.options__3.label"
        }
      ],
      "default": "body"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    {
      "type": "collection",
      "id": "collection1",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    {
      "type": "collection",
      "id": "collection2",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.products_to_show.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.columns_desktop.label"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "t:sections.featured-collection.settings.full_width.label",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-collection.settings.show_view_all.label"
    },
    {
      "type": "select",
      "id": "view_all_style",
      "label": "t:sections.featured-collection.settings.view_all_style.label",
      "options": [
        {
          "value": "link",
          "label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
        },
        {
          "value": "outline",
          "label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
        },
        {
          "value": "solid",
          "label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
        }
      ],
      "default": "solid"
    },
    {
      "type": "checkbox",
      "id": "enable_desktop_slider",
      "label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
      "default": false
    },

    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.featured-collection.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_rating.label",
      "info": "t:sections.featured-collection.settings.show_rating.info"
    },
    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "t:sections.featured-collection.settings.enable_quick_buy.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "PWC- Tab Collection"
    }
  ]
}
{% endschema %}
Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
Sohan2198
Pathfinder
124 8 18

Hello @Rahul_dhiman 

It working fine. but can we add the option no. column in desktop as well.

 

Thanks for your time.
Best,

Sohan

Shopify_
Sohan2198
Pathfinder
124 8 18

Hello @Rahul_dhiman 

It working fine. but can we add the option no. row in desktop as well.

 

Thanks for your time.
Best,

Sohan

Shopify_
Rahul_dhiman
Shopify Partner
610 120 123

Yes that can be done .

But can you send a screenshot of what you need or an example 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
Sohan2198
Pathfinder
124 8 18

hello @Rahul_dhiman 
Like this 

Sohan2198_0-1717748770068.png

 

 

 

Shopify_
Sohan2198
Pathfinder
124 8 18

hello @Rahul_dhiman 

Any change 

Shopify_
Rahul_dhiman
Shopify Partner
610 120 123

Hi @Sohan2198  I am currently out and away from my workstation.
will return today and do the changes.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
Sohan2198
Pathfinder
124 8 18

hello @Rahul_dhiman,

Any change ??

Shopify_
Sohan2198
Pathfinder
124 8 18

Hello @Rahul_dhiman 
Please help me to resolve this section ..

best,

Sohan

Shopify_
Rahul_dhiman
Shopify Partner
610 120 123

This is an accepted solution.

Hello @Sohan2198  ,
Sorry for late reply 
Here is the updated code .

<style>
  .tabs {
      display: flex;
      margin-bottom: 20px;
      cursor: pointer;
      width: 60%;
      margin: 0 auto;
  }
  .tabs button {
      flex: 1;
      padding: 10px;
      background: #f1f1f1;
      border: none;
      margin-right: 2px;
      transition: background 0.3s;
  }
  .tabs button:hover, .tabs button.active {
      background: #ddd;
  }
  .tab-content {
      display: none;
  }
  .tab-content.active {
      display: block;
  }
</style>

<div class="tabs">
  {% for block in section.blocks %}
    {% if block.settings.collection %}
      <button class="tab-button" data-collection-id="collection-{{ block.id }}">{{ block.settings.collection.title }}</button>
    {% endif %}
  {% endfor %}
</div>

{% for block in section.blocks %}
  {% if block.settings.collection %}
    <div class="tab-content" id="collection-{{ block.id }}">
      {% assign collection = block.settings.collection %}
      <div class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}">
        <div class="loading-overlay gradient"></div>
        <ul
          id="product-grid"
          data-id="{{ section.id }}"
          class="
            grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
            grid--{{ section.settings.columns_desktop }}-col-desktop
          "
        >
          {%- for product in collection.products limit: section.settings.products_per_page -%}
            {% assign lazy_load = false %}
            {%- if forloop.index > 2 -%}
              {%- assign lazy_load = true -%}
            {%- endif -%}
            <li
              class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
              {% if settings.animations_reveal_on_scroll %}
                data-cascade
                style="--animation-order: {{ forloop.index }};"
              {% endif %}
            >
              {% 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,
                lazy_load: lazy_load,
                show_quick_add: section.settings.enable_quick_add,
                section_id: section.id
              %}
            </li>
          {%- endfor -%}
        </ul>
      </div>
    </div>
  {% endif %}
{% endfor %}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(button => {
      button.addEventListener('click', () => {
        const collectionId = button.getAttribute('data-collection-id');

        // Remove active class from all buttons and content
        tabButtons.forEach(btn => btn.classList.remove('active'));
        tabContents.forEach(content => content.classList.remove('active'));

        // Add active class to the clicked button and corresponding content
        button.classList.add('active');
        document.getElementById(collectionId).classList.add('active');
      });
    });

    // Trigger click on the first tab button to show the first tab by default
    if (tabButtons.length > 0) {
      tabButtons[0].click();
    }
  });
</script>

{% schema %}
{
  "name": "Collections Tabs Blocks",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "Products per page"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "Columns on desktop"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "info": "Has cards info",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "Image settings"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "portrait",
          "label": "Portrait"
        },
        {
          "value": "square",
          "label": "Square"
        }
      ],
      "default": "adapt",
      "label": "Image ratio"
    },
    {
      "type": "select",
      "id": "image_shape",
      "options": [
        {
          "value": "default",
          "label": "Default"
        },
        {
          "value": "arch",
          "label": "Arch"
        },
        {
          "value": "blob",
          "label": "Blob"
        },
        {
          "value": "chevronleft",
          "label": "Chevron left"
        },
        {
          "value": "chevronright",
          "label": "Chevron right"
        },
        {
          "value": "diamond",
          "label": "Diamond"
        },
        {
          "value": "parallelogram",
          "label": "Parallelogram"
        },
        {
          "value": "round",
          "label": "Round"
        }
      ],
      "default": "default",
      "label": "Image shape",
      "info": "Image shape info"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "Show secondary image"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "Show vendor"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "Show rating",
      "info": "Show rating info"
    },
    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "Enable quick add"
    },
    {
      "type": "header",
      "content": "Filtering settings"
    },
    {
      "type": "checkbox",
      "id": "enable_filtering",
      "default": true,
      "label": "Enable filtering",
      "info": "Enable filtering info"
    },
    {
      "type": "select",
      "id": "filter_type",
      "options": [
        {
          "value": "horizontal",
          "label": "Horizontal"
        },
        {
          "value": "vertical",
          "label": "Vertical"
        },
        {
          "value": "drawer",
          "label": "Drawer"
        }
      ],
      "default": "horizontal",
      "label": "Filter type",
      "info": "Filter type info"
    },
    {
      "type": "checkbox",
      "id": "enable_sorting",
      "default": true,
      "label": "Enable sorting"
    },
    {
      "type": "header",
      "content": "Mobile settings"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "Columns on mobile",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ]
    },
    {
      "type": "header",
      "content": "Padding settings"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Select Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collections Tabs Blocks",
      "category": "Custom"
    }
  ]
}
{% endschema %}



Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
Sohan2198
Pathfinder
124 8 18

Thanks a lot @Rahul_dhiman,

Can please help to make,
description, shipping accordion like  this on pdp

Sohan2198_0-1718262322992.png

 


 

Shopify_