Shopify themes, liquid, logos, and UX
Hey people,
I need some help with the following. I want my product page to be like this online shop (https://www.brookecallahan.com/shop/p/guest-top-red
- So the size of the images (9:16) and the width and placement of both the image galery and the info pannel.
My own website:
pw: SHOPIFYSTORELENA96
Thank you!!
Solved! Go to the solution
This is an accepted solution.
This is Noah from PageFly - Shopify Page Builder App
Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>
<style>
@media screen and (min-width: 768px){
.product__media-list{
max-width: 50% !important;
margin: auto !important;
}
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Hello @AnneP96 ,
I understand you are looking to change the layout of the product page similar to your shared reference product page https://www.brookecallahan.com/shop/p/guest-top-red
Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag and save.
<style>
@media screen and (min-width: 765px) {
.grid__item.product__media-wrapper {
max-width: 50% !important;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
max-width: 50% !important;
}
}
</style>
Output -: https://prnt.sc/afsZ77RD1p8P
I hope the code helps you.
Please share if you have any queries.
Thank you.
Thank you so much!!
Everyting's perfect, except for the container width. The grey lines are still showing..
Any code for this? 🙂
Anyone any ideas how to make the container wrap the content?
Hello @AnneP96 ,
I am glad that my previous code helps you.
Please share your store new password, so I can take a look at store again and can provide you an appropriate solution for your requirement.
Thank you.
This is an accepted solution.
This is Noah from PageFly - Shopify Page Builder App
Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>
<style>
@media screen and (min-width: 768px){
.product__media-list{
max-width: 50% !important;
margin: auto !important;
}
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Thank you, but unfortunately still the same issue with the media container width. There is a box around my images. Any ideas how to solve this?
Hi @AnneP96 Can you help me provide again password, current password is not correct. Thank you.
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
I managed to make it work, thanks!
Thank you , Have a nice day !
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Thank you
To enhance your Shopify project page and better manage resources, you might want to explore some effective resource management tools . These can streamline your workflow and help you focus on optimizing page design while keeping everything organized efficiently.
Learn 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, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025