All things Shopify and commerce
I created an animated GIF for my logo. I'm using the Dawn theme, and it allows me to put it as my logo, but it still has the square border around it. I've entered code (which I thought would do the trick), but it didn't work. The code I entered is:
.site-header__logo {
border: none !important; /* Removes border */
background: transparent !important; /* Ensures background is transparent */
}
.site-header__logo img {
display: block; /* Prevents any inline spacing */
margin: 0; /* Removes any margin */
padding: 0; /* Removes any padding */
outline: none; /* Removes any outline */
When I try to export the GIF with a transparent background, it gives me issues with the background animation.
Is there a way to get around this to remove the border?
For reference, my site is: https://www.avycoffee.com
Thank you all in advance!
Solved! Go to the solution
This is an accepted solution.
Hi @AvyCoffee, Your photo currently has built-in borders. This cannot be fixed.
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
This is an accepted solution.
Hi @AvyCoffee, Your photo currently has built-in borders. This cannot be fixed.
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi,
It seems that your image is a square gif. We actually do not see any border apart from the square sharped image you have added. You can have a rectangle logo covering more of the top header from left to right. All good logos are generally transparent and rectangle but in your case.
You can also have the background color of the gif same as the top header and then use the animation.
That ways, the background of the gif will be same as your header and will merge seamlessly.
Regards
The gif logo is not transparent at all. It a square shaped image that provide of sense of border here.
Please have a look at it if we put red background in the header, it looks like this -
Let me know if you need any help further.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025