Need help redesigning Dawn product page layout – looking for code guidance (non-developer)

Hi everyone,

I’m using the Dawn theme and I’m struggling with redesigning the product page layout beyond what the Theme Editor allows.

Important context first:
:backhand_index_pointing_right: I’m not a developer. I’m comfortable editing content and small settings, but I honestly don’t have enough technical knowledge to safely restructure Liquid files on my own, and I’m afraid of breaking something.

What I’m trying to achieve is a more clean, editorial-style product page, with:

  • Strong focus on the product image

  • Product title + subtitle in Montserrat, regular weight (not bold), dark grey / anthracite

  • One main Add to Cart button only

  • No express checkout buttons, loyalty badges, subscription UI, or “bestseller” labels

  • Product description placed below the main product area instead of next to the image

  • Overall minimal and premium layout

Important constraints:

  • I’m using a quantity discount app (Pumper) and its block must remain unchanged

  • I want to stay on Dawn, not rebuild the page with a page builder

  • The Theme Editor gives me very limited control over layout order, spacing and typography

My main problem:
I don’t really know where to start without breaking the product page:

  • Should I create a new product template?

  • Which sections/files are safe to modify?

  • Is this mostly a Liquid layout issue, or can this be handled with CSS?

  • What is the safest workflow for someone who is not a developer?

Would anyone be willing to help by providing example code or guidance, or even a basic product template structure that I could adapt?

Any advice, pointers, or sample code would be incredibly helpful.

Thanks a lot!

4 Likes

Hey @Dia26

If you’re working on a redesigning the product page then yes the safest approach will be to duplicate your product template and do all of the changes in the duplicated template.

Regarding your section modification, honestly I don’t recommend you doing any code changes in any section file since you’re not familiar with coding so what I would suggest you is to take the help of either a Shopify developer or let AI do the job for you.

In short the safest workflow for you would be to do the redesigning from the theme editor instead of coding and if coding is needed then make sure you duplicate your whole theme and work on the duplicated version so even if you end up breaking something then it won’t affect your live website.

If you require any help from me, I’ll be happy to help you out.

Cheers,
Moeed

1 Like

thanks for your reply, that makes sense in theory.

My problem is more practical though:
I honestly can’t find where the actual product template/section lives in Dawn in a way I can safely duplicate or work with.

I’ve already created several custom sections and pages (with the help of ChatGPT), so I’m not completely unfamiliar with Shopify’s structure.
However, when it comes to the product page, I’m stuck:

  • I don’t see a clear product.liquid file to duplicate

  • I can’t find a “main product section” that I can copy and assign manually

  • I also don’t see a place where I can tell Shopify “use this new Liquid/section for the product page”

In the Theme Editor, the product page feels very locked down — I can barely change block order, typography or layout, and that’s why it currently looks pretty bad.

So my confusion is:

  • Where exactly is the product page defined in Dawn?

  • Which file or section am I supposed to duplicate to safely experiment?

  • How do I correctly assign a duplicated product template/section to a product?

Right now it feels like I’m missing a fundamental step in how Dawn handles product templates.

Any clarification would really help — especially from a Dawn-specific perspective.

Thanks a lot!

You don’t need to edit the code to duplicate your product template.

In the theme editor, you’ll see a “Create template” button

Then enter the name of your duplicated template and it should be based on your default product template.

and there you go, now you have a new product template in which you can do all your work on.

Best,
Moeed

2 Likes

Thanks a lot for the explanation, that really helped.
I’ve now created a duplicated product template and assigned it to the product.

What I’m still confused about is how the Liquid section is actually linked to the new product template.
I duplicated main-product.liquid and made my changes there, but I’m not sure how to tell Shopify that this new product template should use my duplicated Liquid section instead of the original one.

Since I’m not a developer, I’m a bit afraid of breaking something and I’m not fully sure where and how the section is connected inside the JSON template.

Could you clarify how to properly link the duplicated main-product section to the new product template?

Thanks again for your help!

Create a new test product or just go to an existing one if you aren’t live yet, look towards right hand column where you add tags for your product.

