[Dawn Theme] How border around ONLY main Product Picture on Product Page?

Solved

[Dawn Theme] How border around ONLY main Product Picture on Product Page?

namestolen
Excursionist
44 0 7

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:

 

Product Border.jpg

 

Thanks in advance!

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10033 1999 2043

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;
}

Screenshot 2024-10-28 at 13.59.08.png

 

- 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.

View solution in original post

Replies 3 (3)

rajweb
Shopify Partner
207 15 13

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

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

Dan-From-Ryviu
Shopify Partner
10033 1999 2043

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;
}

Screenshot 2024-10-28 at 13.59.08.png

 

- 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.

namestolen
Excursionist
44 0 7

Thank you !