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

Store Design

Topic summary

Store owners want to display collection lists in a 2x2 grid layout on mobile devices instead of the default stacked (single column) arrangement.

Primary Solution (Dawn Theme):
Add CSS code to section-collection-list.css:

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

Theme-Specific Solutions:

  • Startup/Pacific themes: Add code to theme.scss.liquid
  • Prestige theme: Add code to theme.css with additional height controls and flex-wrap properties to prevent tall/skinny images and ensure proper 2x2 wrapping
  • Sense 2.0: Uses same approach as Dawn theme

Common Issues Addressed:

  • Images appearing too tall/skinny (solved with height constraints)
  • Odd-numbered collections displaying incorrectly (fixed with flex-wrap: wrap)
  • Missing CSS files in newer themes like Dawn (requires different file paths than older themes)

Status: Multiple users successfully implemented the solution. Some users still awaiting assistance, including requests for Galleria theme and custom liquid layouts. The discussion remains active with ongoing support requests.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

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!

1 Like
2

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.

3

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

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

4

@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;
}
}
5

@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?
6

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.

1 Like
7

@nakanotakuya

yes, please share store url

8

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

1 Like
9

@charlotteli82

yes, please share store url

10

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

11

@charlotteli82

oh so can you please share dawn theme store url

12

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

Thank you!

Charlotte

1 Like
13

@charlotteli82

thanks but i need dawn theme on a development preview url

14

Apologies - is this better? https://48en8yxsfx11xjx8-6073647192.shopifypreview.com

1 Like
15

@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);
}
}
16

@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.

1 Like
17

@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);
}
}
2 Likes
18

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

1 Like
19

@brookeatgravel

oh sorry for late here, thanks for update this one

20

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