shopping cart not displaying items counts on mobile device but displays perfectly on desktop

[radekusfamily]

Hello I have used simple theme to build www.radekus.com

On desktop the shopping cart icon works well. It displays number of product added to card. However on mobile devices it does not show number of products added to the cart. What could be wrong. 

[radekusfamily · Accepted solution]

Thanks Kyle is works nicely now. I did not know that the solution was so easy. 

[FreshNarrative]

Hi Radekusfamily,

The shopping cart icon has the class 'small--hide' on the span that includes the cart count. In your theme code find 'header.liquid' and remove "small--hide' from the <span> that holds the cart. You could do a search for {{ cart.item_count }} to find it. 

Let me know if you need help finding it.

Thanks,

Kyle Kopelke

[radekusfamily]

Thank you Kyle. 

I found this code in my header.liquid as per your suggestions. How do I remove "small--hide". what code should replace <span class ="small-hide"> if I have to remove "small-hide"

<div class="grid__item {% if shop.customer_accounts_enabled %} medium-up--two-fifths {% else %} medium-up--four-fifths {% endif %} small--one-half text-right">
<a href="{{ routes.cart_url }}" class="site-header__cart">
{% include 'icon-cart' %}
<span class="small--hide">
{{ 'layout.cart.title' | t }}
(<span id="CartCount">{{ cart.item_count }}</span>)
</span>
</a>
</div>

[FreshNarrative]

Hi Radekusfamily,

Simply remove "small--hide" completely. Nothing needs to replace it. Let me know how that works. 

Thank you,

Kyle

[radekusfamily · Accepted solution]

Thanks Kyle is works nicely now. I did not know that the solution was so easy. 

[Pawan2794]

</nav>
<div class="grid__item large--hide one-quarter">
<div class="site-nav--mobile text-right">
<a href="{{ routes.cart_url }}" class="site-nav__link cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
<span class="icon-fallback-text">
<span class="icon icon-cart" aria-hidden="true"></span>
<span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
</span>
<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
</a>
</div>  


please help, my code is a lil different from above. how to correct it.

[shamraiz · Accepted solution]

hey Kyle - I have the same problem. The only difference is I don't have "small--hide" in the place you have suggested. "small--hide" shows up in several places though in theme.liquid but it's not appearing where you advised. Can you please help.

Thanks,

Sham

[Drops]

Hello,

I am experiencing the same as @shamraiz , "small--hide" also only appears in other spans but not where you advised - my code looks the same as @Pawan2794 

Can you help @FreshNarrative ?

Thanks!

Oliver

[FreshNarrative]

Can you share your shopify store URL or theme and I can take a look?

-Kyle

[Drops]

Hey Kyle, its https://gib-mir-wein.myshopify.com/

[Drops]

Hello Kyle, could you already look into it? I would appreciate your help!

best, O.

[bkwyattjr]

Hi Kyle! 

Can you also take a look and see what needs to be done for the site I manage for: https://shop-boujee-hippie.myshopify.com