Thread: Shopping bag
View Single Post
  #2  
Old 12-19-2016, 08:39 AM
river's Avatar
river river is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 452
Default

Quote:
Originally Posted by abdlatif View Post
How to make shopping bag without the word "shopping bag", "open bag" and the shape line around them. The smallest it is the best way to mobile view.
Hello,

Ecwid Customer Care team here. Thanks for your post!

Any element in Ecwid can be altered with the help of custom CSS changes.

The shopping bag widget can be changed in any way possible for sure. You will need some CSS codes for that.

All codes are to be added to a custom CSS theme in your Ecwid Control Panel -> Settings -> Design. If you do not have a custom CSS theme there yet, just create one and paste all the codes in it.

Here are the codes with comments on what they do:

Code:
 
/*Removes the border and makes white backround transparent*/

.ecwid-minicart {
    background: transparent !important;
    border: none !important;
}

/*Hides all notes and liks, leaving only the image be*/

.ecwid-minicart-caption,
.ecwid-minicart-link,
.ecwid-minicart-label {
display: none
}

/*Makes the image black. Changes are in the fill parameter of the svg image, e.g.: %23000000. The "000000" is black*/

.ecwid-minicart-clickArea {
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='49' viewBox='0 0 40 49'%3E%3Cpath fill='%23000000' d='M37 13v27c0 3.31-2.69 6-6 6H9c-3.31 0-6-2.69-6-6V13h34m2-2H1v29c0 4.418 3.582 8 8 8h22c4.418 0 8-3.582 8-8V11z'/%3E%3Ccircle fill='%23000000' cx='12' cy='17' r='2'/%3E%3Ccircle fill='%23000000' cx='28' cy='17' r='2'/%3E%3Cpath fill='%23000000' d='M29 17h-2v-7c0-3.86-3.14-7-7-7s-7 3.14-7 7v7h-2v-7c0-4.962 4.037-9 9-9s9 4.038 9 9v7z'/%3E%3C/svg%3E") no-repeat !important;
}

/*Changes the color of the counter*/

.ecwid-minicart-counter {
    color: #000 !important
}
So, here's what is was originally:



And here's what the codes do:



After you paste the codes to the custom theme, make sure to activate the theme and save changes. Reload the page with your store then.

If you need any of the changes to apply for mobile devices only, media queries will help.

Let me know if there's anything else I can assist you with.
__________________
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 User Says Thank You to river For This Useful Post:
abdlatif (12-31-2016)