Product page design

[uncutgemsnl]

Hi everyone!

I have a question. I want to change something in my product page. I want the title and details of the product on the left side. The color/size and add to cart should be on the right. Now it looks like this:

And i want it to look like this:

store: https://uncutgemsnl.myshopify.com/

PW: shaupu

Theme is dawn

Thanks in advance! have a great day

ps: if you guys know why the images look blurry hmu. They were showing correctly before.

[The_ScriptFlow]

Hey @uncutgemsnl,

Could you please share the link of the reference website so that I can take a look and provide the solution based on the reference website.

[uncutgemsnl]

https://themes.shopify.com/themes/space/styles/saga/preview

[The_ScriptFlow · Accepted solution]

Based on the provided theme we can make the same layout in your store.

But need to do custom code in your theme file.

Would you like p/m me so that I can start work.

Thanks

[uncutgemsnl]

Yes i will PM you. Thanks

[Small_Task_Help]

Hi,

Hope this will help

Create a two‑column layout: Left = title & details, Right = color/size & add‑to‑cart. by doing following

- Edit the Product Template in Code and Rearrange HTML (main-product.liquid) to Create a New Layout

HTML code example for New Layout:

<div class="product-layout">
  <div class="product-left">
    <!-- Title -->
    {%- render 'product-title' -%}
    <!-- Description -->
    {%- render 'product-description' -%}
  </div>
  <div class="product-right">
    <!-- Variants (Size, Color), Add to Cart, etc. -->
    {%- render 'product-form' -%}
  </div>
</div>

- Add CSS for the New Layout