Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Change collection list carousel to grid

Solved

How can I convert a mobile collection list carousel into a 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
10261 2039 2110

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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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 Partner
3477 463 547

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency