Can't figure out how to stack text below image on mobile

Store Design
,

Topic summary

Main issue: On Shopify’s Dawn theme, the mobile product page uses a two‑column layout with small images. The goal is a larger image slider centered at the top, with product title, description, and variant selector stacked underneath.

What was tried:

  • A contributor provided steps to edit theme.liquid (Online Store > Edit code > theme.liquid) and add custom code above to enforce a stacked, single‑column mobile layout.
  • A result screenshot shows the image on top with details below, addressing the core layout concern.

Current outcome:

  • OP reports the solution is “almost perfect,” but images appear too wide and are cropped at the bottom.
  • Requests a tweak to keep images in their original aspect ratio on mobile.

Status:

  • Partially resolved. Layout stacking achieved; image scaling needs refinement.

Notes:

  • Screenshots and the shared code snippet are central to understanding the visual change and the remaining image‑ratio issue.
Summarized with AI on January 1. AI used: gpt-5.
1

Hi there,

My product pages on mobile aren’t great for converting customers as the images are too small and the layout feels awkward in 2 columns, so I’d like to get the image slider to be larger and at the top in the middle, then for the product name, description, and variant selector to appear underneath the image. I’m using the dawn theme, website is http://thehoneydewlounge.com/, and I’ve attached how my mobile product pages look at the moment

IMG_6593.PNG
IMG_6593.PNG1179×2556 290 KB

Thank you in advance!

2

Hey @JennMaxwell

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

RESULT:

Moeed_0-1712608272631.png
Moeed_0-1712608272631.png357×776 197 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

oh my gosh this is almost perfect! Is it possible to keep the images at their original ratio? with this code, they show as a bit too wide and the bottom is cut off. thank you so so much for this