Create A Collection Tabs and Accordion For My Shopify Page

[hallelujah]

Hi, I’m new to Shopify and coding and I want to create A collection tabs on my shopify store. ref: https://thelastape.in/

and in the mobile view it need look like accordion

. Can someone have the code for this and also I would appreciate if you would tell me how to do it. Thanks.

[topnewyork]

Hello,
Please share “Store URL”
Thanks!

[EBOOST]

Hi @hallelujah ,

May I suggest to update code these steps and this code only work on Free theme:

1. Get code here https://github.com/eboost10/2640367/blob/main/2642389/collection-tabs.liquid

2. Go to Store Online-> theme → edit code

3. add section/collection-tabs.liquid file

4. Add code that you get from step to after that paste to this file

5. Go to theme-> customize → Add Collection tabs

[hallelujah]

Not Working Bro

[hallelujah]

https://hallelujah-demo.myshopify.com/

[EBOOST]

Hi,

Because your theme is missing the translate. I removed code translate. You can get new code. https://github.com/eboost10/2640367/blob/main/2642389/collection-tabs.liquid

[hallelujah]

Error is fine now but products not showing

[hallelujah]

This is the theme default tab code

{{ ‘collection-tab.css’ | asset_url | stylesheet_tag }}
{{ ‘product.css’ | asset_url | stylesheet_tag }}
{%- liquid
assign th_st = settings
assign product_style = th_st.product_style
assign st = section.settings
assign container = st.container
assign color_scheme = st.color_scheme
assign text_align = st.text_alignment
assign heading = st.heading
assign heading_border = st.heading_border
assign description = st.description
assign enabled_animations = settings.animations_enabled
assign more_row = ‘’
if st.number_of_rows > 1
assign more_row = ‘more-row’
endif
assign spt_tablet = ‘’
if st.padding_top > 50
assign spt_tablet = ’ spt-tablet’
endif
assign spt_mobile = ‘’
if st.padding_top > 30
assign spt_mobile = ’ spt-mobile’
endif
assign spb_tablet = ‘’
if st.padding_bottom > 50
assign spb_tablet = ’ spb-tablet’
endif
assign spb_mobile = ‘’
if st.padding_bottom > 30
assign spb_mobile = ’ spb-mobile’
endif
assign reset_spacing = ‘’
if st.reset_spacing
assign reset_spacing = ’ remove_spacing’
endif
assign blocks = section.blocks
assign tab_type = st.tab_type
assign tab_design = st.tab_design
assign tab_style = st.tab_style

assign design_class = ‘’
if tab_style == ‘tab_desgin_1’
assign design_class = ‘tab-desgin-1’
elsif tab_style == ‘tab_desgin_2’
assign design_class = ‘tab-desgin-2’
elsif tab_style == ‘tab_desgin_3’
assign design_class = ‘tab-desgin-3’
elsif tab_style == ‘tab_desgin_4’
assign design_class = ‘tab-desgin-4’
endif
assign grid_class = ‘’
if tab_type == ‘grid’
assign grid_class = ‘bls__grid {{ product_style }}’
endif
-%}

{%- capture style -%}
–section-padding-top: {{ st.padding_top }}px; --section-padding-bottom: {{ st.padding_bottom }}px; {%- if tab_type == ‘carousel’ -%}–bls_product-item-vertical-space: 0px;{%- endif -%}
{%- endcapture -%}

{%- if heading != blank or description != blank -%}

{%- if heading != blank -%}

{{ heading }}

{%- endif -%} {%- if description != blank -%}

{{ description }}

{%- endif -%}

{%- endif -%}

{%- if blocks.size > 1 -%} {%- if tab_design == 'horizontal' -%} {% if tab_style == 'tab_desgin_4' %}

{%- if heading != blank -%}

{%- if heading != blank -%}

{{ heading }}

{%- endif -%}

{%- endif -%} {% endif %}

{%- for block in blocks -%} {%- liquid assign tab_name = block.settings.title assign current_collection = block.settings.collection assign active = '' if forloop.first == true assign active = ' active' endif if block.settings.title == blank assign tab_name = 'Tab ' | append: forloop.index if current_collection != blank assign tab_name = current_collection.title endif endif -%}

{{ tab_name }}

{%- endfor -%}

{% if tab_style == 'tab_desgin_4' %} {%- if description != blank -%}

{{ description }}

{%- endif -%}

{% endif %} {%- else -%}

