I need a hand on changing the search icon and bag icon into text, I've been trying for hours

2 0 0

Theme is RIDE

I need some help on changing this:




Into this:



and they stay in the same position without one overlapping the other


also it will be nice to have "BAG" looking like this when there's any item in the bag



here's the shop url: My Store (chromedoc.com)


Replies 2 (2)
Shopify Partner
5931 537 1241

You can try to target each icon or it's containing elements to increase the width of the area an insert pseudo text, with the example CSS below, same format for account icon should work style to need.



Beyond if there's not a theme setting for such a feature that will require theme customization.

If you need this customization then contact me for services by clicking here to mail me, or use contact Info in signature.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.



.header__icon--search {
    width: 64px;
.header__icon--search svg {
    display: none;
.header__icon--search span:first-child:before {
    content: " Search";
    /* display: inline; */
    font-style: normal;
    font-family: sans-serif;

.header__icon--cart {
    width: 55px;
.header__icon--cart svg {
    display: none;
.header__icon--cart:after {
    content: " Cart test";
    display: block;
    font-style: normal;
    font-family: sans-serif;



Good Hunting.

Save time & money ,Ask Questions The Smart Way

Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org

Shopify Partner
314 40 54

You can do this in sections --> header.liquid

Freelance Shopify Developer | Helping Shopify merchants grow with high-converting online stores!
 - Did I help? Leave a tip!
 - Need my help? Chat on Telegram or WhatsApp
 - Was your question answered? Mark it as an Accepted Solution