view all subcollection button impulse theme

dazzlebysarah
Shopify Partner
26 0 0

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>

 

 

Replies 5 (5)

deepaksharma
Shopify Partner
448 62 92

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

 

deepaksharma_0-1709805616511.png

 

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
dazzlebysarah
Shopify Partner
26 0 0

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
Shopify Partner
448 62 92

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

deepaksharma_0-1709810590835.png

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!

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
dazzlebysarah
Shopify Partner
26 0 0

i already have my sub collection in the main collection. 

dazzlebysarah_0-1709812690138.png

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
Shopify Partner
448 62 92

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

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com