How to add text beside header icons in MINIMOG theme

Store Design
, , , , ,

Topic summary

A user seeks to add text labels beside header icons in the MINIMOG Shopify theme.

Initial Solutions Provided:

  • Two community members offered CSS code snippets to be added to the theme’s CSS file
  • Both solutions modify .sf__tooltip-item and .sf__tooltip-content classes
  • The code adjusts positioning, display properties, opacity, and visibility to make tooltip text appear beside icons

Follow-up Issues:

  • The original poster confirmed the solution was helpful
  • They requested additional help to fix a “bubble” display issue on the Wishlist and cart icons
  • A reference image was shared showing the desired cart bubble styling

Status: The discussion remains open with the user awaiting guidance on refining the cart and wishlist icon appearance. The core text-beside-icons issue appears resolved, but cosmetic adjustments are still needed.

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

How to add text beside header icons in MINIMOG theme

Website - https://next.minimog.co/

sample like -
Screenshot 2023-06-08 at 4.20.22 PM.png

1 Like
2

@ankitagulati

Please add the following CSS to your assets/theme.css bottom of the file.

.sf__tooltip-item .sf__tooltip-content {
    background: transparent !important;
    color: #000 !important;
    padding: 0rem 0rem !important;
    float: right !important;
    position: relative !important;
    visibility: inherit !important;
    opacity:1!important;
}

.sf-header__desktop .w-\[18px\] { float: left !important;}
.sf-header__desktop .sf__tooltip-content:after {display:none !important;}
.sf-header__desktop .w-\[20px\] {float: left !important;}

Thanks!

3

Hi @ankitagulati

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.sf__tooltip-item.sf__tooltip-bottom .sf__tooltip-content {position: inherit !important; display: block !important; opacity: 1 !important; visibility: inherit !important; background: none !important; color: #000 !important;padding-left: 0 !important;}

.sf__tooltip-item.sf__tooltip-bottom .sf__tooltip-content:before, .sf__tooltip-item.sf__tooltip-bottom .sf__tooltip-content:after {display: none !important}

.sf__tooltip-item {display: flex; align-items: center;}

Regards,

San

4

its really helpful !

can u also please rectify this bubble on Wishlist and cart

Screenshot 2023-06-08 at 6.40.02 PM.png

5

Can we do bubble like this beside cart text
Screenshot 2023-06-08 at 6.45.34 PM.png