Stack Collection Image/Products on Mobile in Dawn Theme

Store Design
, ,

Topic summary

A user seeks to change their Dawn theme collection page so product images stack vertically (one per row) on mobile devices instead of displaying two per row.

Proposed Solution:
Another user suggests:

  1. Remove width from the HTML
  2. Navigate to Online Store → Edit Code
  3. Locate the theme.liquid file
  4. Add specific code before the closing </head> tag

Current Status:
The original poster is struggling with implementation, specifically:

  • Unclear where to remove the width from HTML
  • Uncertain about correct code placement
  • The solution hasn’t worked yet

They’ve requested more detailed, step-by-step instructions to successfully apply the fix. The discussion remains unresolved and awaiting clearer guidance.

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

I’m looking to have my collection images/products stack on mobile vs being two in a row as it is currently. Is there a simple fix for this? My site is: https://alohalovelyshop.com/

Screen Shot 2024-01-10 at 5.15.15 AM.png
Screen Shot 2024-01-10 at 5.15.15 AM.png730×1026 672 KB

1 Like
2

Hi @julieestrella

You can follow the following steps:

  1. Please remove the width from the html.
  2. Please go to the Online Store.
  3. Then Edit Code.
  4. Please find the theme.liquid file.
  5. Please add code before closing the tag tag.

laddisahsi_0-1704883343088.png
laddisahsi_0-1704883343088.png460×701 314 KB

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

3

How do I remove the width from the HTML, where? I tried to insert the code but not sure if I am placing it correctly, probably not because it didn’t work. Can you please provide a little more detail in your instructions? thank you!!