Re: Move product description outside of the 'Product Information' box without effecting SEO - Dawn 1

Solved

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

coalfield
Explorer
49 3 16

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...

Screenshot 2023-11-23 141813.png

Accepted Solution (1)

BSS-Commerce
Shopify Partner
3477 463 527

This is an 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:

view (85).png

Hope it helps @coalfield 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

Lee-Strong-SEO
Shopify Partner
127 19 26

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!

 

Strong SEO

This simple trick can boost your store to the top of Google - Try it Now

BSS-Commerce
Shopify Partner
3477 463 527

This is an 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:

view (85).png

Hope it helps @coalfield 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
coalfield
Explorer
49 3 16

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

analita
Visitor
1 0 0

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?