Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Can I move the product description above the 'Add to Cart' button in the Debut theme?

Solved

Can I move the product description above the 'Add to Cart' button in the Debut theme?

SULTRYSTYLE
Visitor
3 0 0

 

Hello,

I am using the debut theme and i wanted to know if it is possible to move the product description above the "add to cart" button? 

SULTRYSTYLE_0-1605082888206.png

 

 

Accepted Solution (1)

Bo
Shopify Staff (Retired)
1793 197 469

This is an accepted solution.

Hey there, @SULTRYSTYLE 

 

Bo here from Shopify Support! 

 

Great question! I was able to figure out how to do this by moving some code within the Debut theme. That said, I did speak with the themes team regarding this and they have found that having the Add to Cart button appear before the description actually increases conversions. Having it placed higher on the page ensures that the customer sees it immediately in will be more inclined to click it - especially if you have any products with longer descriptions - just something to consider! 

 

Steps:

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

2. Open the product-template.liquid. 

3.  Find {{ product.description }} and then copy and remove the following code:

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

 

4.  Find  <div class="product-form__error-message-wrapper and paste the code right above it. The finished code will look like this:

5. Click Save. 

Your product page should now look something like this:

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.

View solution in original post

Replies 2 (2)

Bo
Shopify Staff (Retired)
1793 197 469

This is an accepted solution.

Hey there, @SULTRYSTYLE 

 

Bo here from Shopify Support! 

 

Great question! I was able to figure out how to do this by moving some code within the Debut theme. That said, I did speak with the themes team regarding this and they have found that having the Add to Cart button appear before the description actually increases conversions. Having it placed higher on the page ensures that the customer sees it immediately in will be more inclined to click it - especially if you have any products with longer descriptions - just something to consider! 

 

Steps:

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

2. Open the product-template.liquid. 

3.  Find {{ product.description }} and then copy and remove the following code:

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

 

4.  Find  <div class="product-form__error-message-wrapper and paste the code right above it. The finished code will look like this:

5. Click Save. 

Your product page should now look something like this:

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.

zzandria
Visitor
1 0 0

Hi Bo! This was really helpful! I have a follow up question. I recently put a description split into my code. Is there a way to move only the first part of my description above the buttons, and have the rest below the media running horizontally still? I have attached the section that pertains to my description. 

descriptionsplit.PNG