The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 12-20-2017, 05:34 PM
Chai916's Avatar
Chai916 is offline
Junior Member
 
Join Date: Feb 2017
Posts: 6
Post

Mini Cart Widget Icon Showing Up


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
Attached Thumbnails
Click image for larger version

Name:	widget icon.png
Views:	111
Size:	4.1 KB
ID:	3818  
The Following User Says Thank You to Chai916 For This Useful Post:
  #2  
Old 12-22-2017, 08:50 AM
Freya S.'s Avatar
Freya S. Freya S. is offline
Ecwid Team
 
Join Date: Oct 2017
Location: Vladivostok
Posts: 9
Default

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:

Code:
.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
HTML Code:
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:

Code:
.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:
I really hope this helps.

Happy sales!
__________________
Regards,
Freya

Ecwid Customer Care Team

Recover Abandoned Carts to Earn 12% More Sales !
The Following 2 Users Say Thank You to Freya S. For This Useful Post:
Chai916 (12-22-2017), Давыдов Дмитрий (01-08-2018)
  #3  
Old 12-22-2017, 04:53 PM
Chai916's Avatar
Chai916 Chai916 is offline
Junior Member
 
Join Date: Feb 2017
Posts: 6
Default

Quote:
Originally Posted by Freya S. View Post
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:

Code:
.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
HTML Code:
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:

Code:
.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:
I really hope this helps.

Happy sales!
Thank you so much!
The Following 2 Users Say Thank You to Chai916 For This Useful Post:
Давыдов Дмитрий (01-08-2018), Stacy_P (12-22-2017)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
css, mini cart, minicart, minicart floating

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:14 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.