Shopify themes, liquid, logos, and UX
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 🙂
Solved! Go to the solution
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>
final result:
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
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
Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.
To hire me, visit my Upwork profile
@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?
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>
final result:
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
it's working, thanks a lot!!!
Where exactly was this code entered in the theme.css.liquide file
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024