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

Store Design
, ,
1

Theme is RIDE

I need some help on changing this:

Chromedoc_1-1697033071993.png

Into this:

Chromedoc_0-1697033004722.png

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

Chromedoc_2-1697033273438.png

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

2

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.

PaulNewton_0-1697036212457.png
PaulNewton_0-1697036212457.png452×421 879 Bytes

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.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

.header__icon--search {
    width: 64px;
}
.header__icon--search svg {
    display: none;
}
.header__icon--search span:first-child:before {
    content: " Search";
    white-space:nowrap;
    /* 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";
    white-space:nowrap;
    display: block;
    font-style: normal;
    font-family: sans-serif;
}

Good Hunting.

1 Like
3

You can do this in sections → header.liquid

1 Like