Hi Guys,
I have a challanging question: Can we make a collection tabs menu inside the page (not header) such as this one:
The reference website autoall.cc
Thank you
Topic summary
A user is seeking help to create a tabbed menu within a page body (not in the header), similar to a reference example they provided.
Solution Offered:
Another community member recommends adding custom code and suggests hiring an expert if unfamiliar with coding. They provide a complete code snippet for creating a custom tab section that includes:
- Support for multiple block types: images, HTML, Liquid code, and collections
- Customizable tab headings and content areas
- Product grid display for collection tabs
- Styling options for button colors and hover states
Implementation:
The solution involves creating a new section in the theme code and pasting the provided markup and schema. The code allows for flexible content types within each tab and includes placeholder handling for empty collections.
Note: The provided code appears partially reversed/encoded in the original post but represents a functional Shopify section template with tab functionality.
Hi @Alliance
To make tab section, it require to add some custom code.
if you don’t know about the code, you should hire an expert to help you build that section.
or you can try to create a new section in theme code then paste this code into.
It not best solution, but I hope it helpful for you
{% if section.settings.section_title != blank %}
## {{ section.settings.section_title | escape }}
{% endif %}
{% if section.settings.subheading != blank %}
{{ section.settings.subheading }}
{% endif %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'image' %}
{{ block.settings.heading }}
{% when 'html' %}
{{ block.settings.heading }}
{% when 'liquid' %}
{{ block.settings.heading }}
{% when 'collection' %}
{{ block.settings.heading }}
{% endcase %}
{% endfor %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'image' %}
{{ block.settings.image | img_url: '2048x' | img_tag }}
{% when 'html' %}
{{ block.settings.html }}
{% when 'liquid' %}
{{ block.settings.liquid }}
{% when 'collection' %}
{%- liquid
assign collection = collections[block.settings.collection]
assign product_limit = block.settings.grid
-%}
{% for product in collection.products limit: product_limit %}
- {% render 'card-product', card_product: product, show_vendor: block.settings.show_vendor %}
{% else %}
{% for i in (1..product_limit) %}
- Product title
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
Product title
{% render 'price' %}
{% endfor %}
{% endfor %}
{% endcase%}
{% endfor %}
{% schema %}
{
"name": "Tab Section",
"max_blocks": 5,
"settings": [
{
"type": "text",
"id": "section_title",
"label": "Heading",
"default": "Talk about your brand"
},
{
"type": "richtext",
"id": "subheading",
"label": "Subheading",
"default": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
},
{
"type": "header",
"content": "Tab Settings"
},
{
"type": "color",
"id": "button_color",
"label": "Button color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_background",
"label": "Button background",
"default": "#3a3a3a"
},
{
"type": "color",
"id": "button_hover_color",
"label": "Hover color",
"default": "#3a3a3a"
},
{
"type": "color",
"id": "button_hover_background",
"label": "Hover background",
"default": "#fed7e0"
}
],
"blocks": [
{
"type": "image",
"name": "Block image",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Tab heading"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "image_url",
"label": "Link"
}
]
},
{
"type": "html",
"name": "Block html",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Tab heading"
},
{
"type": "html",
"id": "html",
"label": "HTML code"
}
]
},
{
"type": "liquid",
"name": "Block liquid",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Tab heading"
},
{
"type": "liquid",
"id": "liquid",
"label": "Liquid code"
}
]
},
{
"type": "collection",
"name": "Block collection",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Tab heading"
},
{
"type": "collection",
"id": "collection",
"label": "collection"
},
{
"type": "range",
"id": "grid",
"label": "Products per row",
"min": 1,
"max": 10,
"step": 1,
"default": 3
}
]
}
],
"presets": [
{
"name": "Tab Section",
"category": "Tab Section"
}
]
}
{% endschema %}