Adding text under header icons

[technase]

Could someone help me in adding text beneath the header icons?
There are three icons—Cart, Login, and Search—and I would like to include a label under each one. attaching screenshot for reference 

Store link: https://testingstoresandthemes.myshopify.com/
Storefront password: lock 

Any help is greatly appreciated

[Moeed]

Hey @technase 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.header__icon--cart {
    flex-flow: column !important;
}
.header__icon--cart:after {
    content: "Cart";
    bottom: 10px !important;
    position: relative;
}
a.header__icon.header__icon--account.link.focus-inset.small-hide {
    flex-flow: column !important;
}
a.header__icon.header__icon--account.link.focus-inset.small-hide:after {
    content: "Account";
    position: relative;
    bottom: 10px;
}
.header__icons.header__icons--localization.header-localization {
    gap: 2rem !important;
}
details-modal.header__search {
    flex-flow: column;
    bottom: 11px !important;
    position: relative;
}
.header__search:after {
    content: "Search";
    text-decoration: underline !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[technase]

Thank you Moeed
the text size is too large when I change the font, is there a way I can reduce its size so it doesn't overlap ? 
Also can you remove the underlines from the text?

[BSSCommerce-B2B]

Hi @technase , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.header__icon--cart, a.header__icon.header__icon--account.link.focus-inset.small-hide, details-modal.header__search {
    flex-flow: column !important;
}

.header__icon--cart:after {
    content: "Cart";
    bottom: 10px !important;
    position: relative;
    font-size: 14px;
}

a.header__icon.header__icon--account.link.focus-inset.small-hide .svg-wrapper:after {
    content: "Account";
    bottom: 10px;
    position: relative;
    font-size: 14px;
}

details-modal.header__search {
    bottom: 11px !important;
    position: relative;
}

.header__search:after {
    content: "Search";
    position: relative;
    font-size: 14px;
}

a.header__icon.header__icon--account.link.focus-inset.small-hide, .header__icon--cart {
    text-decoration: none !important;
}

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[technase]

This remove the account icon altogether 

[BSSCommerce-B2B]

HI @technase , 

Sr about my little mistake, you can change the class from " a.header__icon.header__icon--account.link.focus-inset.small-hide .svg-wrapper:after " to " a.header__icon.header__icon--account.link.focus-inset.small-hide:after" 
to fix this. 
And this code below completely: 

.header__icon--cart, a.header__icon.header__icon--account.link.focus-inset.small-hide, details-modal.header__search {
    flex-flow: column !important;
}

.header__icon--cart:after {
    content: "Cart";
    bottom: 10px !important;
    position: relative;
    font-size: 14px;
}

a.header__icon.header__icon--account.link.focus-inset.small-hide:after {
    content: "Account";
    bottom: 10px;
    position: relative;
    font-size: 14px;
}

details-modal.header__search {
    bottom: 11px !important;
    position: relative;
}

.header__search:after {
    content: "Search";
    position: relative;
    font-size: 14px;
}

a.header__icon.header__icon--account.link.focus-inset.small-hide, .header__icon--cart {
    text-decoration: none !important;
}

The result (I checked on inspector view in your site): 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!