View Single Post
  #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)