> ## Documentation Index > Fetch the complete documentation index at: https://docs.ecomelixir.com/llms.txt > Use this file to discover all available pages before exploring further. # Custom CSS > Fine-tune any section with your own CSS, and use AI to write it for you Elixir's settings cover most design changes, so try those first. But when you need something the settings don't expose (a font size on one heading, tighter spacing on mobile, a border on one card), you can add your own CSS without touching theme code. You don't need to know CSS to do this. The [AI prompt](#let-ai-write-the-css) below writes it for you. Try the theme settings first. If a setting exists for what you want, use it. Settings survive theme updates cleanly, and CSS that fights the theme tends to break later. ## Where to add CSS There are three places, from most specific to most general. | Where | Applies to | Limit | | ---------------------------------------------- | -------------------------- | ---------------- | | **Section → Custom CSS** | That one section only | 500 characters | | **Theme settings → Custom CSS** | Every page except checkout | 1,500 characters | | **Theme settings → Extra → `` tag code** | Every page except checkout | No limit | ### Section-level CSS Use this when you're changing one section and don't want the change leaking anywhere else. 1. Open the theme editor (**Customize**). 2. Click the section you want to change. 3. Scroll to the bottom of the section's settings panel to **Custom CSS**. 4. Paste your CSS and **Save**. Shopify scopes this for you. Write plain selectors like `.elxr-btn { ... }` and they only affect this section. ### Theme-level CSS Use this when the change should apply store-wide: every button, every product card, every page. 1. Open the theme editor. 2. Go to **Theme settings** (the paintbrush icon). 3. Open **Custom CSS** at the bottom of the settings list. 4. Paste your CSS and **Save**. ### Longer CSS via `` code The two fields above are capped at 500 and 1,500 characters. When you outgrow them, use Elixir's own field: 1. Go to **Theme settings → Extra**. 2. Open **`` tag code**. 3. Wrap your CSS in a ` ``` This field has no character limit and no restrictions on at-rules, so it's also the fallback when Shopify's Custom CSS field rejects something. Need CSS on a single page only? Add a **Custom Liquid** section to that page and put your `