Shopify themes, liquid, logos, and UX
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).
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!
Solved! Go to the solution
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.
Hi @deesamanasa ,
Would you mind to share your URL website with password if its protected?
Thanks!
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!
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.
Were you able to fix the issue?
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! 🙂
Thank you for your help!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024