Solved

Change collection list carousel to grid

alghoulx
New Member
5 0 0

Hello, 

 

I use the pipeline theme. I am building a store with a large catalog and many collections. I want a page to be dedicated to a long list of collections. On desktop it looks nice as a grid, but on mobile it is only shown as a carousel which causes visibility issues when there are 100+ collections. How can I change the collection list on mobile to be a grid (for example, to look like a product list grid) instead of a carousel. I could not find settings to do this, so I assume it needs code editing. I want to clarify, NOT product list, but collection list.

 

Here is the link:

https://furnitureanddecorga.com/

 

This is urgent.

Thanks in advance!

Accepted Solution (1)

bss_ta_dev
Shopify Partner
2 1 0

This is an accepted solution.

This happened because of responsive config for mobile of this theme. You can try the following step to customize that: 

1. Go to Edit code of theme, find "theme.css" file and the boiled code in this img, then comment it by enter Ctrl+/ 

-> it'll remove responsive css of grid element in mobile

bss_ta_dev_3-1698653591067.png

 

The result will be:

 

 

bss_ta_dev_2-1698653515956.png

 

2. After that, you may want to customize font-size of title of collections card because it needs to be small to match with small card in mobile.

Add the following code after the commented code (any font-size you want)

 

 

.hero__content__wrapper p {
    font-size: 18px;
}

 

 

The result will be like:

bss_ta_dev_4-1698653896486.png

P/s: This theme is not free, so I can't directly edit its code to check. If these steps doesn't work, don't mind to tell me

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
7011 1326 1352

Hi @alghoulx 

It will need to edit theme code to do that so I recommend you contact support of this theme so they can do it for you.

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

bss_ta_dev
Shopify Partner
2 1 0

This is an accepted solution.

This happened because of responsive config for mobile of this theme. You can try the following step to customize that: 

1. Go to Edit code of theme, find "theme.css" file and the boiled code in this img, then comment it by enter Ctrl+/ 

-> it'll remove responsive css of grid element in mobile

bss_ta_dev_3-1698653591067.png

 

The result will be:

 

 

bss_ta_dev_2-1698653515956.png

 

2. After that, you may want to customize font-size of title of collections card because it needs to be small to match with small card in mobile.

Add the following code after the commented code (any font-size you want)

 

 

.hero__content__wrapper p {
    font-size: 18px;
}

 

 

The result will be like:

bss_ta_dev_4-1698653896486.png

P/s: This theme is not free, so I can't directly edit its code to check. If these steps doesn't work, don't mind to tell me

alghoulx
New Member
5 0 0

Thank you for your help! I will add that I needed to go down a bit more and do the same from row 8701 to 8774. With this addition, it worked perfectly. 

BSS-Commerce
Shopify Expert
3398 450 503

Hi @alghoulx ,

This happened because of responsive config for mobile of this theme. You can try the following step to customize that: 

 

1. Go to Edit code of theme, find "theme.css" file and the boiled code in this img, then comment it by enter Ctrl+/ 

-> it'll remove responsive css of grid element in mobile

bss_ta_dev_3-1698653591067.png

The result will be:

bss_ta_dev_2-1698653515956.png

2. After that, you may want to customize font size of the title of collections card because it needs to be small to match with a small card in mobile.

Add the following code after the commented code (any font-size you want)

.hero__content__wrapper p {
    font-size: 18px;
}

 The result will be like:

bss_ta_dev_4-1698653896486.png

 

Good luck @alghoulx !

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development