New Shopify Certification now available: Liquid Storefronts for Theme Developers

Product Page Support - Dawn Theme

Solved
deesamanasa
Tourist
5 0 2

Hi there! 

 

Image borders: I am trying to add photos where I've removed the background (so they're white) on my product pages. When I upload, I see a tiny border surrounding all images - what I'm trying to achieve looks like this. I wonder if it's just from Canva (how I'm removing the background on images) or if there is a setting option in the customizer to remove it. I've included a screenshot of what the line looks like below (see at the bottom and sides). 

Screen Shot 2023-06-07 at 2.03.56 PM.png

 

Hover on images: I would also love to recreate the hover effect that lifershop.com uses, is this custom coding? I've seen a few examples shared on the discussion boards, but nothing that looks like this - maybe I missed it if so. 

 

Appreciate any and all help! 

 

 

 

Accepted Solution (1)
Zqdo
Shopify Partner
803 32 62

This is an accepted solution.

Let's start with the border first. In your theme files, go to Assets -> Base.css, and search for: ".global-media-settings". Under that code, you'll see: 

border: var(--media-border-width) solid rgba(var(--color-foreground),var(--media-border-opacity));

 

What you'll want to do is change that simply to:

border: none;

 

Let me know if you were able to do this or if you need more help.

banned

View solution in original post

Replies 7 (7)
Made4uo-Ribe
Shopify Partner
4229 978 1190

Hi @deesamanasa ,

Would you mind to share your URL website with password if its protected?

Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


deesamanasa
Tourist
5 0 2

Hi @Made4uo-Ribe looks like I got support below! Thanks so much.

 

 

Made4uo-Ribe
Shopify Partner
4229 978 1190

I understand you can PM me if you dont like to share in public. 

The Hover on Images, on that design you need to hire a Developer to write the code. 

Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Zqdo
Shopify Partner
803 32 62

This is an accepted solution.

Let's start with the border first. In your theme files, go to Assets -> Base.css, and search for: ".global-media-settings". Under that code, you'll see: 

border: var(--media-border-width) solid rgba(var(--color-foreground),var(--media-border-opacity));

 

What you'll want to do is change that simply to:

border: none;

 

Let me know if you were able to do this or if you need more help.

banned
deesamanasa
Tourist
5 0 2

Hi @Zqdo ,  

 

I am going to check on this.

 

Thank you! 

Zqdo
Shopify Partner
803 32 62

Were you able to fix the issue?

banned
deesamanasa
Tourist
5 0 2

Hi @Zqdo , 

 

I didn't see the code written out exactly as you shared below: 

 

border: var(--media-border-width) solid rgba(var(--color-foreground),var(--media-border-opacity));

I ended up changing the Border settings under the Theme Settings, see below. There was some % Thickness and Opacity set, so I've put it to 0% and the border was gone! 🙂 

Screen Shot 2023-06-07 at 4.24.13 PM.png

Thank you for your help!