Thread: Shopping bag
View Single Post
Old 12-30-2016, 10:45 AM
river's Avatar
river river is offline
Ecwid Team
Join Date: Feb 2015
Posts: 452

Originally Posted by abdlatif View Post
The codes more than hiding the words and the shape line but it still keep the area of shopping bag. So, it still the same result which is cannot keep the shopping bag at the same row in mobile view.
How about to use font awesome? fa fa-shopping-bag for replace the ecwid's shopping bag.

after used that code you give it's look like

How to make ecwid shopping bag look like or function like the first image that I attach?

first image using font awesome :

2nd image : after using the code :

Moving the Shopping Bag icon to the top on mobiles can be done with CSS, and there's a pretty simple CSS code for it:

@media screen and (max-width: 640px) {
.ecwid-minicart {
    position: absolute !important;
    top: 10px;
    right: -20px;
As a result it will look like this:

Assigning it a font-awesome icon is a little bit more complicated task. Font awesome icons are basically a set of CSS classes that can be assigned to elements to give them certain looks.

Ecwid does not have accessible source code since it's a SaaS solution and the content is being built dynamically. So, assigning a font-awesome class to Minicart would not really work in HTML.

However it's possible with JavaScript and let's say, jQuery. We have a JavaScript API with which you can code a script to work with Ecwid:

And there's a method in jQuery called addClass():

So, you can basically add any class to any element in Ecwid using this approach.

Hope this helps.
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)