You will see a drop-down to select from a list of templates you have created, select the new template and now this product will be according to the new template you have created while not disturbing others.

Now any changes you make to the template either via theme code or customizer will only affect this product which uses the new template.

Best

2 Likes

However, in the frontend the product page still looks exactly like before and is clearly rendering the original main-product layout.

I’m assuming that the connection between the new page template and the duplicated Liquid section is missing. It feels like the new template is still using the default main-product section instead of my duplicated one.

If you have selected the right template from the drop-down. Now open the exact product template from the customizer and make changes to it.


From the customizer open this drop-down for products, select your new template and make changes to it.

Once selected go forward and make changes even if you commit a mistake it won’t effect your main product template.

1 Like

You’re right to be cautious. The safest way to redesign a Dawn product page without breaking anything is to:

  • Create a new product template and test on one product only

  • Do most of the work with CSS, not Liquid

  • Use the Theme Editor for block order; avoid touching app code (especially Pumper)

  • Hide express checkout buttons and badges via settings or CSS

  • Style typography, spacing, and layout in CSS to get the clean, editorial look

  • Duplicate your theme and make small changes step by step

This approach keeps your live store safe while letting you achieve a minimal, premium product page on Dawn.

1 Like

Hi, thanks for your help so far — I followed the recommended steps:

  • Created a new product page template based on the default product page

  • Duplicated the main-product section (Liquid)

  • Made my layout and styling changes in the duplicated Liquid file

  • Assigned the new page template to the product in the product settings

However, in the frontend the product page still renders the original main-product layout.
My duplicated Liquid section is never applied, even though the new page template is correctly assigned to the product.

So my question is:
Where exactly is the link between a product page template and the main-product Liquid section defined in Dawn?

You don’t need to copy or duplicate the main-product.liquid file. Just open the new product template from the customizer and make changes to that. Then look to the product you assigned the template.

May be a short clip of how you are doing it will help.

1 Like

you mean I should do the changes in the CSS field (right corner?)
as I can not apply any changes within the theme adjustments (there are nearly no possibilities to change anything).

Thanks a lot for your detailed explanation — I really appreciate the effort.
Unfortunately, I can’t see the inbox message you mentioned anywhere.

Just to clarify what I’ve already done (and where I’m stuck):

  • I duplicated main-product.liquid

  • I renamed the duplicate (e.g. main-product-vinopure)

  • I created a new product template and assigned it to one test product only

  • In the product admin, the new template is clearly selected

However, in the frontend the product still behaves exactly like before.
It always uses the original main-product layout, and my duplicated file is never reflected.

That’s why I’m confused:
It feels like the new page template is not actually connected to the duplicated Liquid file, and I don’t understand where that connection is supposed to happen.

Is it possible that renaming the duplicated main-product file prevents it from being used?
Or am I missing an explicit step where the new product template needs to be linked to the duplicated section?

I’m not a developer, so I’m trying to stay on the safest path and clearly understand where this link is defined. Right now it looks correct in the admin, but not on the storefront.

Any clarification would really help — thank you again for your patience.

1 Like

I’m honestly getting quite desperate at this point, because I’ve followed all the steps but it still doesn’t work and nothing changes on the frontend.

I have:

  • duplicated the product section (main-product)

  • created a new product template

  • assigned that template to a product

But the new layout is not visible at all – the product page always seems to fall back to the original layout.

I’m not a developer, and I think my main problem is that I don’t understand where exactly which code needs to go and how the pieces are actually connected in Dawn.

Would someone be willing to:

  • send me a working example (Liquid + JSON)

  • and clearly tell me where exactly to paste each part?

I can also share:

  • the example product page layout I want to achieve

  • and my current product page for comparison

I’m not trying to build something complex — I just want a clean, editorial-style product page, but right now I’m stuck.

1 Like

Hi @Dia26

Okay, could you please send me collaborator access to the code? I’ll check it and then give you a proper update.

Best regards,
Devcoder :laptop:

1 Like

@devcoders thank you, I will do that - where shall I send it to?

1 Like

Hi @Dia26

devcodersp@gmail.com

1 Like