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

Store Design
1

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

, 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 :slightly_smiling_face:

Ivana_Jones_0-1603148116991.png
Ivana_Jones_0-1603148116991.png1920×1080 185 KB

2

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
Defineify_0-1603149392560.png1441×966 146 KB

3

@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?

4

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


          {{ product.description }}

Defineify_0-1603151093423.png
Defineify_0-1603151093423.png1132×371 24.7 KB

final result:

Defineify_1-1603151161018.png
Defineify_1-1603151161018.png1162×739 46.7 KB

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.

5

it’s working, thanks a lot!!!

6

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

7

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