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 03-20-2017, 10:14 PM
Livella Floor Heating's Avatar
Livella Floor Heating is offline
 
Join Date: Dec 2014
Posts: 4
Default

No 'Shopping Cart' option on Mobile Version of Store Front


Hi there community,

When browsing my 'Store Front' on Desktop, I can simply click 'Add To Cart' and then click on the Shopping Cart icon down the bottom right of the screen to go and complete the checkout.

This Shopping Cart icon does not appear on Mobile.

So I need to add the product to cart, then go into the product itself and then click 'Go to Checkout'.

I believe this is causing confusion for my customers, which I can see by all the abandoned sales.

http://www.floorheatingsydney.com.au/online-shop/

Many thanks
Nick
  #2  
Old 03-21-2017, 01:10 PM
Edward M.'s Avatar
Edward M. Edward M. is offline
Ecwid Team
 
Join Date: Dec 2016
Posts: 261
Default

Hi,

Edward here, Ecwid Team. Thank you for the message — I'll be happy to help you with this problem.

The reason for shopping bag not being displayed on mobile devices is that it's placed outside the borders of mobile view. To put it simply, the width of the screen on mobile devices is too small. So, we need to define a shopping bag position specifically for mobile devices. A CSS code will help us with this one, please follow these steps.

Proceed to Ecwid Control Panel -> Settings -> Design -> Create new theme or edit current theme -> Paste the below code -> Activate and save.

Quote:
@media only screen and (max-width: 700px) {
div#cart-id {
display:block!important;

}
}

Here's the result: http://take.ms/XW8Ai

I hope this will help.

If you have any questions — feel free to ask.
__________________
Ecwid Customer Care Team
More tips and hints on Ecwid use in Ecwid Help Center
The Following User Says Thank You to Edward M. For This Useful Post:
Livella Floor Heating (03-23-2017)
  #3  
Old 03-23-2017, 12:02 AM
Livella Floor Heating's Avatar
Livella Floor Heating Livella Floor Heating is offline
 
Join Date: Dec 2014
Posts: 4
Default

Hey Edward,

You're an absolute legend mate, that worked great, I had no idea you could use custom CSS in Ecwid.

I've even resized the entire Shopping Cart icon, so that it is a bit smaller on mobile devices.

I also removed the "Drag to shopping cart text"

I've included the CSS for anyone else who is interested:

@media only screen and (max-width: 700px) {
div#cart-id {
display:block!important;
}
html#ecwid_html body#ecwid_body span.ecwid-minicart-label-text {
display: none;
}

html#ecwid_html body#ecwid_body div.ecwid-minicart-link {
left: 0;
top: 70px;
width: 117px;
}
html#ecwid_html body#ecwid_body div.ecwid-minicart-caption {
left: 8px;
top: 72px;
width: 100px;
font-size: 12px;
}
html#ecwid_html body#ecwid_body div.ecwid-minicart {
width: 115px;
height: 115px;
}
html#ecwid_html body#ecwid_body div.ecwid-minicart-clickArea {
top: 15px;
left: 37px;
}
html#ecwid_html body#ecwid_body div.ecwid-minicart-counter {
left: 40px;
top: 32px;
width: 34px;
}
}


Cheers
Nick
The Following 2 Users Say Thank You to Livella Floor Heating For This Useful Post:
Edward M. (03-23-2017), Stomerij Wasserij Eindhoven (07-11-2017)
  #4  
Old 03-23-2017, 01:07 PM
Edward M.'s Avatar
Edward M. Edward M. is offline
Ecwid Team
 
Join Date: Dec 2016
Posts: 261
Default

Hi Nick,

Thank you very much for kind words, I'm happy that I was able to help you.

Also, thank you for sharing the code with others, I formatted it a bit:

Code:
@media only screen and (max-width: 700px) {
div#cart-id {
display:block!important;
}
html#ecwid_html body#ecwid_body span.ecwid-minicart-label-text {
display: none;
}

html#ecwid_html body#ecwid_body div.ecwid-minicart-link {
left: 0;
top: 70px;
width: 117px;
}
html#ecwid_html body#ecwid_body div.ecwid-minicart-caption {
left: 8px;
top: 72px;
width: 100px;
font-size: 12px;
}
html#ecwid_html body#ecwid_body div.ecwid-minicart {
width: 115px;
height: 115px;
}
html#ecwid_html body#ecwid_body div.ecwid-minicart-clickArea {
top: 15px;
left: 37px;
}
html#ecwid_html body#ecwid_body div.ecwid-minicart-counter {
left: 40px;
top: 32px;
width: 34px;
}
}

Check the difference: before and after.

If you find this code useful, please don't forget to click on "Thanks" in Nick's post above.
__________________
Ecwid Customer Care Team
More tips and hints on Ecwid use in Ecwid Help Center
The Following User Says Thank You to Edward M. For This Useful Post:
Livella Floor Heating (03-23-2017)
  #5  
Old 09-01-2017, 07:04 AM
Bohomaniacs's Avatar
Bohomaniacs Bohomaniacs is offline
Junior Member
 
Join Date: Jul 2017
Posts: 1
Default

Hi guys,

Any idea (css code) on how to make the icon exactly like on Ecwid demo page...small round icon with blue border, small blue bag icon inside it and red indicator with the number of items in the bag. Ecwid demo page - phone view.

Thanks.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
checkout

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