What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Product Page Support - Dawn Theme

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 64

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
9118 2178 2688

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
deesamanasa
Tourist
5 0 2

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

 

 

Made4uo-Ribe
Shopify Partner
9118 2178 2688

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

Zqdo
Shopify Partner
803 32 64

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 64

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!