Product border and background color merging to product picture

Shopify Discussion
1

When I click through a products picture on dawn theme, i have the background gradient border around the product picture and the background color will attach to the product picture. Any help would be more than appreciated. Example photos attached to post.

1 Like
2

Hi @Chance2001

The 2nd picture you like to achieve? If it is would you mind to share your store URL? with password if its protected. Thanks!

3

the product is more noticeable on mobile, if you don’t mind checking it out on your phone. Click on a product and toggle through the images, you can’t miss it. Thanks in advance.

1 Like
4

Problem*

5

If you want to show the border like this

Screenshot (13).png
Screenshot (13).png1713Ă—834 115 KB

you can do that by adding this custom css

.media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
border: 1px solid;

}

6

I attached a screen recording of the problem. Check it out please

7

Thank you for the info, Do you mean like this?

Only in the mobile right?

Made4uoRibe_0-1696789695780.png
Made4uoRibe_0-1696789695780.png311Ă—417 30.7 KB

If it is like this try the code then.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.product__media.media.media--transparent {
    background: lightgoldenrodyellow;
}
}
  • And Save.
  • Note: you can change the color you like.
8

This is the problem I’m facing, product background is transparent (how I want it) until I scroll the product pictures. Video attaxhed

9

Screenshot (14).png
Screenshot (14).png1752Ă—767 104 KB

To keep the background like this you can try this css

.media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
background-color: #F6B818 !important;

}

10

Screenshot (14).png
Screenshot (14).png1752Ă—767 104 KB

If you want the background like this you can try this css

.media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
background-color: #F6B818 !important;

}

11

i want to keep the background transparent, when the product pictures are still they stay transparent, but when i toggle through them they develop a background color