view all subcollection button impulse theme

[dazzlebysarah]

i have a collection and there are subcollections in it when we open the main collection it first show all the sub collections and then products. I want only 2 sub-collections in the mobile view and after that, I want to add a button to view all sub-collections

when a person click on the button the remaining collections will be visible on the same page, 

here is the URL of my website 
https://dazzlebysarah.com/collections/khussa-shoes-online

here is the code of the sub-collections.liquid

{%- liquid
case per_row
when 2
assign grid_item_width = 'medium-up--one-half'
when 3
assign grid_item_width = 'small--one-half medium-up--one-third'
when 4
assign grid_item_width = 'small--one-half medium-up--one-quarter'
when 5
assign grid_item_width = 'small--one-half medium-up--one-fifth'
endcase
-%}

<div class="grid grid--uniform{% unless settings.collection_grid_gutter %} grid--no-gutters{% endunless %}">
{%- for sub_collection_link in sub_collection_links -%}
{%- if sub_collection_link.url contains '/collections/' -%}
{%- liquid
assign lang_code_string = request.locale.iso_code | prepend: '/' | downcase
assign sub_collection_handle = sub_collection_link.url | remove: '/collections/' | remove: lang_code_string
assign sub_collection = collections[sub_collection_handle]
-%}
{%- if sub_collection != blank -%}
{%- unless parent_url == sub_collection.url -%}
{%- render 'collection-grid-item',
collection: sub_collection,
grid_item_width: grid_item_width,
collection_title: sub_collection_link.title
per_row: per_row
-%}
{%- endunless -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</div>

[deepaksharma]

hey there @dazzlebysarah 

By your description are you looking for something like this. If yes you can create a section and add those logic by the help of metafields and metaobject

[dazzlebysarah]

yes but I want to show only 2 subcollections in the mobile view and for the remaining collection  I want to add a button, the purpose is, when someone click on the button all the other sub-collections will appear beneath the first 2 collections 

[deepaksharma]

Hmm Something more like Read more button to reveal the rest subcollection later, wouldn't it fine if in mobile view it convert as slider something like this

because that showmore button thingy requires script and all that it will be time consuming for you.

But if you still want that I can make it happen as for the slider one I have a youtube video suggestion not my video watch this

If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

[dazzlebysarah]

i already have my sub collection in the main collection. 

the thing I want to do is to show only 2 collection in the mobile view and after these 2 sub collection I want to add a button. when you click a button remain collection will become visible

[deepaksharma]

You will be needing js script to make that possible you can take the help of tools like chatgpt and Gemini to make one or hire a developer