How to make product page going side to side on Dawn

Store Design
1

Hey, I would like to make my page like this website, the big picture on one half and text on other side

This is my website
This is my website3600×1944 245 KB

this is what I want to recreate
this is what I want to recreate3600×1944 512 KB

2

Hi @robert_swag

This person is using the Dawn theme, and I noticed that the Dawn theme already has a built-in two-part layout, just like what they want—one side for the image and the other for the information.

Best,

Daisy

3

You are right, but as you can see they have it split right in the middle and I don’t know how to do that, also I would like to make the image big like theirs and have it going all the way to the sides

4

Hi @robert_swag

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (min-width: 1024px){
product-info .page-width > .product > .grid__item.product__media-wrapper {
    width: 80% !important;
    max-width: unset !important;
}
product-info .page-width > .product > .product__info-wrapper.grid__item {
    width: 20% !important;
}
}

Here is the result:

image_720.png
image_720.png720×452 117 KB

This code is only applied to the desktop version.

It has two parts: currently, the image takes up 80%, and the information takes up 20%. You can adjust these percentages to your desired ratio by modifying the code.

I hope this helps

Best,

Daisy

5

Thank you this works for the image size well, but I would like to have it more like this:

  1. image is after your code 2. I made in photoshop to showcase.

1.jpg
1.jpg3600×1930 170 KB

ě.jpg
ě.jpg3600×1930 174 KB

Is there a way to make it like this

6

Hi @robert_swag

Please add this code in the same position

product-info > .page-width {
    max-width: unset !important;
}

Result:

image_720.png
image_720.png720×253 72.3 KB

The image currently has a smaller width than its height.

So, if it’s displayed at full width, it will be cropped at the edges. If it’s not, the image will be resized and appear smaller.

I hope this helps

Best,

Daisy

7

Thank you very much I edited some things and now it looks exactly how I wanted to