Shopify Dawn Theme: Change Header Cart & Search Icons to Text

Hey fellow store owners! Ever looked at your Shopify store's header and thought, "You know, those icons are great, but I'd really prefer some clear text there?" Maybe you want "CART (X)" instead of a shopping bag icon, or "SEARCH" instead of a magnifying glass. Well, you're not alone! This exact question popped up in the Shopify community recently, and it sparked a really helpful discussion with a couple of great solutions.

Our community member, @oshop0307, using the popular Dawn theme (version 15.1.0 to be exact), was looking to do just that – transform their cart and search icons into straightforward text. They even shared a screenshot of their desired look, which really helped everyone understand what they were aiming for. Let's dive into the insights and actionable steps shared by our expert community members.

Safety First: Always Duplicate Your Theme!

Before we even think about touching any code, there's one golden rule that every experienced Shopify store owner lives by: Always, always, DUPLICATE YOUR THEME first! Seriously, I can't stress this enough. Go to Online Store > Themes, click the three dots next to your live theme, and hit 'Duplicate.' This creates a safe backup. If anything goes sideways (which sometimes happens with code edits!), you can simply revert to your duplicate or publish the original theme again. Mateo-Penida wisely reminded us of this crucial step in the thread, and it's advice worth etching into your brain!

Solution 1: The Direct Code & CSS Approach

The first set of solutions, championed by contributors like Devcoder and Mateo-Penida, involves directly modifying your theme's Liquid files to replace the icon code with text, then adding some CSS to make it look just right. This gives you precise control over the HTML structure.

Step-by-Step: Changing the Cart Icon to Text

Go to your Shopify admin, navigate to Online Store > Themes.
Click Actions > Edit code on your duplicated theme.
Open Sections > header.liquid.

Search for the following code block (it's often around line 288 in Dawn 15.x, as Mateo-Penida pointed out):


  {% if cart == empty %}
    {{'icon-cart-empty.svg' | inline_asset_content }}
  {% else %}
    {{'icon-cart.svg' | inline_asset_content }}
  {% endif %}
  {{ 'templates.cart.cart' | t }}
  {%- if cart != empty -%}
    
      {%- if cart.item_count < 100 -%}
        {{ cart.item_count }}
      {%- endif -%}
      {{ 'sections.header.cart_count' | t: count: cart.item_count }}
    
  {%- endif -%}

Replace this entire block with the simplified text version provided by Devcoder:
```
  
    CART
    {% if cart.item_count > 0 %}
      ({{ cart.item_count }})
    {% endif %}
  
```
Mateo-Penida also offered a slightly different version with inline styling for the cart, which you might find useful for a quick test:
```
  CART ({{ cart.item_count }})
```

Step-by-Step: Changing the Search Icon to Text

Still in the code editor, open Snippets > header-search.liquid.

Search for the code block that renders the search icon. It typically looks like this:


  
    
      {{- 'icon-search.svg' | inline_asset_content -}}
    
    
      {{- 'icon-close.svg' | inline_asset_content -}}

Replace this block with Devcoder's text version:
```
  SEARCH
```

Step-by-Step: Adding Custom CSS for Styling

After making those Liquid file changes, you'll likely notice the text isn't perfectly aligned or styled. Devcoder provided some excellent CSS to clean things up and make it look cohesive:

In your code editor, open Assets > base.css.

Scroll to the very bottom of the file and paste this code:

.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;
}

Save all your changes.

Here’s a glimpse of what Devcoder’s solution looked like once applied:

Solution 2: The CSS-Only Alternative

Now, if the idea of directly editing Liquid files makes you a bit nervous, or if you're concerned about how future theme updates might affect your custom code, tim_tairli shared an elegant CSS-only solution. This approach works by hiding the existing icons and using CSS to inject the text you want, without altering the core HTML structure of your Liquid files. This can sometimes make theme updates less painful, as your HTML changes are minimal or non-existent.

Here's the CSS you'd need:

/* 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"
}

Where to Put This CSS

tim_tairli suggested two great places for this CSS:

At the bottom of Assets > base.css: This is generally the most straightforward place for custom CSS.
In a 'Custom liquid' section in your Footer: This is a clever workaround if you want to keep your custom CSS separate from your main theme files or if your theme has a 'Custom CSS' area that doesn't support all selectors. You'd wrap the CSS in tags. While it's typically placed in the header for performance, for small snippets like this, the footer can work.

Here’s how tim_tairli's CSS-only approach rendered:

Screenshot 2026-05-25 at 12.41.33 PM

Which Approach is Right for You?

So, which method should you choose?

The direct code modification approach (Solution 1) gives you full control over the HTML output. It's often more explicit and easier to debug if you understand Liquid and HTML. However, it means you're directly changing core theme files, which could lead to conflicts with future theme updates from Shopify.
The CSS-only solution (Solution 2) is less intrusive to your theme's core structure. By only manipulating the display with CSS, you might find it easier to merge future theme updates. The trade-off is that sometimes CSS-only solutions can be a bit more complex to craft, relying on specific HTML elements and classes that might change in future theme versions anyway.

Both approaches are valid and ultimately achieve the same goal. If you're comfortable with a bit more hands-on coding and want full control, the first method is solid. If you prefer to keep your Liquid files as close to stock as possible, the CSS-only route is a clever alternative.

No matter which path you take, remember to test your changes thoroughly across different devices and browsers. You might also want to tweak the font-size, letter-spacing, or other CSS properties to perfectly match your brand's aesthetic, as Mateo-Penida suggested. The beauty of Shopify's flexibility, combined with the power of its community, means there's almost always a way to customize your store exactly how you envision it. A big shout-out to Devcoder, tim_tairli, and Mateo-Penida for sharing their expertise and helping fellow store owners like oshop0307 make their stores truly unique!

Customizing Your Shopify Dawn Header: Switching Cart & Search Icons to Text