How can I display the item count next to my cart icon?

Topic summary

A user seeks to add an item count display next to their cart icon, referencing example sites for the desired appearance.

Solution Provided:
GemPages support team guides the user through custom code implementation:

  • Add {{ cart.item_count }} markup in the header.liquid file before the closing </span> tag
  • Insert CSS styling code before </head> to fix alignment issues

Additional Requests Resolved:

  • Mobile menu customization: Replace the hamburger icon (three lines) with text reading “MENU” using custom markup and comment tags
  • Desktop menu alignment: Confirmed as working correctly after user implementation

Current Status:
The cart counter and mobile menu modifications are successfully implemented. The user’s latest question asks how to remove the footer divider line, which remains unanswered.

Note: Several posts contain reversed/encoded text, but the technical guidance and outcomes are clear from the support team’s responses and user confirmations.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.

can someone give me the code to have my cart icon say “cart” with the number of items like these sites below https://shop.travisscott.com

https://halfevilco.com/collections/frontpage

my site is www.exoticsouls.world

click the top right and my password is (esfam1)

would appreciate any help, much love!!!

Hello @ExoticSouls ,

It’s GemPages support team and glad to support you today.

I would like to give you a recommendation to support you so kindly follow steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

  2. Open your header.liquid theme file

  3. Find templates.cart.cart

  4. Add the below code before

({{ cart.item_count }})

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

1 Like

it worked but

  1. how can I make it straight across and not stacked

  2. how do I take out the old one that’s covering it, I showed a pic below

Hello @ExoticSouls ,

You could please try adding the below code before in the theme.liquid file:

<

Best regards,
GemPages Support Team

1 Like

worked great, one more thing, can you tell me how to make my mobile menu say “menu” instead of having the 3 lines? Thank you so much for the help!

Hello @ExoticSouls ,

Could you please open header.liquid file > find icon-hamburger > add {% comment %} tags to hide it > add the below code:

MENU

Best regards,
GemPages Support Team

great worked! also is there a way to make it so my menu on pc/laptop is like the menu on mobile?

Hello @ExoticSouls ,

I checked your website and found that you have fixed the menu on the desktop. It’s perfect.

Can I help you more?

Best regards,
GemPages Support Team

yes! can you please tell me how to remove the footer divider line?