How can I change cart icon and search icon to text

[oshop0307]

Hello! I am using the Dawn theme 15.1.0 and want to change the icons to text that say SEARCH and CART (X) Like this screenshot example. How can I do this?

[Mateo-Penida]

Hey @oshop0307

I checked the Dawn 15.x header code and here’s exactly what to change. Duplicate your theme first before editing anything (Themes → three dots → Duplicate).

Go to Online Store → Themes → three dots → Edit code → Sections → header.liquid

For the cart icon, find this block (around line 288):

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
  {% if cart == empty %}
    <span class="svg-wrapper">{{ 'icon-cart-empty.svg' | inline_asset_content }}</span>
  {% else %}
    <span class="svg-wrapper">{{ 'icon-cart.svg' | inline_asset_content }}</span>
  {% endif %}
  <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
  {%- if cart != empty -%}
    <div class="cart-count-bubble">
      {%- if cart.item_count < 100 -%}
        <span aria-hidden="true">{{ cart.item_count }}</span>
      {%- endif -%}
      <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
    </div>
  {%- endif -%}
</a>

Replace it with:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble" style="font-size: 1.4rem; letter-spacing: 0.1em;">
  CART ({{ cart.item_count }})
</a>

For the search icon, it’s rendered from a snippet. Go to Snippets → header-search.liquid and find the SVG icon for search (look for icon-search). Replace the icon SVG with just the text SEARCH using the same style approach.

Save and preview. You might need to tweak the font-size or letter-spacing to match your design.

Hope this points you in the right direction! If it solves the issue, feel free to Like the reply or mark it as the Solution so others can find it more easily too .

[tim_tairli]

There is a CSS-only solution.

/* cart and search buttons -> text */
.header__icon--search, .header__icon--cart {
  width: auto;
  text-decoration: none;
  text-transform: uppercase;
  margin: 0;
}

:is(.header__icon--search, .header__icon--cart):hover {
  transform:scale(1.05);
}

.header__icons {
  padding-right: 0;
  gap: 5px;
}

/* cart */
.header__icon--cart .svg-wrapper {
  display: none;
}

.header__icon--cart .svg-wrapper + .visually-hidden {
  visibility: visible;
  position: relative !important;
  width: auto;
  clip: unset;
}

.header__icon--cart .cart-count-bubble {
  position: static;
  margin-left: 5px;
  width: auto;
  color: inherit;
  background: none;
  font-size: inherit;
  line-height: inherit;
  text-decoration:none;
}

.cart-count-bubble:before {
  content: "(";
}
.cart-count-bubble:after {
  content: ")";
}

/* search */
.icon-search {
  display: none;
}

.header__icon--search .svg-wrapper {
  width: auto;
}

.header__icon--search .svg-wrapper:after {
  content:"Search"
}

You can’t use it in “Custom CSS” so best option IMHO is to add a “Custom liquid” section to the “Footer” Group and paste this code wrapped between <style> and </style> lines.

Or, add to the bottom of the assets/base.css

While editing theme code may seem cleaner, it may make future theme updates much more complex.

Applied in my text store:

---

if my post is helpful, please like it via ♡ button and mark as a solution -- this will help others find it

[devcoders]

Hi @oshop0307

Go to:Sections > header.liquid

Search for this code:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
    {% if cart == empty %}
      <span class="svg-wrapper">{{'icon-cart-empty.svg' | inline_asset_content }}</span>
    {% else %}
      <span class="svg-wrapper">{{'icon-cart.svg' | inline_asset_content }}</span>
    {% endif %}
  <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
  {%- if cart != empty -%}
    <div class="cart-count-bubble">
      {%- if cart.item_count < 100 -%}
        <span aria-hidden="true">{{ cart.item_count }}</span>
      {%- endif -%}
      <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
    </div>
  {%- endif -%}
</a>

Replace it with this:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">

  <span>
    CART
    {% if cart.item_count > 0 %}
      ({{ cart.item_count }})
    {% endif %}
  </span>

</a>

---

Now go to:Snippets > header-search.liquid

Search for this code:

<summary
  class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
  aria-haspopup="dialog"
  aria-label="{{ 'general.search.search' | t }}"
>
  <span>
    <span class="svg-wrapper">
      {{- 'icon-search.svg' | inline_asset_content -}}
    </span>
    <span class="svg-wrapper header__icon-close">
      {{- 'icon-close.svg' | inline_asset_content -}}
    </span>
  </span>
</summary>

Replace it with this:

<summary
  class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
  aria-haspopup="dialog"
  aria-label="{{ 'general.search.search' | t }}"
>
  <span>SEARCH</span>
</summary>

---

Now go to:Online Store > Themes > Actions > Edit code

Open:Assets > base.css

Paste this code at the bottom of the file:

.header__icon--cart span,
.header__icon--search span {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#cart-icon-bubble {
  display: flex;
  align-items: center;
}

.header__icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header__icon--cart,
.header__icon--search {
  text-decoration: none !important;
}

.header__icon--cart span,
.header__icon--search span {
  text-decoration: none !important;
}

Best regards,
Devcoder