Skip to content

Custom CSS and Liquid

Most small changes do not need a developer or a code edit. Shopify gives every theme two places for them, and both are stored as settings — so they survive theme updates.

Where Applies to
Theme settings → Custom CSS The whole store
Any section → Custom CSS (at the bottom of its settings) Only that section, on that template

Section CSS is automatically limited to its own section, so it cannot break anything elsewhere. Both fields have a character limit and do not accept every CSS feature (no @import, for example) — they are for adjustments, not for restyling a theme.

/* In a section's Custom CSS: tighter headings, quieter links */
h2 { letter-spacing: -0.02em; }
a { text-underline-offset: 0.2em; }

Each Bevel theme documents the classes and design tokens it uses for this — see Strata for developers.

The Custom Liquid section (and the Custom Liquid block, where a theme offers one) accepts HTML and Liquid: an embed code from another service, a small piece of markup, a value from a metafield. Add it like any other section, paste the code, and save.

Use it for things the theme has no setting for. An embed that has to load on every page usually belongs in an app embed instead.

Edit the theme’s files (… → Edit code) only when neither of these can do the job — and keep a note of every change, because a code edit that conflicts with a theme update has to be redone by hand. When in doubt, ask us first: often the setting already exists.