The short version
To change the Shopify cart icon, replace the SVG your theme draws it from, working on a copy of the theme: one file on Horizon, two on Dawn.
On Horizon, the header's Menu style setting shows the word Cart instead of icons on desktop, with no code.
Replacing a theme file ends automatic theme updates, and a manual update keeps your edit only if it doesn't conflict with the new version.
Timeline can't bring back an asset file's original, so save a copy of the old SVG before you paste.
The Quick Verdict
Find what you want to change; the sections below give the steps for each row.
| Your situation | Pick | Why |
|---|---|---|
| You want a different icon shape | Replace the SVG on a theme copy: one file on Horizon, two on Dawn | Neither theme's editor has a field for it, and the file edit ends automatic updates |
| You want the word Cart on Horizon | Header › Utilities › Menu style › Text | No code and no file edit, but search turns into a word too, and mobile keeps icons |
| You want the word Cart on Dawn | A developer edit of two Liquid files on a copy, plus CSS | Dawn has no text mode, Custom CSS can't add the word, and the count bubble needs restyling |
| You only want thinner lines or other count bubble colours | Horizon's Icons and Header settings | No code, and a manual update copies editor settings over |
| You want no cart icon at all | Custom CSS, plus another link to /cart | Without it, shoppers lose the header's route to their cart |
| You'd rather not touch code at all | A developer or a Shopify Partner | Shopify Support doesn't write custom code, so a new icon file is developer work |
The cart icon in your Shopify header is an SVG file inside the theme, so changing it comes down to one of four moves: replace that file, switch the header to words, change the word itself, or hide the icon with Custom CSS. The steps below are written for Horizon 4.4.0 and Dawn 16.1.1, the current versions as of November 2026, with a note on the older Dawn layout most forum answers describe.
The table below gives the move for each goal and what it costs later.
Is There a Cart Icon Setting in the Shopify Theme Editor?
Key takeaway
No Help Center page we have found describes such a field either. Third-party themes are their own case: their header settings are whatever their developer built.
The Cart group of Theme settings is where most merchants look first. Its Type field sets how the cart is shown: on Horizon a page or a drawer, with a separate switch, “Add to cart” auto-opens drawer, that decides whether the drawer opens by itself after an add to cart; on Dawn a drawer, a page or a pop-up notification, the three forms Shopify's theme settings page describes for when a product is added. If the drawer is what you came for, our answer on turning on the cart drawer covers it.
- Online Store
- Theme editor
- Theme settings
- Cart
What the editor does offer sits next to the icon rather than in it:
What the theme editor changes about the header cart
| Setting | Theme | What it changes | What it leaves alone |
|---|---|---|---|
| Theme settings › Cart › Type | Horizon: Page or Drawer. Dawn: drawer, page or pop-up notification | How the cart is shown from the header; on Dawn, also what appears after a product is added | The icon in the header |
| Theme settings › Icons, line thickness | Horizon | How thick the lines of the cart icon and most other theme icons are | The shape of the icon |
| Header › Utilities › Menu style | Horizon | Icons or words for the header actions on desktop | The mobile header, which always uses icons |
| Header › cart bubble style and colours | Horizon | The background and text colour of the count bubble | The icon itself |
| Always display the second upright loop on the cart bag | A customization Shopify Support lists, 15 minutes of design time, compatible themes only | Keeps the bag icon's second loop visible at all times, not only once a product is in the cart | Any other part of the icon |
Source: Horizon 4.4.0 and Dawn 16.1.1 code, read November 4, 2026; Shopify Help Center pages on theme settings and theme support customizations.
The last row is the one place Shopify's own help touches the cart icon: its list of customizations Support can make includes always showing the bag icon's second upright loop, which by default appears only once a product is in the cart. It is a fixed design change done for you, not a way to bring your own icon.
Where Your Theme Keeps the Cart Icon
Key takeaway
Which file you replace depends on the theme and, for Dawn, on its version. Horizon, Shopify's current flagship theme, draws the header cart from a single SVG; Dawn swaps between two depending on whether the cart is empty.
Where the cart icon lives, by theme
| Your theme | Cart icon file | Where the theme draws it |
|---|---|---|
| Horizon 4.4.0 | assets/icon-cart.svg, one file | One line in snippets/header-actions.liquid, for the header at every screen width |
| Dawn 15.1.0 and later, including 16.1.1 | assets/icon-cart-empty.svg for an empty cart and assets/icon-cart.svg once it holds a product | sections/header.liquid, and again in sections/cart-icon-bubble.liquid after a product is added |
| Dawn older than 15.1.0 | snippets/icon-cart-empty.liquid and snippets/icon-cart.liquid | sections/header.liquid renders the two snippets |
| Another theme | Search the code editor for icon-cart or cart | The search lists every file and line that mentions it |
Source: Horizon 4.4.0, Dawn 16.1.1, 15.1.0 and 15.0.0 code on GitHub, read November 4, 2026.
To check what your theme uses, open its code editor and search all files. Shopify's Help Center says the results display every instance of your search term and which file it appears in, which is the fastest route in a theme you didn't build.
- Online Store
- Themes
- Edit code
- Search
Your Dawn version shows in the theme's actions menu on the Online Store › Themes page. Dawn moved the icons from snippets into assets in version 15.1.0, released September 12, 2024; the 15.0.0 header still renders them as snippets, which is why older forum answers send you to a folder your theme may no longer use. If you're still on a Dawn older than 15.1.0 and wondering whether to update before editing anything, our theme guide weighs updating the theme you have against changing it.
How to Replace the Cart Icon
Key takeaway
Because the editor has no field for the icon, this is the situation Shopify has in mind when it sets the order of tools for theme changes:
You should only edit your theme's code if you can't make the changes that you need by using a Shopify app or by using the theme editor.
The same page asks that you edit theme code only if you know HTML and CSS and have a basic understanding of Liquid. Swapping one SVG for another is close to the smallest edit there is, so the main risk sits in what happens around it: which copy you work on, and whether you can get the original back. Know the cost before you start: a replaced file takes the theme out of automatic theme updates.
Start on a Copy of Your Theme
Key takeaway
- From your Shopify admin, go to Online Store › Themes.
- Next to the theme you want to change, click ··· to open its actions menu, then click Duplicate, not Duplicate in Canvas. The copy is named Copy of plus the name of the theme.
- Open the actions menu of the copy and click Edit code.
- Online Store
- Themes
- ···
Shopify's duplicating page sets one limit on this step: if you already have 20 themes in your admin, you need to delete one before you can duplicate another. And on a paid theme, you can edit its code only after you've purchased it. A downloaded theme file is a second backup on your own computer; our answer on downloading your theme code covers what it contains.
The code editor opens in a layout modelled on Visual Studio Code: the theme's folders in an Explorer tree on the left, a Search panel, a Save button on the open file's tab, and a Timeline panel under the tree.
Get the New SVG Ready
Key takeaway
Your new icon replaces the code of the original file, so it has to fit the way the theme draws that file. Compare your SVG with the original on four points:
What the original cart icons use
| Check | Horizon: icon-cart.svg | Dawn: icon-cart-empty.svg and icon-cart.svg |
|---|---|---|
| viewBox of the original | 0 0 20 20 | 0 0 40 40 |
| Colour | fill="none" and currentColor, so the icon takes the colour of the header text | currentColor, so the icon takes the colour of the header text |
| Attributes to keep in the new SVG code | aria-hidden="true" on the <svg>, and stroke-width="var(--icon-stroke-width)" on the drawn paths, which keeps the Icons thickness setting working | class="icon icon-cart-empty" or class="icon icon-cart": inside the cart link, the icon class sets the size to 4.4rem |
| File name | Keep icon-cart.svg exactly | Keep both names exactly |
Source: Horizon 4.4.0 and Dawn 16.1.1 code, read November 4, 2026. The viewBox values describe the original icons, not a Shopify requirement.
The format is fixed by the way both themes insert the icon. Horizon and Dawn use Liquid's inline_asset_content filter, which takes only an SVG, JS or CSS file, and the asset must be less than 15KB to be inlined. A PNG or JPG won't work in place of the SVG, so convert the drawing first.
Replace the File on Horizon
Key takeaway
- In the copy's code editor, open the assets folder and click icon-cart.svg. It opens as an image preview.
- Choose Reopen Editor with Text Editor to see the SVG code.
- Copy the whole original code into a text file on your computer.
- Select everything in the file, paste your new SVG, and click Save.
- Online Store
- Themes
- Edit code
- assets
- icon-cart.svg
Horizon inserts the file in one place, in snippets/header-actions.liquid, so one file covers the header at every screen width, whether the cart opens as a page or a drawer. The count bubble is a separate snippet, so it keeps counting over the new icon. When the cart holds a product, Horizon cuts a round notch out of the icon where the bubble sits, and it cuts the same notch out of yours.
Replace Both Files on Dawn
Key takeaway
- In the copy's code editor, open assets and click icon-cart-empty.svg, then choose Reopen Editor with Text Editor.
- Save the original code outside the theme, paste your empty-cart SVG with
class="icon icon-cart-empty"on the<svg>tag, and click Save. - Repeat for icon-cart.svg, the icon for a cart that holds a product, with
class="icon icon-cart".
- Online Store
- Themes
- Edit code
- assets
Dawn draws the icon in two files: sections/header.liquid when the page loads, and sections/cart-icon-bubble.liquid, which its cart script re-renders after a product is added. Both read the same two SVG files, so replacing the files changes the icon in both places. Pasting a new SVG straight into header.liquid would leave the second file on the old icon, and the two would part ways at the first add to cart.
Dawn has a single cart link in its header, so the same files cover the mobile header too.
On Dawn versions older than 15.1.0 the steps are the same, but the files are snippets/icon-cart-empty.liquid and snippets/icon-cart.liquid; as Liquid files they get the Timeline history that asset files lack.
Replacing the icon doesn't change how the cart link is announced in either theme: Horizon labels the link for screen readers with a separate text, and Dawn with its hidden word Cart.
How to Show the Word Cart Instead of the Icon
Key takeaway
The two themes split here. Horizon has a header setting for words instead of icons. Dawn's header already contains the word Cart, but only as text hidden for screen readers, and it has no setting to show it. Theme-wide Custom CSS can't fill the gap either, because Shopify's custom CSS page says the content property isn't available in custom CSS.
On Horizon: Switch Menu Style to Text
Key takeaway
- From Online Store › Themes, click Edit theme on the theme or its copy.
- Click the Header section and scroll to the Utilities group.
- Under Menu style, choose Text instead of Icons, then click Save.
- Online Store
- Theme editor
- Header
- Utilities
Two limits come with the switch. It isn't a cart setting but a header setting: in the Horizon code it changes every action in the header, so search and account become words along with the cart. And it applies on desktop only; the hint under the field reads “Icons are always used on mobile”, and the code matches it. The count bubble stays beside the word.
On Horizon: Change the Word Itself
Key takeaway
In the Horizon code, the word in Text mode comes from the theme's content.cart_title text. Shopify's wording page says you can change the default text in your theme from your Shopify admin without needing to change the theme code, and it uses this exact case as its example: Cart becoming Shopping bag or Basket. In the Horizon 4.4.0 code the same content.cart_title text also heads the cart drawer, so the drawer takes the new word too.
- Go to Online Store › Themes, click ··· next to the theme, and click Edit default theme content.
- Open the Content tab and find Cart title, the row that reads Cart.
- Type the new word and click Save.
- Online Store
- ···
- Edit default theme content
- Content
How to Hide the Cart Icon, and What Shoppers Lose
Key takeaway
The cart page itself doesn't depend on the icon: Shopify's routes object gives the cart address as /cart in its example. To give shoppers a way there, go to Content › Menus, open the menu your header uses, click Add menu item, enter Cart as the label and /cart in the Link field, and save.
Shopify's menu editing page warns that linking to a URL instead of selecting a page directly can disrupt the connection to the menu item and lead to a 404 error, so open the item on your storefront after saving. The item shows wherever that menu is assigned in your theme; our guide to Shopify navigation menus covers how menus attach to the header.
With that route in place, the rule goes in Theme settings › Custom CSS in the theme editor. Shopify's custom CSS limits matter here only in passing: CSS for the whole theme is limited to 1,500 characters, and it applies to every page except checkout. For the full picture of those limits, see our answer on the Custom CSS character limit.
- Horizon:
.header-actions__action:has(.header-actions__cart-icon) { display: none; }targets the cart in both of its forms, the drawer button and the cart page link. - Dawn:
.header__icons .header__icon--cart { display: none; }targets the cart link.
- Online Store
- Theme editor
- Theme settings
- Custom CSS
.header__icon--cart { display: none; }, because Dawn's base.css shows header icons with a more specific selector; the two-class rule above hid it. On Horizon, the add-to-cart animation still ran with the icon hidden, flying off toward the top-left corner of the page, and the product was still added. In the Horizon 4.4.0 code, the Add to cart checkbox in Theme settings › Animations turns that animation off for the product form's button.Check the Copy Before You Publish It
Key takeaway
A new icon can look right on one screen and wrong on the next: Dawn changes icon files when the first product lands in the cart, Horizon cuts a notch for the count, and the colour follows whatever header it sits in. The copy is unpublished, so you can check all of it before a shopper sees anything. Tick the steps as you go; progress is saved in this browser.
Check the theme copy before you publish itRun each check in the copy's preview. If you hid the icon, skip steps one to four and step six, and use step five to test your Cart menu item.
Check the theme copy before you publish it
Run each check in the copy's preview. If you hid the icon, skip steps one to four and step six, and use step five to test your Cart menu item.
Open the copy's preview with nothing in the cart and look at the header icon on a desktop screen.
Before you tick this off
- The new icon shows in the header
- On Dawn, the empty-cart icon is your new icon-cart-empty.svg
- The icon is the same size as the other header icons
Add any product to the cart in the preview and check the icon that replaces the empty one.
Before you tick this off
- On Dawn, the icon changes to your new icon-cart.svg, not the theme's old one
- On Horizon, the notch cut out for the count bubble doesn't break the shape
Read the number on the count bubble beside the icon after one product and after several.
Before you tick this off
- The number is readable
- The bubble doesn't hide the part of the icon that makes it read as a cart
Narrow the preview to phone width, or open it on a phone, and check the mobile header.
Before you tick this off
- The new icon shows on mobile too
- On Horizon with Menu style set to Text, the mobile header still shows icons
Click the icon and confirm the cart opens the way the Type setting says it should.
Before you tick this off
- The drawer or the cart page opens
- If you hid the icon, the Cart menu item opens /cart
Look at pages with a transparent header or another colour scheme, where the icon colour follows the header text.
Before you tick this off
- The icon stays visible on a transparent header over images
- The icon stays visible on every colour scheme the header uses
When every check passes, publish the copy from Online Store › Themes and keep the theme you duplicated from.
Before you tick this off
- If you replaced an SVG, its original code is saved outside the theme
- If you replaced or edited a theme file, you accept that this theme now updates only by hand
- The theme you duplicated from is still in your theme library
What Happens to a New Cart Icon When the Theme Updates?
Key takeaway
Each way of changing the cart icon behaves differently when a new version of the theme arrives. Shopify's theme developer documentation sets the condition for automatic updates: a theme is updated automatically only if all its files, except settings_data.json and JSON files in /templates, are in their original state. Custom CSS added in Theme settings is stored in settings_data.json, so it sits in the excluded file; Shopify doesn't state the conclusion for Custom CSS itself.
What each change does to theme updates
| What you changed | Automatic updates | Manual update to a new version |
|---|---|---|
| A theme editor setting (Type; on Horizon also Menu style, icon thickness, bubble colours) | Shopify says automated updates fix bugs or security issues and don't change your settings | Copied over and applied to the updated theme |
| The word, in Edit default theme content | Shopify's update pages, read November 5, 2026, don't say whether this edit stops automatic updates; they say automated updates make no changes to your content or settings | Carried over to the updated theme |
| A rule in Theme settings › Custom CSS | Stored in settings_data.json, the file the automatic-update condition leaves out | Copied over with the editor settings; check that its selectors still exist in the new version |
| A replaced SVG in assets | Stop running: the file is no longer in its original state | Included if it doesn't conflict with the update; otherwise removed from the updated copy |
| An edited Liquid file | Stop running, for the same reason | Included if it doesn't conflict with the update; otherwise removed from the updated copy |
Source: Shopify Help Center, Updating themes and Adding custom CSS; Shopify developer documentation, Theme updates and Settings. Updates apply only to themes installed from the Shopify Theme Store.
Updates exist only for themes installed from the Shopify Theme Store, and uploaded themes don't update automatically at all. When an automatic update can't run, Shopify notifies you that you can apply it to an unpublished copy of your theme, review it and publish it.
That manual route keeps editor customizations, and keeps code edits on one condition, set out on Shopify's updating themes page: they are included if they don't conflict with the update. When they do, Shopify's code editing page is blunt about the result:
If changes that you've made to a theme's code are incompatible with a theme update, then all your code changes are removed in the updated copy.
The theme card tells you which case you're in. If the edits didn't make it, it reads Theme added: code edits could not be included, and you copy them into the new version yourself. That's the moment your saved SVG pays off: open the new version's icon file and paste it back. For how updates work beyond this one file, see our answer on whether Shopify themes update automatically.
How to Undo a Cart Icon Change
Key takeaway
- A replaced SVG: paste the original code you saved back into the file and save, or publish the theme you duplicated from again. Shopify's Help Center says asset files don't have Timeline history.
- Menu style, Type or another editor setting: switch it back in the theme editor and click Save.
- The word in Edit default theme content: type Cart back into Cart title and save.
- A Custom CSS rule: delete it from Theme settings › Custom CSS and save.
- An edited Liquid file, such as Dawn's header markup or an old Dawn snippet: restore it from Timeline, below.
- In the code editor, open the Liquid file you changed.
- In the Timeline panel under the file tree, right-click the Original entry.
- Click Compare with Current to see the difference, then Restore Contents, confirm with Restore if asked, and save.
- Online Store
- Themes
- Edit code
- sections
- cart-icon-bubble.liquid
- Timeline
Shopify's Help Center sets the limits: it restores one existing file at a time, not a whole theme, and it can't recover deleted theme files. Restoring replaces the whole file contents, including changes you might want to keep, and the history is finite, so older versions might not be available. Deleted files can't be recovered at all, so don't delete the original icon to make room for a new one.
When to Hand the Change to Someone Else
Key takeaway
Who can do the change for you depends on whose theme you run:
- Shopify Support, for free Shopify themes: on the Basic plan or higher, up to 60 minutes of complimentary design time, tracked in 15-minute increments. Per Shopify's theme support page, Support doesn't write custom code or make arbitrary code changes, and can't help with themes that contain significant code changes. On free Shopify themes, it might still be able to assist with a customization that isn't on its list. Keeping the bag icon's second upright loop visible at all times is on its customization list, at 15 minutes of design time, for themes with sections on every page. Our answer on whether Shopify Support will edit your theme code covers the rest of its limits.
- The developer of a paid theme supports their own theme, but Shopify's theme support page says third-party theme developers don't provide customizations.
- A Shopify Partner or freelance developer, for a custom icon, the word Cart on Dawn, or a mobile text header on Horizon. Shopify's Help Center suggests hiring a Partner when you want custom code but lack experience with HTML, CSS and JavaScript, and links to the Shopify Partner Directory. Our guide to hiring a Shopify developer covers the choice of who.
The Bottom Line
Key takeaway
The cart icon is one of the few header details the theme editor leaves to code, so the honest choice is between a setting that does something nearby and a small file edit with a known cost.
Frequently Asked Questions
Front-end developer specializing in Shopify since 2017. Experienced in building custom Liquid themes, optimizing storefront performance, and integrating third-party apps. Directs the editorial process behind Ecom Store Pro: sets its topics and the rules every AI-written page must pass before publication.
This page was written by AI. Separate AI agents that did not write it check its figures and claims against official sources and test its links and interactive tools. A human editor sets the site's editorial direction, topics and rules and checks that pages are complete and display correctly, but does not check their facts or edit their text. Details may change — always confirm critical data at shopify.com.
Editorial PolicySome links in this article are affiliate links. If you sign up for a Shopify store through these links, we may earn a commission at no extra cost to you. Read our full advertising policy.