[Chai916]

I had the floating mini cart widget icon replaced with a image of my choosing, but I lost the css code to change it and for some reason the original icon is showing up and it's a bit out of place? So can someone help me to fix it. I'd like to replace the mini cart icon with this image https://thumb.ibb.co/ii5rna/shopping_bag_2.png and hide the original one.
Thanks

[Freya S.]

Hello,

This is Freya from Ecwid Customer Care. I am happy to help you with your question.

First, let me please address the reason for the de-centered image of the cart in the circle. I inspected your current CSS theme, and I found the code that prevents the icon to be inside the circle. The code part is the following:

.float-icons > div a {
	display: block;
	width: 48px;
	height: 48px;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #604450;
	border-radius: 50%;
	position: relative;
	box-sizing: border-box;
	box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2);
	transition: transform .3s ease-in-out 0s, box-shadow .1s ease-in-out 0s;
}

If you want to keep the current icon, and make it centered again, please simply remove the

display: block;

part from the code. The rest of it doesn't affect the image position.

Now, as I got your wish, you prefer to replace the minicart icon with your own file, which you listed.

This is possible with another code. Please, find the code below:

.float-icons .cart-icon a svg {
    display: none;
}
.float-icons .cart-icon a {
    background: url(https://thumb.ibb.co/ii5rna/shopping_bag_2.png) center center no-repeat;
    background-size: 26px;
}

As you add this code in the Control Panel > Design to your current CSS theme after all the existing code lines, the cart icon will look like this:


To find more on the CSS design in Ecwid you may check the following links:

• Using the CSS to change the store design

• A comprehensive guide to customizing your store design

I really hope this helps.

Happy sales!

[Chai916]

Originally Posted by Freya S.

Hello,

This is Freya from Ecwid Customer Care. I am happy to help you with your question.

First, let me please address the reason for the de-centered image of the cart in the circle. I inspected your current CSS theme, and I found the code that prevents the icon to be inside the circle. The code part is the following:

.float-icons > div a {
	display: block;
	width: 48px;
	height: 48px;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #604450;
	border-radius: 50%;
	position: relative;
	box-sizing: border-box;
	box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2);
	transition: transform .3s ease-in-out 0s, box-shadow .1s ease-in-out 0s;
}

If you want to keep the current icon, and make it centered again, please simply remove the

display: block;

part from the code. The rest of it doesn't affect the image position.

Now, as I got your wish, you prefer to replace the minicart icon with your own file, which you listed.

This is possible with another code. Please, find the code below:

.float-icons .cart-icon a svg {
    display: none;
}
.float-icons .cart-icon a {
    background: url(https://thumb.ibb.co/ii5rna/shopping_bag_2.png) center center no-repeat;
    background-size: 26px;
}

As you add this code in the Control Panel > Design to your current CSS theme after all the existing code lines, the cart icon will look like this:


To find more on the CSS design in Ecwid you may check the following links:

• Using the CSS to change the store design

• A comprehensive guide to customizing your store design

I really hope this helps.

Happy sales!

Thank you so much!