Move the Product Description (Debut theme)

rubyfriday
Shopify Partner
22 0 3

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

Replies 26 (26)

oscprofessional
Shopify Partner
15834 2369 3072

Hello @rubyfriday,

For that You have to customize product-template.liquid

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

French
New Member
5 0 0

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:

 

Screen Shot 2020-04-18 at 16.18.08.jpg

 

Thanking you in advance! 

 

PS: I know the product images are too large 😉 

oscprofessional
Shopify Partner
15834 2369 3072

Hello @French,

Can you please share your site url

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
French
New Member
5 0 0

@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
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

French
New Member
5 0 0

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
Visitor
1 0 1

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

 

feeel2.jpg

 

MkdMaya
Excursionist
14 0 3

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

French
New Member
5 0 0
i never sent a message on 1/2.. who is sending messages to you
nicolejones1995
Visitor
1 0 0

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:  

 

Screen Shot 2020-08-05 at 3.09.20 PM.png

 

 

 

 

 

 

 

 

 

 

This is what it is supposed to look like: 

Screen Shot 2020-08-05 at 3.29.27 PM.png

Let me know! Thank you so much.

Puy
Shopify Partner
17 0 2

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.

Screen Shot 2020-11-23 at 21.26.33.pngScreen Shot 2020-11-23 at 21.32.12.png

Please advise! And thank you in advance.

Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

EasyThemeEditor
Excursionist
19 1 3

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!

Want to edit your shop's website without writing a line of code? Try Easy Theme Editor.
Want to get Easy Theme Editor for free? Email us at code.monkeys.69@gmail.com with your shop link and we'll set you up!
victorproducts
Visitor
3 0 0

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?

Bo
Shopify Staff (Retired)
1793 196 467

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 

To learn more visit the Shopify Help Center or the Community Blog.

victorproducts
Visitor
3 0 0

@Bo - Debut

Bo
Shopify Staff (Retired)
1793 196 467

Hey there, @victorproducts 

 

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

 

All the Best,

Bo

To learn more visit the Shopify Help Center or the Community Blog.

victorproducts
Visitor
3 0 0

Hi @Bo,

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

Bo
Shopify Staff (Retired)
1793 196 467

Thank you! You will need to follow these steps: 

1. Go to Online Store > Actions > Edit Code. 

2. Open the product-template.liquid file in the Sections folder.

3. Find the following code and cut it:

 <div class="product-single__description rte">
          {{ product.description }}
        </div>

4. Paste the code right above the following code on line 141:

{% capture "form_classes" -%}
            product-form product-form-{{ section.id }}
            {%- unless section.settings.show_variant_labels %} product-form--hide-variant-labels {% endunless %}
            {%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
            {%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
          {%- endcapture %}

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

To learn more visit the Shopify Help Center or the Community Blog.

IRN
Visitor
3 0 0

Hey @Bo ,

Hoping you can assist. I need to move the description below Buy It Now button. 

My store URL is: https://billiardlightstore.com/products/mardian-tiffany-pool-table-light

Password: skeely

TIA

Bo
Shopify Staff (Retired)
1793 196 467

Hey there, @IRN 

 

It looks as though you have some custom code in your theme to display an estimated time of delivery, are you looking to switch your product description and this shipping information around? I would advise against this as our UX team has found that having the shipping estimation as easily visible as possible i.e. right under the buttons, would be optimal for encouraging checkouts. I am unable to assist you with this as this added code was not added by me and so, I do not know what has been added and where. I would recommend reaching out to whomever made this customization fot you directly or alternatively, hiring a Shopify Expert.

All the Best,

Bo 

To learn more visit the Shopify Help Center or the Community Blog.

UnicGo
Tourist
8 0 1

solved

Roen
Visitor
1 0 0

Hi! This was super helpful, however, once complete, the description appears in a weird format. I would like it to be bullet point-form.... if possible. 

Theme is Supply. 

Site is : https://shop.oultoncollege.com/products/hoodie

 

can you help?

gulppp
Visitor
1 0 0

Hi Bo,

 

Thank you for the tutorial. I would also like to do this but only on a specific group/collection of products is this possible? If so please could you advise how?

 

Very much appreciated. Thank you!

 

Richie.

Bo
Shopify Staff (Retired)
1793 196 467

Hey there, @gulppp 

 

That is a really great question. In order to do this for only specific products, you will need to create an alternate template for your products. This guide goes through doing just that in great detail. Have a look and try it out, let me know if you need any support regarding this. 

 

All the Best,

Bo 

To learn more visit the Shopify Help Center or the Community Blog.