Shopify Cart & Search Text Customization | Dawn Theme Guide

Hey fellow store owners and developers! 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?" Perhaps you envision a prominent "CART (X)" instead of a subtle shopping bag icon, or a straightforward "SEARCH" instead of a magnifying glass. You're not alone in this desire for a cleaner, more text-driven user experience.

This exact customization challenge recently emerged in the Shopify community, initiated by @oshop0307, who was using the popular Dawn theme (version 15.1.0). They sought to transform their cart and search icons into clear, actionable text, even providing a screenshot to illustrate their desired outcome. This sparked a valuable discussion, yielding a couple of robust solutions that we, as Shopify migration experts at Shopping Cart Mover, are excited to break down for you.

Customizing your Shopify store's header isn't just about aesthetics; it's about enhancing brand identity, improving user clarity, and potentially boosting conversion rates by making key navigation elements immediately understandable. Let's dive into these actionable steps to give your Shopify store a unique, text-based header.

Customized Shopify Header with Text-Based Search and Cart

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 and developer lives by: Always, always, DUPLICATE YOUR THEME first! Seriously, we cannot stress this enough. Go to Online Store > Themes, click the three dots next to your live theme, and select 'Duplicate.' This creates a safe, restorable backup of your current theme. If anything goes awry during the code editing process (which, let's be honest, can happen even to the best of us!), you can simply revert to your duplicate or publish the original theme again. This crucial step, wisely highlighted by Mateo-Penida in the original thread, is your safety net against potential downtime and headaches.

Solution 1: The Direct Code & CSS Approach (The Developer's Choice)

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 ensure it looks precisely as intended. This method offers the most granular control over the HTML structure and presentation.

Understanding the Files: header.liquid, header-search.liquid, base.css

Sections > header.liquid: This file typically controls the main header structure of your theme, including navigation, logos, and often the cart icon.
Snippets > header-search.liquid: Many themes, especially Dawn, separate the search functionality into a reusable 'snippet' file for modularity.
Assets > base.css: This is your theme's primary stylesheet, where you'll add custom CSS rules to override default styles and ensure your new text elements are properly formatted.

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

Navigate to Online Store > Themes > Actions > Edit code. Then open Sections > header.liquid.

Search for the original cart icon code block (around line 288 in Dawn 15.x):


  {% 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:



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

This code directly inserts the text "CART" and dynamically displays the item count if the cart is not empty. The original `svg-wrapper` and `visually-hidden` spans are removed, as their functionality is now handled by the visible text.

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

Next, open Snippets > header-search.liquid.

Search for the original search icon code block:


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

Replace it with this simplified text version:


  SEARCH

Here, the `svg-wrapper` containing the search icon is replaced directly with a `` containing the text "SEARCH".

Styling with CSS

Finally, to ensure your new text elements are properly aligned and styled, open Assets > base.css and paste the following code at the very 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;
}

This CSS ensures the text is displayed correctly, removes any default icon styling, and provides basic alignment. The `!important` tags are used to override any conflicting theme styles, ensuring your text links appear as intended.

Solution 2: The CSS-Only Approach (For Minimal Liquid Edits)

An alternative, less intrusive method, proposed by tim_tairli, uses CSS to hide the existing icons and inject text, without directly altering the Liquid structure as much. This can be beneficial for theme updates, as it minimizes direct modifications to core Liquid files.

Why a CSS-Only Solution?

The primary advantage of a CSS-only solution is that it reduces the number of direct changes to your theme's Liquid files. This can potentially make future theme updates smoother, as you're less likely to encounter conflicts with updated Liquid code from Shopify.

Implementing the CSS-Only Solution

Open Assets > base.css and paste this code at the bottom of the file:

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

This CSS block works by:

Hiding the original SVG icons using `display: none;`.
Making the `visually-hidden` text (which originally provided accessibility for screen readers) visible and styling it.
Using CSS `content` property (`:before`, `:after`) to inject the "(" and ")" around the cart count and the "Search" text for the search icon.

Alternatively, you could wrap this CSS code in

Shopify Dawn Theme: Custom Text for Cart & Search Icons