Dawn Theme: How do I make a horizontal grid system on my product page?

Store Design

Topic summary

Goal: In Shopify’s Dawn theme, change the product page from a vertically stacked layout to a two-column layout with media on the left and product information on the right.

Context: The original poster shared a live product URL and password for reference.

Proposed solution: Add a small CSS tweak to the theme:

  • File: section-main-product.css
  • Code (for screens ≥750px): set .product__info-wrapper { padding-left: 2rem; }
    This appears to position/space the info area to the right of the media on larger screens (leveraging Dawn’s responsive layout).

Outcome: The original poster confirmed the change worked for their store and expressed thanks.

Current status: Another participant reported the solution did not work for them and requested further help. No follow-up guidance or alternative steps have been provided yet.

Notes: The key update is a CSS snippet; no structural HTML changes were suggested. The discussion remains partially unresolved for users with different setups or theme customizations.

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

At the moment all of the information on the product page is stacked vertically on top of each other. What I want is to have the images/media on the left side where it is right now. Then I want to move all the product information (beneath the images/media) to the right side.

Basically I want a grid system with 2 boxes horizontally next to each other. Media on the left and information on the right.

Please help med code this!

URL: https://pleasedontbetaken.myshopify.com/products/datacell-2

Password: lutred

Thanks!

1 Like
2

@SebastianL

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-main-product.css ->paste below code at the bottom of the file.
@media screen and (min-width: 750px) {
.product__info-wrapper {
    padding-left: 2rem;
}
}
1 Like
3

You absolute legend! Thanks a bunch!

1 Like
4

@SebastianL

its my pleasure to help us

1 Like
5

This solution did not work for me and I am trying to do something similar. Can you please help me?