Custom CSS

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 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 → `<head>` 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.

Open the theme editor (Customize).
Click the section you want to change.
Scroll to the bottom of the section’s settings panel to Custom CSS.
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.

Open the theme editor.
Go to Theme settings (the paintbrush icon).
Open Custom CSS at the bottom of the settings list.
Paste your CSS and Save.

Longer CSS via `<head>` code

The two fields above are capped at 500 and 1,500 characters. When you outgrow them, use Elixir’s own field:

Go to Theme settings → Extra.
Open <head> tag code.
Wrap your CSS in a <style> tag:

<style>
  .elxr-btn {
    letter-spacing: 0.5px;
  }
</style>

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 <style> block in it.

Find the element you want to change

The AI can’t see your store, so you need to tell it what to target.

Open your store in Chrome.
Right-click the element you want to change and choose Inspect.
In the panel that opens, the highlighted line is your element. Right-click it → Copy → Copy outerHTML.
Paste that into your prompt.

If right-click is disabled on your store, that’s Elixir’s Content Protection setting. Turn it off in Theme settings → Content Protection while you work, then turn it back on.

If you can’t get the HTML, a screenshot with the element circled plus a description (“the price under the product title”) is usually enough.

Let AI write the CSS

Copy this into ChatGPT, Claude, or any AI assistant and fill in the three bracketed lines.

Write custom CSS for my Shopify store (Elixir theme).

WHAT I WANT: [describe the change, e.g. "make the Add to Cart button
full-width on mobile only"]
WHERE I'LL PASTE IT: [a section's Custom CSS, 500 char limit / Theme
settings Custom CSS, 1,500 char limit]
THE ELEMENT: [paste the HTML you copied with Inspect Element]

Rules: output CSS only, no explanation. Stay under the character limit.
No @import and no `content` property. Don't target the shopify-section
wrapper. Mobile is max-width 749px, desktop is min-width 750px. Use
specific selectors before reaching for !important.

Paste the CSS it gives you into the field you named, save, and check the storefront.

If it doesn’t work, reply with this

That didn't change anything. Here are the styles the browser is actually
applying to the element:

[In Inspect Element, click the element and copy the "Styles" panel]

Give me a more specific selector, or add !important where the theme is
overriding you.

A worked example

What you’d send:

WHAT I WANT: Round the corners of my product images on the collection page and add a subtle shadow. WHERE I’LL PASTE IT: Theme settings Custom CSS, 1,500 char limit. THE ELEMENT: <div class="card__media">…

What you’d get back:

/* Round product image corners */
.card__media img {
  border-radius: 12px;
}

/* Soft shadow under each product image */
.card__media {
  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
  border-radius: 12px;
  overflow: hidden;
}

Elixir already has corner radius and shadow settings for product cards in Theme settings → Product cards, so that example is CSS you don’t need to write. Always check the settings first.

Rules and limits

Shopify’s Custom CSS fields reject some things. If your CSS won’t save, it’s usually one of these:

Not allowed	Use instead
`@import`, `@charset`, `@namespace`	Paste the CSS directly, or use the `<head>` code field
The `content` property	Add the text in the section’s settings instead
Targeting the `shopify-section` wrapper’s ID or class	Target an element inside the section
Images from other domains	Upload to Shopify (Content → Files) and use the `cdn.shopify.com` URL
More than 500 / 1,500 characters	Move it to the `<head>` code field

Inside a section, only @media, @container, @layer, and @supports at-rules are allowed.

Breakpoints

Elixir uses the same breakpoints throughout, so target them the same way:

/* Mobile */
@media (max-width: 749px) { … }

/* Desktop */
@media (min-width: 750px) { … }

/* Large screens */
@media (min-width: 990px) { … }

Troubleshooting

Nothing changed after I saved

The theme’s own styles are winning. Ask the AI for a more specific selector, or add !important to the property. Also confirm you pasted into the right place, since section-level CSS only affects the section you had selected.

It works on desktop but not mobile

Your rule is probably being overridden inside a media query. Wrap the mobile version in @media (max-width: 749px) and set it there explicitly.

Shopify won't let me save the CSS

You’ve hit a limit or a blocked rule. Check the table above. Most often it’s the character limit or an @import. Move the CSS to Theme settings → Extra → <head> tag code, which has neither restriction.

My CSS stopped working after a theme update

Class names can change between versions. Re-inspect the element, get the new class name, and ask the AI to update the selector. Custom CSS lives in your theme settings rather than in code files, so an update doesn’t erase it. Selectors can go stale though, so re-check your customizations after a major update.

I broke something and want to start over

Clear the Custom CSS field and save. Nothing else is affected, because custom CSS never modifies your theme’s code.

Custom CSS overrides your theme settings. If a color or size won’t budge from the settings panel later, check whether an old CSS rule is pinning it.

Getting started

Guides

Resources

Support

Where to add CSS

Section-level CSS

Theme-level CSS

Longer CSS via `<head>` code

Find the element you want to change

Let AI write the CSS

If it doesn’t work, reply with this

A worked example

Rules and limits

Breakpoints

Troubleshooting

​Where to add CSS

​Section-level CSS

​Theme-level CSS

​Longer CSS via <head> code

​Find the element you want to change

​Let AI write the CSS

​If it doesn’t work, reply with this

​A worked example

​Rules and limits

​Breakpoints

​Troubleshooting

Where to add CSS

Section-level CSS

Theme-level CSS

Longer CSS via `<head>` code

Find the element you want to change

Let AI write the CSS

If it doesn’t work, reply with this

A worked example

Rules and limits

Breakpoints

Troubleshooting