Shopify themes, liquid, logos, and UX
Hi,
How can I increase the spacing between my product image and text, as well as make the text portion narrower?
Attached photo of current and ideal
page here: https://www.wastd.world/products/multi-purpose-serving-platter
Hey @letsgetwasted
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (min-width: 768px) {
.product.grid {
gap: 7rem !important;
}
.grid__item.product__media-wrapper {
width: 40% !important;
max-width: 40% !important;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
width: 50% !important;
max-width: 100% !important;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
I hope you are well. You can follow our instructions below:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there
Here is the code for Step 3:
@media screen and (min-width: 768px) {
body .product.grid {
gap: 10% !important;
}
body .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
width: 40% !important;
}
}
.product__description {
max-width: 44rem;
}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024