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: “

   {{ product.description }}
   ” 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

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.

[Puy]

Hello, Bo and all!

My similar query but the one that I would move in the product pages would be the custom content. I know that you can just drag to rearrange it in the Homepage but for the product pages, it does not have that option.

I would like to have the custom content sit above the reviews so it would look better on mobile, like this.

Please advise! And thank you in advance.

[Bo]

Hey there, @Puy

I would love to help with this. In order to do so, could you please send me a link to this page in question so that I can take a look at the code natively using Google’s inspect tool? I do need a native link to do so.

All the Best,

Bo

[MkdMaya]

Hello Chenhong,

Did you manage to move the description under the image with Debut theme?
And I interesseted as well on how did you manage to create different tabs like ‘products benefits’ , ‘usage’ etc , It seems like the basic it only one tab.

Thank you for advance
Maya

[EasyThemeEditor]

Hey @Puy ,

Unfortunately we don’t have access to this theme, but we see that if you swap the shopify-section-custom-content with shopify-section-feature-columns, probably in product.liquid, or a similar file, you’ll be able to see them swapped.

Hope this helps!

[victorproducts]

Hi Bo,

When I try to do that and hit “Save” I get this error message: This file contains the following errors: Line 271 — Liquid syntax error: Unknown tag ‘schema’. Do you know what I’m doing wrong?

[French]

i never sent a message on 1/2.. who is sending messages to you

[Bo]

Hey there, @victorproducts

This tutorial is nearly a year old so the version of the theme you are using may be too different from the version in this tutorial. Could you please confirm the name of your theme and provide me with a link to your store so that I can do some digging into this for you? Thank you!

All the Best,

Bo

[victorproducts]

@Bo - Debut

[Bo]

Hey there, @victorproducts

I do also need a link to your store, thank you.

All the Best,

Bo

[victorproducts]

Hi @Bo ,

Here’s the link to our store: https://victor-products-co.myshopify.com/