Shopify themes, liquid, logos, and UX
Hello!
I would like to position the text on the right side of my product page not so close to the product media. (More to the right side, leaving more space between the pictures and the text.) Is there a way to do this? Thanks in advance!
https://r20561-af.myshopify.com/products/apple-airpods-max-metal
Password: theaba
Inspiration (I'd like the position exactly how it is here):
https://eu.louisvuitton.com/eng-e1/products/lv-x-tm-speedy-soft-30-nvprod5940160v/M13257
Solved! Go to the solution
This is an accepted solution.
Hi @Sicilia2025
Try this one.
@media screen and (min-width: 989px) {
.product.grid .product__info-container {
max-width: 100%;
width: 50%;
margin: auto;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
padding-left: 0;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hey @Sicilia2025 this is Qasim a Sr. Shopify Developer.
In order to make the Product text far to the product meadia then please paste this code in the end of section-main-product.css file.
@media screen and (min-width: 750px) {
.product__info-wrapper {
padding: 0 0 0 20rem !important;
}
}
You can adjust the rem value based on your need.
This is an accepted solution.
Hi @Sicilia2025
Try this one.
@media screen and (min-width: 989px) {
.product.grid .product__info-container {
max-width: 100%;
width: 50%;
margin: auto;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
padding-left: 0;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hello dear
can you tell me what can i do to change all products image background to gradient color
TRy this one.
product-info[id^="MainProduct-template--"][id$="__main"] {
background: red;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Hi Sicilia2025
- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
@media screen and (min-width: 750px) {
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
padding-left: 140px !important;
}
}
Result:
Best,
Esther
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025