How to make product grid more expanded

Store Design
, , , ,

Topic summary

A user seeks to enlarge their product grid display, which currently appears too small compared to a reference example. They are using the Dawn theme on Shopify.

Solution Provided:
Two respondents offer similar CSS code snippets to be added to the theme.liquid file within the <head> section. The code targets collection and search pages, adjusting grid layout properties:

  • Increases grid column count to 4
  • Sets maximum width to 100%
  • Adjusts column gap spacing

Follow-up Issue:
After successfully implementing the code, the user notices the filters are misaligned with the newly adjusted grid.

Updated Solution:
One respondent provides revised CSS that adds padding-left: 0 to the facets container, aligning the filters with the expanded product grid.

Status: Resolved with working code implementation.

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

JGBowie_0-1751335419520.png
JGBowie_0-1751335419520.png1906×873 430 KB

Wanting to make my product grid larger to a page mine are displaying really small for some reason would love help! like this example

https://eighthandco.com.au/collections/sale

Landon15

Using dawn

2

You can do that by adding this code to theme.liquid file below element

{%- if template.name contains 'collection' or template.name == 'search' -%}

{%- endif -%}
1 Like
3

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.

4

it worked! do you know how i would shift the filters to line up with the Newley adjusted grid?

5

Please update the code to this

{%- if template.name contains 'collection' or template.name == 'search' -%}

{%- endif -%}