Move product description outside of the 'Product Information' box without effecting SEO - Dawn 12.0

[coalfield]

I'm looking to move the product description from its current position on product pages using dawn 12.0 theme. My product descriptions tend to be quite long and this causes a lot of scrolling on the page due to the fact that the product description on dawn only covers 50% of the page width, with the other half being taken for images.

I would like to move the description to take up the full width of the page below the product information area that it is currently listed in.

Please see the image below of what I'm looking to achieve however I'm conscious this description field is used for seo and one to avoid changing anything that could harm its visibility in the search engines.

Any advice appreciated!

url example: 

https://gpuconnect.com/products/asus-rtx-3070-dual-7-pin-2x-4-pin-gpu-fan-adapter-converter-cable-de...

[Lee-Strong-SEO]

Hi @coalfield,

Great question about optimizing the layout of your product pages on the Dawn 12.0 theme. You can indeed move the product description to a full-width section below the product information area. This can be achieved by modifying your theme's layout.

First, you'll need to remove the existing description block from your current layout. This can be done through the theme editor. Next, you'll want to create a custom liquid section for your product description. This can be a bit technical, but essentially, you'll be adding a new section where you'll insert the liquid code {{ product.description }}. This code pulls in the product description and displays it in the new section you've created.

Regarding SEO, you're right to consider the implications of changing the layout. However, the good news is that as long as the product description is visible when the page initially loads, moving it to a different part of the page shouldn't negatively impact your SEO. Google crawls and indexes the entire content of a page, so the placement of the description, while important for user experience, doesn't typically affect its visibility to search engines.

Hope this helps, and best of luck with your website optimization!

[BSS-Commerce · Accepted solution]

Hi @coalfield 

Please follow these steps: Admin Shopify -> Sales Channels -> Online Store -> Themes -> click ... ->Edit Code

1. select global.js file -> write the code below:

if(window.location.pathname.includes('/products')){
   const interval = setInterval(()=>{
        const discription_elm = document.querySelector('.product__description.rte');
const product_area = document.querySelector('.page-width .product');
if(product_area && discription_elm){
    product_area.after(discription_elm)
    clearInterval(interval)
}
    }, 100)
}

2. select base.css -> write the code below:

.product__description.rte{
 margin-top: 30px;
}

Result:

Hope it helps @coalfield 

[coalfield]

Thank you so much that worked a treat, thanks for taking the time to write this its really appreciated!

[analita]

That worked perfectly!!! Thanks!!
One question, when I use an app, like TinyTabs, the description comes back to the right column again. Is there any way that the description stays at the bottom when you use apps for product description tabs?

[skatingtoolman]

Worked like a charm. I simply added the code after the very last line in each file and voila!

[supercomonline]

I'm using the Dawn theme on our Shopify store, and I want to display the product description properly for our customers. I’ve added the necessary code, but the issue still persists. I’ve attached a screenshot for reference. Could you please review the code I added and let me know if there's any mistake or if the code was correct? please refer to our store 1f3083-81.myshopify.com

Any guidance would be appreciated!

Thanks in advance!