> For the complete documentation index, see [llms.txt](https://crocode.gitbook.io/elemento-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://crocode.gitbook.io/elemento-docs/custom-css.md).

# Custom CSS

The **Custom CSS** setting allows you to apply additional styling to your store without modifying the theme’s core files. This is useful for minor design adjustments or quick overrides that aren't available through the standard theme settings.

<figure><img src="/files/WYmgSCW4cHASQStpZGpy" alt=""><figcaption></figcaption></figure>

***

#### Custom CSS Field

**Field type:** Text area (code input)\
**Purpose:**\
Add your own CSS rules to target specific elements, adjust layout spacing, modify colors, fonts, and more.

***

#### Examples

```css
/* Change the background color of the announcement bar */
.announcement-bar {
  background-color: #fce4ec;
}
```

> Changes made here are loaded inline with your theme and apply globally.

***

#### How to Add Custom CSS

1. In Shopify admin, go to **Online Store → Themes**.
2. Click **Customize** next to the Elemento theme.
3. Open **Theme Settings → Custom CSS**.
4. Paste your CSS code into the input area.
5. Click **Save**.