Display collections side by side instead of stacking them on main page on mobile?

brookeatgravel
Tourist
8 0 2

Hi everyone!

I am trying to make it so that we can use "featured collections" on our main page. I would like them to be 2x2 next to each other instead of stacking. 

Right now we are using Startup and Pacific, both Pixel Union themes. I can't get any answers from them at the moment. 

Thanks!

Replies 34 (34)

KetanKumar
Shopify Partner
36845 3636 11969

Hello, @brookeatgravel 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
brookeatgravel
Tourist
8 0 2

Thank you so much for your response. Here is a preview of the theme: 

https://www.graveltravel.com/?_ab=0&_fd=0&_sc=1

KetanKumar
Shopify Partner
36845 3636 11969

@brookeatgravel 

Thanks for it

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media (max-width: 720px) {
.row-of-1 .home-collection-list-item, .row-of-2 .home-collection-list-item, .row-of-3 .home-collection-list-item {
    width: 50%;
    margin-top: 0;
    margin-bottom: 20px;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nakanotakuya
Tourist
11 0 2

@KetanKumar 

Hello.
I'm struggling with the same thing.
My theme is the DAWN theme, but
1. go to Online Store->Theme>Edit code
2. go to Asset->/theme.scss.liquid->paste below code at the bottom of the file.
I don't have "theme.scss.liquid" in my assets.
What should I do?

nakanotakuya
Tourist
11 0 2

Hi all.

I would like to be able to use the "Collection List" on the main page. Instead of displaying the collections stacked on top of each other, I want to display them side-by-side in 2x2.

I am currently using the Dawn theme.

Thank you very much.

KetanKumar
Shopify Partner
36845 3636 11969

@nakanotakuya 

yes, please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
charlotteli82
Tourist
10 0 3

Hi there,

 

I'm also using the Dawn theme and trying to display a collection list where on mobile the images are stacked side by side (2 rows of 2) rather than stacked on top of each other. I also can't find the theme.css.liquid file (like the previous user with this issue) - so have hit a block.

 

I am currently working on a development theme so it's not yet live.

 

Can you advise?

 

Thanks!

Charlotte

KetanKumar
Shopify Partner
36845 3636 11969

@charlotteli82 

yes, please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
charlotteli82
Tourist
10 0 3

www.tocoswim.com (but the site you will see is just the current live prestige theme - i am working on the dawn theme on a development)

 

thanks!

C

KetanKumar
Shopify Partner
36845 3636 11969

@charlotteli82 

oh so can you please share dawn theme store url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
charlotteli82
Tourist
10 0 3

Yes - let me know if this works: https://tocoswim.com/?_ab=0&_fd=0&_sc=1

 

Thank you!

Charlotte

KetanKumar
Shopify Partner
36845 3636 11969

@charlotteli82 

thanks but i need dawn theme on a development preview url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
charlotteli82
Tourist
10 0 3
KetanKumar
Shopify Partner
36845 3636 11969

@charlotteli82 

thanks for update, yes please add this code

1. Go to Online Store-> Theme->Edit code
2. Asset->/section-collection-list.css ->paste below code at the bottom of the file.

 

@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
    width: calc(50% - 3rem);
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
scranman
Excursionist
16 0 9

@KetanKumar 

Could you help me with the same issue? I am using Sense 2.0

https://znprgow8bcy00byr-55773429934.shopifypreview.com

 

I can get 2x2 on desktop, but I would also like on mobile. 

KetanKumar
Shopify Partner
36845 3636 11969

@scranman 

thanks for update, yes please add this code

1. Go to Online Store-> Theme->Edit code
2. Asset->/section-collection-list.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
    width: calc(50% - 3rem);
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
scranman
Excursionist
16 0 9

Thank you so much! Its amazing 😄 I really appreciate your help.

 

KetanKumar
Shopify Partner
36845 3636 11969

@brookeatgravel 

oh sorry for late here, thanks for update this one 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
walfaro90
Visitor
2 0 0

Hi I am having the same issue with my website, products do not stack, so ppl are forced to scroll when on mobile, my website is: www.Haulingcountry.com

walfaro90
Visitor
2 0 0
Anderson10
Excursionist
29 0 8

Hi @KetanKumar, would this code work for the Prestige also? Looking for the collection list to be side by side on mobile rather than stacked. 

 

https://frontiers-man.com/

 

Many thanks

Mark

KetanKumar
Shopify Partner
36845 3636 11969

@Anderson10 

oh sorry for that issue can you please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media (max-width: 640px) {
.CollectionList--grid {display: flex;}
.CollectionItem {flex: 50%; width: 50%;}
    }

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Anderson10
Excursionist
29 0 8

Thank you @KetanKumar.

 

Is there any way to set the height of the images. It now displays two per row but they seems really tall and skinny - see attached. 

 

Mobile.PNG

KetanKumar
Shopify Partner
36845 3636 11969

@Anderson10 

yes, please add this code

@media (max-width: 640px) {
.CollectionItem__Wrapper {
    height: 300px;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Anderson10
Excursionist
29 0 8

Works perfectly - thank you very much!

Anderson10
Excursionist
29 0 8

@KetanKumar - sorry, one last thing - is there a way to have only two per row? If i have 4 collections it seems to add them all - see here > 

 

Capture.PNG

KetanKumar
Shopify Partner
36845 3636 11969

@Anderson10 

Yes, please add this code

.CollectionList--grid {flex-wrap: wrap;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Anderson10
Excursionist
29 0 8

Perfect. Thank you again  😊

jaehome
Visitor
1 0 0

Hello, may I have assistance with this same issue. I’d like for the products to be side by side; 2x2 or possibly even 3x3 please sir. 
the url is as follows:

https://homegarments.com/?_ab=0&_fd=0&_sc=1

carla_5
Excursionist
58 0 6

Hi there 

 

I am currently working on shopify theme Dawn. I would like my collection list to be side by side on mobile instead of stacked. Could you please assist me?

 

Thanks

Carla

Regan90
Visitor
1 0 0

Hi there,

 

I have used this code to display collections 2x2 on mobile and it worked great. Only thing is when there is 3 collections it will display the third collection larger than the other 2. I am just wondering if there is a way to keep the collection images the same size?

 

Dawn theme

 

 

silentwinner
Tourist
8 0 1

Hey man thank you very much for the solution. can you now help me to expand the two card through the whole screen side by side so it fills the whole picture?

JessFried
Visitor
1 0 0

Hi there,

 

I'm having the same issue with my store! Would love to have our homepage collection grids showing as two collections at a time rather than one. https://themes.shopify.com/themes/lorenza/styles/modern/preview

 

Any help would be much appreciated!!

kk30
New Member
4 0 0

I'm trying to do the same on Galleria, any suggestions?