Solved

How can I modify the product page layout in Debut theme?

Ivana_Jones
Visitor
3 0 0

Hello, I am using Debut theme. On the Product page I would like to move the product description to the left and limit its length to 80 characters max. Now, it's just a one long column.   

product description (class="product-single__description rte"), product reviews (id="shopify-product-reviews" ) and social sharing buttons (section.settings.show_share_buttons). I wrapped all these elements into one <div class="product-tab">, and changed CSS a bit in theme.scss.liquid like this so I can see what I am working with (see the picture below):

 .product-tab {
display: block;
text-align: left;
border: 10px solid blue;
background-color: red;
}

1) I would like to move the red box to the left, under the product image

2) I would like to make the red box wider and shorter (up to 80 characters, now it's max. cca 38 characters).

How do I do it? I checked the suggested Tabs, but saw no result. Maybe changing the whole grid would help? (I wasn't successful with flexboxes either, but I might be doing something wrong)

Thanks 🙂

Ivana_Jones_0-1603148116991.png

 

Accepted Solution (1)
JohnFromJotting
Shopify Partner
665 94 133

This is an accepted solution.

Hi @Ivana_Jones 

Move the description element to the outter divs, as shown in the picture.

If you want to make it half width of the element use width: 50%. If you want to make it in the middle, use margin auto. Code attached below

 

          <div class="product-single__description rte" style="width: 50%; margin: auto">
          {{ product.description }}
        </div>

 

 

Defineify_0-1603151093423.png

 

final result:

Defineify_1-1603151161018.png

 

Any other further edits would be more of a customization space, you would need to hire a developer. My email is below if you wish to speak.

 

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

View solution in original post

Replies 6 (6)

JohnFromJotting
Shopify Partner
665 94 133

Hi @Ivana_Jones

Do you mean you want to put the description on its own and have it full length below the add to cart and pictures? I added a picture for reference

 

Defineify_0-1603149392560.png

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

Ivana_Jones
Visitor
3 0 0

@JohnFromJotting yes, this is how i would like to do the layout. but also make the text shorter - to the half of the screen width only, up to the word 'gumdrop-' or so. could you help me with it, please?

JohnFromJotting
Shopify Partner
665 94 133

This is an accepted solution.

Hi @Ivana_Jones 

Move the description element to the outter divs, as shown in the picture.

If you want to make it half width of the element use width: 50%. If you want to make it in the middle, use margin auto. Code attached below

 

          <div class="product-single__description rte" style="width: 50%; margin: auto">
          {{ product.description }}
        </div>

 

 

Defineify_0-1603151093423.png

 

final result:

Defineify_1-1603151161018.png

 

Any other further edits would be more of a customization space, you would need to hire a developer. My email is below if you wish to speak.

 

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

Ivana_Jones
Visitor
3 0 0

it's working, thanks a lot!!! 

2od
Visitor
3 0 0

Where exactly was this code entered in the theme.css.liquide file

SlippySlope
Tourist
10 0 2

Is the Debut theme still available? I don't see it in the theme store.