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

Quote:
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 : https://app.box.com/s/r20gq2h6dtyrr23o3p2acxbfx104tud4

2nd image : after using the code : https://app.box.com/s/0vkfrzud58j3uwv5gxykedse6gif8btc
Hi,

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:

Code:
@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: https://developers.ecwid.com/api-doc...tom-javascript

And there's a method in jQuery called addClass(): http://www.w3schools.com/jquery/html_addclass.asp

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)