DAWN THEME: MOBILE 2-COLUMN FORMAT

Topic summary

Goal: Change Dawn theme’s mobile product grid from 1 to 2 columns to show four products on first view, and keep product info (name/price) always visible instead of only on hover.

What worked so far:

  • Adding a mobile media query to set product-grid items to 50% width (two columns). One approach placed CSS before in theme.liquid targeting a specific product-grid section; the OP confirmed this achieved two columns.
  • Alternatives suggested adding similar CSS in base.css for #product-grid .grid__item at ≤768px, and another option that only affects the homepage collection. Screenshots showed mobile/desktop results.

Latest update on image sizing:

  • To make images fully visible with a 4:5 ratio, a reply proposed adding aspect-ratio: 4 / 5 to the grid items within the mobile media query. The OP has not yet confirmed this fix.

Limitations/notes:

  • Some solutions target a specific section ID or only the homepage collection, which may limit where the changes apply.
  • The request to keep product info always visible (not just on hover) was not addressed. Status: partially resolved; discussion appears open.
Summarized with AI on December 23. AI used: gpt-5.

Hi, i am trying to re-format my shop page from 1 column to 2.

However, I am struggling with the ratio as I’d like to squeeze 4 products when landing on the page.

My site is koredoko.com

and my end goal is like coucouintimates.com

Does anyone also know how to keep my product info always present, the product name and price only appear on hover,

1 Like

Hello @skymochi

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ #shopify-section-template--15425262780489__product-grid .grid--1-col-tablet-down .grid__item{ width: 100%; max-width: 50% !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like

Hi @skymochi

Check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Hi @skymochi

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width: 768px){
#product-grid .grid__item {
width: 100%;
max-width: 50% !important;
border: solid 1px #000;
}
}

1 Like

Hi Niraj,

Thanks! This worked, do you know how to shorten each grid so that image is fully visible and ratio is closer to 4:5?

Hi!

Thanks! This worked, do you know how to shorten each grid so that image is fully visible and ratio is closer to 4:5?

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { #shopify-section-template--15425262780489__product-grid .grid--1-col-tablet-down .grid__item { aspect-ratio: 4 / 5; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Please Mark it my both solution as Accepted Solution.