Hey there!
So far I’m trying to achieve how to show the amount of the currency on the cart instead of the bubble, I could do it, but when on mobile it is not good, bad UX, too little, too near the end of the screen, so I thought there should be a way to show a bubble instead.
So the idea is to have the name Cart + the amount on the cart on desktop and the icon of the cart and the bubble on mobile.
I have this code that I’m testing, it is not perfect since the alignment is not quite ok, but I cannot figure it out either this.
My theme.liquid
my base.css note that I’m getting rid of the icon (it is working on mobile and desktop)
/*remove the search icon*/
As you can see the code is the same for the theme.liquid and the base.liquid
Here you can see the header.liquid
{%- if cart != empty -%}
{%- if cart.total_price > 0 -%}
{{ cart.total_price | money }}
{%- endif -%}
{{ 'sections.header.cart_count' | t: count: cart.item_count }}
{%- endif -%}
I have another issue with the theme Spotlight, where the menu is under the logo instead of to the right of the logo, or better to the left of the cart, but this is another issue I asked here
