How to Use CSS in a Shopify Section: 3 Clean Methods
There are three ways to add CSS to a Shopify section, and only one of them scopes cleanly to that section. Here is how to do it without breaking your theme.
Adding CSS to a Shopify section sounds trivial until your new styles leak onto three other pages.
There are three legitimate methods. The one most tutorials show you is the one most likely to cause that leak. Here is all three, in the order I would reach for them.
How Do You Add CSS to a Shopify Section?
The cleanest way to use CSS in a Shopify section is the Liquid {% style %} tag placed inside the section file. Shopify renders its contents as inline CSS only on pages where that section appears, and it can read your section's settings so merchants can control styling from the theme editor.
The other two options are a theme asset file for sitewide styles and a Custom Liquid block for one-off page edits.
Method 1: The Liquid Style Tag (Use This One)
Open your section file in Online Store > Themes > Edit code, under the sections folder. Add a style block near the top.
{% style %}
.my-feature-section {
padding: 48px 24px;
background: {{ section.settings.bg_color }};
}
.my-feature-section__title {
font-size: 32px;
line-height: 1.2;
}
{% endstyle %}
<div class="my-feature-section">
<h2 class="my-feature-section__title">
{{ section.settings.heading }}
</h2>
</div>
Two things make this the right default.
The CSS ships only on pages using this section, so you are not adding weight to every page on the store.
The {{ section.settings }} reference means a merchant can change the background color in the theme editor and the CSS updates. That is the whole point of Online Store 2.0 sections.
Method 2: A Theme Asset File
For styles used across many sections, put them in a real stylesheet.
Create a file in the assets folder, for example custom.css, then load it from theme.liquid inside the <head>:
{{ 'custom.css' | asset_url | stylesheet_tag }}
This loads on every page. That is correct for shared components and wrong for one section's layout. Use it for design tokens, utility classes, and anything genuinely global.
Keep it in its own file rather than editing the theme's main stylesheet. Theme updates overwrite base.css. They will not touch a file you created.
Method 3: Custom Liquid, for One-Off Changes
Most modern themes include a Custom Liquid section you can drop onto any page from the theme editor without touching code.
Add the section, then paste a scoped style block:
<style>
.homepage-promo-banner {
border: 2px solid #111;
border-radius: 12px;
padding: 32px;
}
</style>
<div class="homepage-promo-banner">
<p>Free shipping this week only.</p>
</div>
Good for a temporary promo. Bad as a habit. Styles added this way are invisible to anyone reading your theme code later, which makes them genuinely hard to debug six months on.
Scope Every Class or Regret It
The most common Shopify CSS mistake is styling a generic class name.
Writing .button { background: red; } in a section file does not stay in that section. It hits every button in the theme, because CSS does not care where you declared it.
Prefix everything with the section name:
{% style %}
.promo-hero__button {
background: #111;
color: #fff;
}
{% endstyle %}
For sections that can appear more than once on a page with different settings, scope to the unique section ID Shopify generates:
{% style %}
#shopify-section-{{ section.id }} .promo-hero__button {
background: {{ section.settings.button_color }};
}
{% endstyle %}
That guarantees each instance gets its own styling, which is the behavior merchants expect when they add the same section twice.
Two Things to Avoid
Do not use !important to win a specificity fight. It works once and then makes the next override impossible. Fix the selector instead.
Do not paste large CSS blocks into the theme editor's Custom CSS box under theme settings. It works, but it is invisible to version control and to every developer who touches the site after you.
The Shopify Liquid documentation covers the style tag's full behavior.
The Takeaway
Use the {% style %} tag inside the section for section-specific CSS, an asset file for shared styles, and Custom Liquid only for temporary one-offs. Scope every class name to the section, and use section.id when a section can repeat.
Unscoped CSS piles up fast and it shows in load times. My notes on making a Shopify store faster cover what that costs you, and creating image links without an app uses the same Custom Liquid approach for a different job.
More notes
How to Pause Your Shopify Store: 2 Options and What They Cost
Shopify gives you two ways to pause a store, and they behave very differently. Here is what each one keeps, what it kills, and which to pick.
ShopifyWhat Payment Processor Does Shopify Use? An Honest Breakdown
Shopify's own processor is Shopify Payments, and it runs on Stripe's infrastructure. Here is what that means for your rates, your payouts, and your options.
ShopifyCan You Use Your Own Payment Processor on Shopify? The Real Answer
Yes, you can use your own payment processor on Shopify. Shopify charges you an extra transaction fee for the privilege. Here is when that trade is worth making.
ShopifyHow to Embed a YouTube Video in Shopify: 3 Simple Ways
You can embed a YouTube video in Shopify from the theme editor, a product description, or custom Liquid. Here is each method and the speed cost to watch for.