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 11-19-2016, 01:44 PM
Naal Souq's Avatar
Naal Souq is offline
 
Join Date: Nov 2016
Posts: 1
Default


I can't change shopping bag icon to a shopping cart icon that i want. I have already tried all the css codes in various thread and guides that I have read. Please help me out, I am looking to change to something like this



css codes that I have tried:

div.ecwid-minicart {
background: transparent url(PATH_TO_YOUR_IMAGE) no-repeat;
}

div.ecwid-minicart-clickArea {
background: url('PATH_TO_YOUR_IMAGE')no-repeat;
​}

.ecwid div.ecwid-minicart-clickArea:after {
display: block;
height: 50px;
width: 50px;
position: absolute;
top: 5px;
left: 6px;
font-size: 1px;
background: url('PATH_TO_YOUR_IMAGE') no-repeat;
}

div.ecwid-minicart {
background-image: url('PATH_TO_YOUR_IMAGE');
}

Image Address: http://www.naalsouq.com/upload/cart.png

http://naalsouq.wixsite.com/jyot

Last edited by river; 11-21-2016 at 07:57 AM.
  #2  
Old 11-21-2016, 08:08 AM
river's Avatar
river river is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 452
Default

Quote:
Originally Posted by Naal Souq View Post
I can't change shopping bag icon to a shopping cart icon that i want. I have already tried all the css codes in various thread and guides that I have read. Please help me out, I am looking to change to something like this



css codes that I have tried:

div.ecwid-minicart {
background: transparent url(PATH_TO_YOUR_IMAGE) no-repeat;
}

div.ecwid-minicart-clickArea {
background: url('PATH_TO_YOUR_IMAGE')no-repeat;
​}

.ecwid div.ecwid-minicart-clickArea:after {
display: block;
height: 50px;
width: 50px;
position: absolute;
top: 5px;
left: 6px;
font-size: 1px;
background: url('PATH_TO_YOUR_IMAGE') no-repeat;
}

div.ecwid-minicart {
background-image: url('PATH_TO_YOUR_IMAGE');
}

Image Address: http://www.naalsouq.com/upload/cart.png

http://naalsouq.wixsite.com/jyot
Hi Naal,

Ecwid Customer Care team here. Thanks for your post. I see that you also sent us an email with the same request, you can find a solution in my reply to that one.

For everyone else who might also struggle with the same thing, here are the codes that basically allow to change the Minicart widget anyhow by adding or changing parameters in them:

Code:
.ecwid-minicart {
 background: url("http://lamps.ecwid.com/~river/cartimage.png") no-repeat !important;
 background-size: 100px 100px !important;
 border: none !important;
}
.ecwid-minicart-caption {
    display: none
}
.ecwid-minicart-link {
    display: none;
}
.ecwid-minicart-clickArea {
    background: none !important;
    top: 0px !important;
    left: 0px !important;
    width: 150px !important;
    height: 150px !important
}
div.ecwid-minicart-counter {
    font-size: 34px !important;
    width: 50px !important;
    color: #FFF !important;
    margin-top: -10px !important;
    height: 40px !important;
    margin-left: 40px !important;
    padding-top: 11px !important;
    border-radius: 50px !important;
    background: rgba(130, 93, 35, 1) !important;
}
These codes would make the Minicart widget look like this:



A little explanation to the codes' functions:

Code:
.ecwid-minicart {
 background: url("http://lamps.ecwid.com/~river/cartimage.png") no-repeat !important;
 background-size: 100px 100px !important;
 border: none !important;
}
Relpaces the original white background with an image, sets the size for that image and removes the border around it.

Code:
.ecwid-minicart-caption {
    display: none
}
.ecwid-minicart-link {
    display: none;
}
These two hide the "Shopping Bag" title and "Open bag" link from the widget.

Code:
.ecwid-minicart-clickArea {
    background: none !important;
    top: 0px !important;
    left: 0px !important;
    width: 150px !important;
    height: 150px !important
}
Removes the original bag image. That image is set as a background for the clickable area of the Minicart.

It also makes the clickable area larger and makes it cover the whole widget.

Code:
div.ecwid-minicart-counter {
    font-size: 34px !important;
    width: 50px !important;
    color: #FFF !important;
    margin-top: -10px !important;
    height: 40px !important;
    margin-left: 40px !important;
    padding-top: 11px !important;
    border-radius: 50px !important;
    background: rgba(130, 93, 35, 1) !important;
}
This is to change the Counter in the Minicart, moving it to the right from the image and adjusting its looks.

Hope this helps. Feel free to ask if any more questions appear.
__________________
Roman I.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
The Following 2 Users Say Thank You to river For This Useful Post:
Dutch (04-01-2017), swissborn_admin (06-14-2018)
  #3  
Old 05-25-2017, 09:22 PM
iDistribute's Avatar
iDistribute iDistribute is offline
 
Join Date: Oct 2016
Posts: 1
Default

Hi, what does this last part of the code mean and how do I interpret it? I assume it's the colour of the minicart counter? How do I change it to a different colour? I have the code, but the brackets are confusing me

- background: rgba(130, 93, 35, 1)
  #4  
Old 05-26-2017, 01:27 PM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,123
Default

Quote:
Originally Posted by iDistribute View Post
Hi, what does this last part of the code mean and how do I interpret it? I assume it's the colour of the minicart counter? How do I change it to a different colour? I have the code, but the brackets are confusing me

- background: rgba(130, 93, 35, 1)
Hello!

This is Wendy from Ecwid team. Thanks a lot for getting in touch with us!

Code:
background: rgba(130, 93, 35, 1)
This line of code is responsible for the background color of the minicart counter.

rgba(130, 93, 35, 1) is a color code. If you'd like to change this color, you should update the color code. You will find a new color code here: http://www.color-hex.com/

For example, you'd like to apply this color:



In order to do it, you should update this line like this:

Code:
background: #7C9EE1
I hope you will find this helpful.

If you have other concerns, please feel free to write me back and it will be my pleasure to assist you further. Have a wonderful day!
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
The Following User Says Thank You to Wendy For This Useful Post:
safaa alnabhan (06-08-2018)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
cart, design, mini cart, shopping bag, shopping cart

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 10:18 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.