---
title: Add custom CSS or edit template code
url: https://support.troopthemes.com/guide/emerge/adding-css-editing-template-code/
theme: Emerge
theme_styles: Cafe, Elements
---

# Add custom CSS or edit template code in Emerge

Use **Theme settings** → **Custom CSS** (the whole store) or a section's own **Custom CSS** field (just that section) for one-off exceptions the settings do not cover. Do not start here for colors, type, spacing, or buttons, those have Theme settings.

Checkout is unchanged, custom CSS does not apply there. Prefer settings over CSS; prefer CSS over editing Liquid.

> **Before you begin**
>
> Modifying theme code in the template editor requires some basic knowledge of CSS, HTML and Liquid so be sure you're comfortable with those areas before attempting any.
>
>  Check out Shopify's [guide to editing theme code](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code).
>
>  Visit [W3Schools](https://www.w3schools.com/Css/) for a quick CSS tutorial.
>
>  Support can point you to the right field, but debugging your own CSS or Liquid is outside [what we can help with](https://support.troopthemes.com/submit-a-support-ticket/).

> **Create a backup**
>
> We recommend making your customizations on an unpublished version. Go to **Actions** → **Duplicate** first.

## Adding CSS to the whole store (Emerge)

**Edit theme** → **Theme settings** → **Custom CSS** → add your code → **Save**.

![Location of the Custom CSS box in Theme settings](https://support.troopthemes.com/_images/custom-css--theme-settings.png)

This applies everywhere on the storefront and is capped at 1,500 characters. If a change only needs to apply to one section, add it there instead, see below.

## Adding CSS to one section (Emerge)

Select the section → scroll to the bottom of its settings panel → **Custom CSS** → add your code → **Save**.

![Location of the Custom CSS box in section settings](https://support.troopthemes.com/_images/custom-css--section-settings.png)

This applies to that section only, and is capped at 500 characters. Only the `@media`, `@container`, `@layer`, and `@supports` at-rules are allowed here.

## What custom CSS can't do (Emerge)

- No `@import`, `@charset`, or `@namespace`, at either the theme or section level.
- No `content` property.
- Can't target the `shopify-section` wrapper element.
- Any URL you reference has to be on `https://cdn.shopify.com`.
- Custom CSS overrides your theme's built-in settings, it always wins, so a Theme setting and a Custom CSS rule that disagree will show the CSS.
- Not supported on the checkout page.
- Updating your theme can break selectors your CSS depends on, recheck custom CSS after an update.

## Advanced: editing CSS directly in template code (Emerge)

These two options require editing Liquid files in the code editor, not just filling in a settings field. They're for merchants and developers comfortable working in the theme's code.

### custom-styles.liquid (Emerge)

Every theme ships an empty `custom-styles.liquid` snippet in _Snippets_, rendered as a plain `<style>` block on every page. It has none of the native Custom CSS field's restrictions, no character limit, `@import` is fine, you can target anything, so it's the option for larger stylesheets or CSS the Theme settings field won't accept.

The trade-off: it's a theme file, not a setting, so a theme update overwrites it and any CSS you added is lost unless you copy it back in afterward. **Custom CSS** in Theme settings is stored as theme data and survives updates, that's why it's the default recommendation, `custom-styles.liquid` is there for merchants who specifically want it.

### A section or snippet's own stylesheet (Emerge)

Most sections, blocks, and snippets already carry their own [`{% stylesheet %}`](https://shopify.dev/docs/api/liquid/tags/stylesheet) block. This is where that component's CSS actually lives. If you're editing a section or snippet's code directly, its styles are usually right there in that block rather than in a separate file.

A few things to know, from Shopify's [stylesheet tag reference](https://shopify.dev/docs/api/liquid/tags/stylesheet): each file can hold only one `{% stylesheet %}` block, Liquid isn't rendered inside it (no `{{ }}` or `{% %}`, plain CSS only), and Shopify [combines and subsets these automatically](https://shopify.dev/docs/storefronts/themes/best-practices/javascript-and-stylesheet-tags#stylesheet) into one stylesheet per page, only pulling in the files actually used on that page, you don't link to them yourself. Same trade-off as `custom-styles.liquid`: it's part of the theme file, so a theme update overwrites your edits.

---
> **Need additional help?**
>
> If you're wanting to make more complex customizations, you can consider hiring a Shopify Expert or a third party developer.
>
> Read more about our recommendations for theme [tweaks and customizations](https://support.troopthemes.com/support/tweaks-customizations/).
>
> The [Shopify Community](https://community.shopify.com/) is also a great resource for advice from other store-owners on a wide range of topics.

## Ask Sidekick <img src="/_images/sidekick-icon.png" alt="" class="sidekick-icon"> (Emerge)

For a one-off block, Shopify's [Sidekick](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/sidekick) can write it for you: **Add block** → **Generate** (where available) turns a plain-language description into the Liquid, HTML, and CSS, previewed in the theme editor before you keep it.

> "Add a block with a badge icon and a short trust message."

That's often faster than hand-writing a section's `{% stylesheet %}` block or reaching for Custom CSS, and it doesn't cost you a developer for something small. See Shopify's [guide to generating theme blocks](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/shopify-magic/generate-blocks) for eligibility and limits, Shopify support won't debug what it generates, that's still on you or a developer.

![Opening Sidekick from the theme editor toolbar](https://support.troopthemes.com/_images/emerge/sidekick--theme-editor.png)

## Troubleshooting (Emerge)

- **You can do it in Theme settings**: use those instead. CSS fights the next update and the next setting change.
- **Styles missing after an update**: they were in `custom-styles.liquid` or a section/snippet's `{% stylesheet %}` block, which the update overwrites. Move them to **Custom CSS** in Theme settings if you want them to survive updates.
- **Custom CSS won't save**: you're over the character limit (1,500 theme-wide, 500 per section), or used an at-rule or property that isn't allowed.
- **Checkout is unchanged**: expected. Checkout is not the theme.
- **An app's CSS is winning**: disable the app embed; don't override it with more CSS until you know the owner.