Move the Product Description (Debut theme)

[rubyfriday]

Hi

I am using the Debut theme and I would like to move the product descriptions up the page to sit under the title rather than at the bottom. Is there a menu option to do this rather than using coding?

Thanks

[oscprofessional]

Hello @rubyfriday,

For that You have to customize product-template.liquid

[Bo]

Hey there, @rubyfriday 

Bo here from Shopify Support! 

That is a great question, and @oscprofessional is correct, you will need to edit the code of the product-template.liquid to make this happen. There is something to consider before doing so. If you were to move the description to right under the product title, you would be moving the Add to Cart functionality lower down the page. Our themes are optimized for the best conversions and we have found that if a customer has to scroll to find the Ass to Cart, they are less likely to checkout. Just something for you to consider. 

This tutorial is specific to an unedited version of the Debut theme, (VERSION 16.3.0). We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial.

1. Go to Online Store > Current Theme > Actions > Edit Code. 
2. Open the Sections folder > product.template.liquid. 
3. Search for: "<div class="product-single__description rte"> {{ product.description }} </div>" and cut it. 
4. If you would like the description to appear after the title and price, you will need to paste it right after: 

           <h1 class="product-single__title">{{ product.title }}</h1>
   
             <div class="product__price">
               {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
             </div>
   
             {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
               <div class="product__policies rte" data-product-policies>
                 {%- if shop.taxes_included -%}
                   {{ 'products.product.include_taxes' | t }}
                 {%- endif -%}
                 {%- if shop.shipping_policy.body != blank -%}
                   {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                 {%- endif -%}
               </div>
             {%- endif -%}

5. The finished code will look like this: 

           <h1 class="product-single__title">{{ product.title }}</h1>
   
             <div class="product__price">
               {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
             </div>
   
             {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
               <div class="product__policies rte" data-product-policies>
                 {%- if shop.taxes_included -%}
                   {{ 'products.product.include_taxes' | t }}
                 {%- endif -%}
                 {%- if shop.shipping_policy.body != blank -%}
                   {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                 {%- endif -%}
               </div>
             {%- endif -%}
   <div class="product-single__description rte"> {{ product.description }} </div>
   

   
6. If you would like the description to appear before the price and policies you will need to post the description code immediately after the code for the title instead. It would look like this:  

   <h1 class="product-single__title">{{ product.title }}</h1>
   <div class="product-single__description rte"> {{ product.description }} </div>
   
             <div class="product__price">
               {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
             </div>

Once all that is done (either or) you can click save! 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,

Bo

[French]

Hi everyone!

I have quite the opposite problem

I want the description to be below the Add to cart button.

My code is customized (I bought the shop off of someone else) so I'm having issues finding the above mentioned lines in product-template.liquid

Here is a screenshot of my issue:

Thanking you in advance! 

PS: I know the product images are too large ;) 

[oscprofessional]

Hello @French,

Can you please share your site url

[French]

---

@oscprofessional wrote:

Hello @French,

Can you please share your site url

---

Hello! Thanks for your reply. It's https://prestej.com

Btw: I'm using Debut Theme

[Bo]

Hey there, @French 

I was just taking a look at your store and it does not appear to be using Debut - I was able to use the Chrome inspect tool to double check:

As this is a third party theme I would recommend reaching out to the developers of this minor edit as per this guide. 

All the Best,

Bo

[French]

Bonjour @Bo ,

Sorry my bad! It's the Prestige Theme 🙈

So my previous post is irrelevant to this whole thread. I apologize for that.

Thanks a lot for your help.

Best,

French

[chenhong]

Hi, i would like to move product description to below the item photo, can any one help?

[nicolejones1995]

I changed the code as recommended in this forum and it all worked out ok! However, there is a glitch with a few random product that have variants. The description appears to be in a weird description box for a few products. I have attached a screenshot and am seeking advice on how to get it out of this box. This is the weird description box that comes up:  

This is what it is supposed to look like: 

Let me know! Thank you so much.