How to Change the Cart Bubble Color in Shopify Dawn Theme

If you are using the Shopify Dawn theme, you may have noticed a frustrating design limitation: there is no built-in setting to change the color of the cart count bubble independently.

By default, Dawn pulls the color for this little bubble from your Solid Button Label setting under Theme Settings > Colors. This means if you want to change your cart bubble to black, you inadvertently change every button and header element on your site to black as well.

In this tutorial, I will walk you through a quick code snippet to separate these styles, allowing you to customize the cart bubble color without breaking your site's design system.

Step 1: Backup Your Theme

Before editing any code, it is best practice to create a backup. This ensures you have a restoration point if something goes wrong.

1. Go to your Shopify Admin.
2. Click Online Store > Themes.
3. Click the Actions (three dots) button next to your current theme.
4. Select Duplicate.

Step 2: Access the CSS File

We need to modify the base.css file, which controls the styling for the Dawn theme.

1. Once your theme is duplicated, click Edit Code.
2. In the file search bar, type base.css.
3. Locate and open the file inside the Assets folder.

Step 3: Locate the Cart Bubble Class

Depending on your version of Dawn, the line numbers may vary, but we are looking for the .cart-count-bubble class.

1. Click inside the code editor area.
2. Press Ctrl + F (or Cmd + F on Mac) to open the search bar.
3. Search for: cart-count-bubble.

You should find a block of CSS that looks similar to this:

.cart-count-bubble {
  border-radius: 50%;
  font-size: 0.9rem;
  background-color: var(--color-button);
  /* other properties... */
}

The line we are interested in is background-color. As you can see, it is currently using the var(--color-button) variable, which ties it to your global button settings.

Step 4: Customize the Background Color

You have two primary options here: using a different theme variable or using a specific color code.

Option A: Use a Secondary Accent Color

If you want the bubble to match your "Accent 2" color defined in your theme settings, you can simply swap the variable.

Change the line to:

background-color: var(--color-base-accent-2);

Note: Because base.css is not a Liquid file, you must use the CSS variable names (e.g., --color-base-accent-2) rather than Liquid objects.

Option B: Use a Custom Hex Code

If you want a completely unique color (like a specific blue or turquoise), you can use a Hex code. You can find Hex codes using a tool like HTML Color Codes.

Replace the variable with your code:

background-color: #0000FF; /* Example: Blue */

Best Practice: Comment Your Changes

Whenever you edit theme files, you should leave a comment. This helps you or other developers understand what was changed and when. CSS comments are wrapped in /* */.

Example:

.cart-count-bubble {
  /* Changed cart bubble color - [Date] */
  background-color: #0099ff;
  /* ... rest of the code */
}

Bonus: Changing the Icon Color

If you also want to change the color of the actual cart icon (the bag or cart SVG) to match or contrast with your new bubble, you can inspect the SVG element.

In your CSS, you can usually target the SVG color property directly. If you want the icon itself to be black, for example, you would look for the SVG styling associated with the header and adjust the color property:

color: #000000;

Conclusion

Once you have made your changes, click Save in the top right corner and refresh your live site. Your cart bubble should now be your desired color, independent of your global button settings.

Happy coding!