How can I adjust columns in the Dawn Theme collection list?

Store Design

Topic summary

Goal: set collection list in Shopify’s Dawn theme to 4 columns on desktop and 2 columns on mobile.

Solution provided: add CSS media queries in Assets > section-collection-list.css.

  • Desktop (≥750px): target .collection-list.grid–3-col-tablet .grid__item and set max-width and width to calc(25% - var(–grid-desktop-horizontal-spacing) * 2 / 2), achieving four columns.
  • Mobile (≤749px): set .collection-list .collection-list__item to width: calc(50% - 3rem), achieving two columns.

Implementation steps:

  • Online Store > Theme > Edit code.
  • Open Assets > section-collection-list.css.
  • Paste the code at the bottom of the file.

Notes: the code snippet is central; it uses CSS media queries (rules that apply at specific screen widths) to control grid item widths.

Outcome: another participant confirmed the solution successfully produced a two-column layout on mobile in Dawn, indicating it works as intended.

Status: resolved; no outstanding questions or disagreements.

Summarized with AI on January 31. AI used: gpt-5.
1

Hi!

https://www.nourichemedspa.com/collections/eye-concerns

Need help

Would like 4 Columns for collection lists on website

and

2 columns for mobile..

Can anyone please help?

1 Like
2

@lady7314

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 (min-width: 750px) {
.collection-list.grid--3-col-tablet .grid__item {
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 2 / 2);
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 2 / 2);
}
}
@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
    width: calc(50% - 3rem);
}
}
3

I am not the OP but I have been searching for an hour to find a solution to get two columns in Dawn theme, and this is the only one that worked! Thank you so much. And thanks to OP for asking the question!