Shopify themes, liquid, logos, and UX
So I was able to get a border around my Product Page picture like I wanted...but it also put a border around each of the smaller preview images below it as well. I only want a border on the larger main product picture. Here's the code I used in theme.liquid:
<style>
/* Add Border Around Main Product Image */
.product__media-wrapper img {
border: 2px solid #ccba78 !important;
padding: 10px !important;
background: black !important;
border-radius: 10px !important; /* Rounded Corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Optional Shadow */
}
</style>
and a picture for reference:
Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
Please update your code to this
.product__media-wrapper .product__media-list {
border: 2px solid #ccba78 !important;
padding: 10px !important;
background: black !important;
border-radius: 10px !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hey @namestolen ,
To apply a border only to the main product image while keeping the smaller preview images unaffected, you need to be more specific in your CSS selector. The code you provided applies the border to all images within the .product__media-wrapper.Typically, the main product image has a specific class, while the thumbnail images have different classes.
Here's an updated version of your code that should work:
<style>
/* Add Border Around Main Product Image */
.product__media-wrapper .product__media--main img {
border: 2px solid #ccba78 !important;
padding: 10px !important;
background: black !important;
border-radius: 10px !important; /* Rounded Corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Optional Shadow */
}
/* Remove Border from Thumbnail Images */
.product__media-wrapper .product__media--thumb img {
border: none !important;
padding: 0 !important;
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
</style>
if the class names for the main and thumbnail images are different in your theme, you may need to inspect the elements using the browser's developer tools to find the correct classes. Adjust the selectors accordingly.
If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma
This is an accepted solution.
Please update your code to this
.product__media-wrapper .product__media-list {
border: 2px solid #ccba78 !important;
padding: 10px !important;
background: black !important;
border-radius: 10px !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you !
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