Add text below cart and search icons in header

[cristinap8]

Hi there,

I’m trying to do two things:

1. Add text below or next to the search and cart icons

2. Englarge the search and cart icons.

Can anyone advise?

Through trial and error, I managed to figure out (I think) how to make the cart icon bigger, but when I figured out how to add text, the size of the cart icon shrank. I’ve since removed the text and now the icon is back to the size I want it.

I am using the Studio theme.

The URL is https://bay-street-video.myshopify.com/

The pw is: mayfli

Thanks!

[dmwwebartisan]

@cristinap8

Please share a screenshot of what you want!

Thanks!

[Ahsan_ANC]

Please add the text with small icon size and message here then we will able to share the code to enlarge the icon.

[Farouk-dev]

Hi @cristinap8 ,

You’re almost there!

For instance, to add text next to the search icon, try this:

1. Find area you need to add html, in this case ‘header.liquid’
2. In header.liquid, search for ‘header__search’
3. Go on and add this html below…

 Text at Search Bar ​

• Now head over to your Assets->base.css and paste these styles below:

span.text-at-searchbar {
    color: red;
    font-size: 1.2rem;
}

/* Align search icon and new text to the center */
.header__search {
    display: inline-flex;
    line-height: 0;
    align-items: center !important;
  }
​

You’ll end up with something similar to this…

If that helps, please mark it as a solution and leave a like on the post.

Thanks

[LuminousLoom]

this worked perfectly

[LuminousLoom]

Is there a way we can add text to menu icon , account icon , and Cart icon?
In craft theme, URL- LuminousLoom.shop