When you customize Shopify theme CSS directly inside theme files (like base.css or theme.css), your edits can be overwritten after a theme update.

In this tutorial, you’ll learn the safest method to override CSS so your changes stay intact even when the theme gets updated.

---

✅ Why You Should Not Edit Core Theme CSS Files

Files like:

• assets/base.css
• assets/theme.css
• assets/global.css

are replaced during theme updates. That means any changes you make will disappear.

Instead, the recommended method is to create your own override file.

---

📌 Step 1: Create a New Custom CSS File

Go to:

Online Store → Themes → Edit Code

In Assets, click:

Add a new asset → Create a blank file → Name it: custom.css

This will generate:

assets/custom.css

---

📌 Step 2: Load Your Custom CSS File After All Other CSS

This ensures your CSS overrides everything else.

Open:

layout/theme.liquid

Find the last CSS stylesheet inclusion (usually something like):

{{ 'base.css' | asset_url | stylesheet_tag }}

Under it, add:

{{ 'custom.css' | asset_url | stylesheet_tag }}

This ensures your CSS loads last → and overrides everything.

---

📌 Step 3: Add Your Override CSS

Now open:

assets/custom.css

Write your custom or override CSS here.

Example:

/* Override button color */
.button {
  background: #000 !important;
  color: #fff !important;
}

/* Change header background */
header.site-header {
  background: rgba(255,255,255,0.9) !important;
}

Notice the !important is optional but helpful for overriding theme defaults.

---

📌 Step 4: Override Section or Block CSS

You can override any element, even dynamic section CSS.

Example: making product titles bigger:

.product-title {
  font-size: 28px !important;
}

This will apply even if the theme updates its own CSS.

---

📌 Step 5: Avoid Editing Theme Files to Prevent Loss

With this method, you no longer need to edit:

• header.liquid
• product-card.css
• component-product.css
• theme.liquid

Your theme files remain untouched → updates won’t erase your changes.

---

🎉 Final Result

You now have a safe, update-proof way to modify your Shopify theme styles:

• Your custom.css loads last
• Your edits remain after theme updates
• You can freely override any style with clean, organized code