Custom CSS

Custom CSS lets you add your own style rules to override the theme. It is a native Shopify field, not a Helix setting: it appears in the theme editor on Theme settings and on individual sections and blocks. Theme-level CSS applies storewide; section- or block-level CSS is scoped to that element.

This is intended for advanced users. Custom overrides are not part of Helix's supported styling and can conflict with theme updates.

---

How to Add Custom CSS

Step 1 — In the theme editor, open Theme settings (for storewide rules) or select a section or block (for scoped rules), then find the Custom CSS field.

Step 2 — Enter your rules. No <style> tag is needed:

.banner__heading {
  font-size: 3.5rem;
}

Step 3 — Save.

Alternatively, add a Custom Liquid section or block and place your rules inside a <style> tag. Use this when you also need Liquid or HTML alongside the CSS:

<style>
  .banner__heading {
    font-size: 3.5rem;
  }
</style>

---

Common Use Cases

Adjust a specific heading size without changing the global typography:

.banner__heading {
  font-size: 3.5rem;
}

Hide an element:

.product-information__vendor {
  display: none;
}

Style rich text links:

.rte a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

---

Guidelines

Use specific class selectors so a rule only affects the elements you intend. The CSS is not validated, so preview in the theme editor before saving.

Avoid !important. Prefer a more specific selector instead — it keeps overrides easier to maintain across theme updates.

---

Need help?

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

Chat with us Submit a ticket