How can I remove image borders and create hover effects on my Dawn theme product pages?

Solved

How can I remove image borders and create hover effects on my Dawn theme product pages?

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 63

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
8810 2109 2585

Hi @deesamanasa ,

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

Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
deesamanasa
Tourist
5 0 2

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

 

 

Made4uo-Ribe
Shopify Partner
8810 2109 2585

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Zqdo
Shopify Partner
803 32 63

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 63

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!