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 12-18-2016, 06:05 AM
abdlatif's Avatar
abdlatif is offline
 
Join Date: Dec 2016
Posts: 4
Default

Shopping bag


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.
  #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)
  #3  
Old 12-19-2016, 12:46 PM
abdlatif's Avatar
abdlatif abdlatif is offline
 
Join Date: Dec 2016
Posts: 4
Default

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

Last edited by river; 12-30-2016 at 10:40 AM.
  #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)
 
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

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