Create A Collection Tabs For My Shopify Page

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

[Chr_2]

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

[EBOOST]

Hi,

Yes. It can work on Sense theme.

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

[AryavK]

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

thanks

[Techms]

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

[tvphmic]

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

[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

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

[wahab55]

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

[EBOOST]

Hi,

You ca refer the screenshot below

[EBOOST]

Hi,

You can refer the screenshot below to add it.

[wahab55]

I did this but nothing happens

This is the code

{% if section.blocks.size > 0 %}

{% if section.settings.title != blank %}

{{ section.settings.title }}

{% endif %}

{% assign tabContent = '' %}

{% for block in section.blocks %} {% assign collection = collections[block.settings.collection] %}
• {{ collection.title }}
{% capture content %}
{%- for product in block.settings.collection.products limit: 4 -%}
• {% render 'card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, show_quick_add: true, section_id: section.id %}
{%- endfor -%}
{% endcapture %} {% assign tabContent = tabContent | append: content %} {% endfor %}

{{ tabContent }}

.tabs { background: none!important;border: none!important} .tabs.ui-tabs .ui-tabs-nav { background: none; padding: 0; display: flex; justify-content: center; border: none; } .tabs-section h2 { text-align: center; } .tabs.ui-tabs .ui-tabs-nav li { border: none; background: none; } .tabs.ui-tabs .ui-tabs-nav li a{ color: #212E38; padding: 5px 40px; border-radius: 50px; } .tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a { background: white; } {% endif %} {% schema %} { "name": "Tabs", "settings": [ { "type": "text", "id": "title", "label": "Title" } ], "blocks": [ { "type": "tab", "name": "Tab", "limit": 4,

“settings”: [
{
“type”: “collection”,
“id”: “collection”,
“label”: “Collection”
}
]

}
],
“presets”: [
{
“name”: “Tabs”,
“blocks”:
}
]
}
{% endschema %}

[EBOOST]

Hi @wahab55 ,

Code above for Dawn theme. You can use code below for trade theme.

{%  if section.blocks.size > 0 %}
  {{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}

 {{ 'quick-add.css' | asset_url | stylesheet_tag }}
  

  

  

    
    
    
    {%  if section.settings.useslider %}
      
    
    
    
    {%  endif %}
    {%  if section.settings.title != blank %}
      ## {{ section.settings.title }}
    {%  endif  %}
    
      {%  assign tabContent = '' %}
      

      {%  for block in section.blocks %}
       {%  assign collection = collections[block.settings.collection] %}
        - {{ collection.title  }}

        {%  capture content  %}
            
              

               {%- for product in block.settings.collection.products limit: 8 -%}
               - {% render 'card-product',
                        card_product: product,
                        media_aspect_ratio: 'portrait',
                        image_shape: 'default',
                        show_secondary_image: true,
                        show_vendor: false,
                        show_rating: false,
                        section_id: section.id,
                        quick_add: 'standard'
                      %}
                 
               
              {%- endfor -%}
              
             {%  if block.settings.viewall %}
               
                  View all 
               

               {%  endif  %}
            

        {%  endcapture %}
        {%  assign tabContent = tabContent | append: content %}
      {%  endfor %}  
      
   
      {{ tabContent }}
    
  
  
 
    
  
{%  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 %}

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