How to Add Custom CSS to Shopify Theme

The fastest way to add custom CSS to a Shopify theme is through the Theme Editor: go to Online Store → Themes → Customize → Custom CSS. This requires no code access and changes apply immediately. For more control - custom fonts, global overrides, or file-level changes - you'll need the Code Editor method covered in the steps below.

Before customizing with CSS, make sure you're working with the right theme. If you're still deciding on a base theme, see our guide on how to get free Shopify themes from the official store before you start building your custom styles on top of it.

What Can You Do with Custom CSS in Shopify?

Custom CSS lets you change fonts, colors, spacing, button styles, and layout elements that the Theme Editor's visual controls don't expose. Common uses include resizing product images, hiding elements on specific pages, changing button hover colors, and adjusting mobile breakpoints. You're writing standard CSS - the same rules apply as on any website, with a few Shopify-specific restrictions.

If you're adjusting layouts for mobile, you'll need to understand media queries for responsive design - the @media rules that apply different styles based on screen width.

When writing media queries, it helps to check your screen resolution first - useful for verifying that your breakpoints fire at the exact pixel widths you intend.

Method 1: Add Custom CSS via the Theme Editor (No Code Required)

This is the quickest approach and works in all modern Shopify themes (Dawn, Debut, and any theme built on Shopify's Online Store 2.0 framework).

1. From your Shopify admin, go to Online Store → Themes.
2. Click Customize next to your active theme.
3. In the left panel, scroll to the bottom and click Custom CSS.
4. Paste or type your CSS rules into the text field.
5. Click Save.

Changes go live immediately. This method has a 1,500-character limit for theme-wide CSS and 500 characters per section - ideal for small tweaks. For larger stylesheets, use Method 2 below.

Considerations Before Using Custom CSS

Before adding custom CSS to your Shopify theme, be aware of these limitations:

• The following at-rules are blocked: @import, @charset, and @namespace.
• At section level, only @media, @container, @layer, and @supports are permitted.
• You cannot target the .shopify-section class directly at section level.
• Only the https://cdn.shopify.com domain is allowed for URLs in CSS.
• Custom fonts are supported but add an extra HTTP request - test for performance impact.
• Theme-wide CSS is capped at 1,500 characters; section CSS at 500 characters.
• Theme updates may break custom CSS if you've targeted classes that change between versions.

Method 2: Add Custom CSS via the Code Editor

Step 1: Access the Code Editor

The code editor gives you full file-level access to your theme's assets. Here's how to open it:

1. Go to Online Store → Themes.
2. Next to your active theme, click Actions → Edit code.
3. Expand the Assets folder to see your theme's CSS files.

Step 2: Create a Custom CSS File

Don't edit the theme's base CSS files directly - they'll be overwritten on the next theme update. Create a dedicated file instead:

1. In the Assets folder, click Add a new asset.
2. Select Create a blank file and name it custom.css.
3. Add your CSS rules to this file and save.

Step 3: Link the Custom CSS File

The file won't load until you reference it in your theme's main Liquid layout. Here's how to link it:

1. Open the Layout folder and click theme.liquid.
2. Find the line that references your base CSS: {{ 'base.css' | asset_url | stylesheet_tag }}
3. Add a new line below it: {{ 'custom.css' | asset_url | stylesheet_tag }}
4. Save the file.

Shopify Custom CSS Examples

Here are practical Shopify custom CSS examples you can drop into your custom.css file or Theme Editor:

Change the Add to Cart button color:

.btn--add-to-cart {
  background-color: #e63946;
  border-color: #e63946;
}

Increase product title font size on mobile:

@media (max-width: 768px) {
  .product-single__title {
    font-size: 22px;
  }
}

Hide the announcement bar on mobile:

@media (max-width: 768px) {
  .announcement-bar {
    display: none;
  }
}

Note: Class names vary by theme. Use your browser's Inspector tool (right-click → Inspect) to find the exact class names used in your active theme before writing rules.

No-Code Alternative: Shogun Page Builder

If you'd rather not touch code at all, Shogun Page Builder lets you apply visual CSS-like styling changes through a drag-and-drop interface. It's particularly useful for landing pages and custom product layouts without touching theme files.

Conclusion: How to Add Custom CSS to Shopify Theme

For small tweaks, the Theme Editor's built-in Custom CSS field is the fastest route - no code access needed, changes are instant. For larger stylesheets or changes that need to persist through theme updates, create a dedicated custom.css file in the Code Editor and link it in theme.liquid. Either way, always test changes on a duplicate theme before pushing to your live store.