{{ 'products.product.select_tab' | t }}

{%- for block in blocks -%} {%- liquid assign tab_name = block.settings.title assign current_collection = block.settings.collection assign active = '' if forloop.first == true assign active = ' active' endif if block.settings.title == blank assign tab_name = 'Tab ' | append: forloop.index if current_collection != blank assign tab_name = current_collection.title endif endif -%} {{ tab_name }} {%- endfor -%}

{%- endif -%} {%- endif -%}

{%- for block in blocks -%} {%- liquid assign tab_name = block.settings.title assign current_collection = block.settings.collection assign active = '' if forloop.first == true assign active = ' active' endif -%}

{%- if tab_type == 'grid' -%} {%- render 'product-grid-layout' | st: st | bl: current_collection | block: block -%} {%- else -%} {%- render 'product-carousel-layout' | st: st | bl: current_collection | index: forloop.index -%} {%- endif -%}

{%- endfor -%}

{% schema %}
{
“name”: “t:sections.collection-tab.name”,
“disabled_on”: {
“groups”: [“header”, “footer”, “custom.overlay”]
},
“settings”: [
{
“type”: “header”,
“content”: “t:sections.all.section_header.title_header”
},
{
“type”: “text”,
“id”: “heading”,
“label”: “t:sections.all.section_header.heading”
},
{
“type”: “checkbox”,
“id”: “heading_border”,
“label”: “t:sections.all.content_text.heading_border”,
“default”: false
},
{
“type”: “richtext”,
“id”: “description”,
“label”: “t:sections.all.section_header.description”,
“default”: “

”
},
{
“type”: “select”,
“id”: “text_alignment”,
“label”: “t:sections.all.horizontal_alignment.text_alignment”,
“default”: “text-center”,
“options”: [
{
“value”: “text-left”,
“label”: “t:sections.all.horizontal_alignment.options__1.label”
},
{
“value”: “text-center”,
“label”: “t:sections.all.horizontal_alignment.options__2.label”
},
{
“value”: “text-right”,
“label”: “t:sections.all.horizontal_alignment.options__3.label”
}
]
},
{
“type”: “header”,
“content”: “t:sections.all.header.general”
},
{
“type”: “select”,
“id”: “container”,
“label”: “t:sections.all.layout.label”,
“default”: “container”,
“options”: [
{
“value”: “container”,
“label”: “t:sections.all.layout.options__1.label”
},
{
“value”: “container-fluid”,
“label”: “t:sections.all.layout.options__2.label”
},
{
“value”: “strecth-width”,
“label”: “t:sections.all.layout.options__3.label”
},
{
“value”: “full-width”,
“label”: “t:sections.all.layout.options__4.label”
}
]
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”
},
{
“type”: “header”,
“content”: “t:sections.collection-tab.settings.header.title_tab”
},
{
“type”: “select”,
“id”: “tab_design”,
“label”: “t:sections.collection-tab.settings.tab_design.label”,
“default”: “horizontal”,
“options”: [
{
“value”: “horizontal”,
“label”: “t:sections.collection-tab.settings.tab_design.horizontal.label”
},
{
“value”: “select”,
“label”: “t:sections.collection-tab.settings.tab_design.select.label”
}
]
},
{
“type”: “select”,
“id”: “tab_style”,
“label”: “t:sections.collection-tab.settings.tab_style.label”,
“default”: “tab_desgin_1”,
“options”: [
{
“value”: “tab_desgin_1”,
“label”: “t:sections.all.design_collection.design__1.label”
},
{
“value”: “tab_desgin_2”,
“label”: “t:sections.all.design_collection.design__2.label”
},
{
“value”: “tab_desgin_3”,
“label”: “t:sections.all.design_collection.design__3.label”
},
{
“value”: “tab_desgin_4”,
“label”: “t:sections.all.design_collection.design__4.label”
}
]
},
{
“type”: “select”,
“id”: “tab_type”,
“label”: “t:sections.all.design_layout.product_type”,
“default”: “grid”,
“options”: [
{
“value”: “grid”,
“label”: “t:sections.all.design_layout.options__1.grid”
},
{
“value”: “carousel”,
“label”: “t:sections.all.design_layout.options__2.carousel”
}
]
},
{
“type”: “range”,
“id”: “limit_products”,
“label”: “t:sections.all.show_column.product_to_show”,
“min”: 1,
“max”: 20,
“step”: 1,
“default”: 8
},
{
“type”: “range”,
“id”: “item_desktop”,
“label”: “t:sections.all.custom_column.per_row”,
“min”: 1,
“max”: 25,
“step”: 1,
“default”: 4
},
{
“type”: “range”,
“id”: “column_gap”,
“label”: “t:sections.all.padding.column_gap”,
“min”: 0,
“max”: 50,
“step”: 5,
“unit”: “px”,
“default”: 30
},
{
“type”: “header”,
“content”: “t:sections.all.setting_carousel.carousel_title”
},
{
“type”: “checkbox”,
“id”: “carousel_autoplay”,
“label”: “t:sections.all.setting_carousel.autoplay”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “carousel_loop”,
“label”: “t:sections.all.setting_carousel.loop”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “carousel_arrows”,
“label”: “t:sections.all.setting_carousel.show_arrow”,
“default”: false
},
{
“type”: “select”,
“id”: “carousel_pagination”,
“label”: “t:sections.all.setting_carousel.carousel_pagination.label”,
“options”: [
{
“value”: “carousel_none”,
“label”: “t:sections.all.setting_carousel.carousel_pagination.carousel__none.label”
},
{
“value”: “carousel_bullets”,
“label”: “t:sections.all.setting_carousel.carousel_pagination.carousel__bullets.label”
},
{
“value”: “show_bullet_mobile”,
“label”: “t:sections.all.setting_carousel.carousel_pagination.bullet__mobile.label”
}
]
},
{
“type”: “header”,
“content”: “t:sections.collection-tab.settings.header.grid_settings”
},
{
“type”: “range”,
“id”: “number_of_rows”,
“label”: “t:sections.collection-tab.settings.number_of_rows.label”,
“min”: 1,
“max”: 3,
“step”: 1,
“default”: 1
},
{
“type”: “checkbox”,
“id”: “load_more_button_enable”,
“label”: “t:sections.all.load_more_button_enable.label”,
“default”: false
},
{
“type”: “select”,
“id”: “button_action”,
“label”: “t:sections.all.button_action.label”,
“default”: “load”,
“options”: [
{
“value”: “load”,
“label”: “t:sections.all.button_action.load.label”
},
{
“value”: “redirect”,
“label”: “t:sections.all.button_action.redirect.label”
}
]
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “t:sections.all.content_text.button_text”,
“default”: “Load more”
},
{
“type”: “select”,
“id”: “button_type”,
“label”: “t:sections.all.content_text.button_type.label”,
“default”: “primary”,
“options”: [
{
“value”: “primary”,
“label”: “t:sections.all.content_text.button_type.options__1.label”
},
{
“value”: “secondary”,
“label”: “t:sections.all.content_text.button_type.options__2.label”
},
{
“value”: “link”,
“label”: “t:sections.all.content_text.button_type.options__3.label”
}
]
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 0,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “px”
},
{
“type”: “range”,
“id”: “padding_bottom”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 0,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “px”
},
{
“type”: “checkbox”,
“id”: “reset_spacing”,
“label”: “t:sections.all.reset_spacing.label”,
“default”: false
}
],
“max_blocks”: 25,
“blocks”: [
{
“type”: “collection”,
“name”: “t:sections.collection-tab.blocks.collection.name”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “t:sections.collection-tab.blocks.collection.settings.tab_name.label”,
“info”: “t:sections.collection-tab.blocks.collection.settings.tab_name.info”
},
{
“id”: “collection”,
“type”: “collection”,
“label”: “t:sections.all.collection_item.select_collection”
}
]
}
],
“presets”: [
{
“name”: “t:sections.collection-tab.name”,
“blocks”: [
{
“type”: “collection”,
“settings”: {}
},
{
“type”: “collection”,
“settings”: {}
}
]
}
]
}
{% endschema %}

The products showing in here fine

[EBOOST]

Hi,

You need select collection in customize. And this one only apply for free themes( Dawn theme, trade theme , craft theme, sense theme …)

[MMO1]

@EBOOST Hi, the code doesn’t seem to work on Dawn… None of the product photos are showing up for me, unless I have a separate native Featured Collection section on the same page

@hallelujah Were you able to figure out how to implement this?

Thank you both!

[EBOOST]

Hi @MMO1 ,

This code for Dawn theme 15.0.0. You need go to admin-> theme → customize → Collection tab section → add tab → add title & select collection.

[kdwebcreatives]

@MMO1 is correct, the product photos only show if there is a separate native Featured Collection on the same page.