[Livella Floor Heating]

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

[Edward M.]

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.

@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.

[Livella Floor Heating]

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

[Edward M.]

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:

@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.

[Bohomaniacs]

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.