Guides → CSS not applying — fix it in SGEN

CSS not applying — fix it in SGEN

How to fix CSS that isn't applying

CSS in SGEN can live in three places — Custom CSS, Custom Codes, and SGB Additional CSS — layered on top of your Theme and Styles and Layouts defaults. When something does not render the way you expect, the cause is almost always one of: the CSS is in the wrong layer for the specificity it needs, the snippet is Inactive, the save handler stripped something, or your browser is serving a cached stylesheet. This guide walks the diagnostic in order so you do not waste time poking at the wrong layer. Each check takes under two minutes and they are ordered from fastest to most involved — start at Check 1 and stop as soon as you find the cause.

What is this for?

This guide is a symptom-driven decision tree for the most common CSS question: I saved CSS, but the public site does not show it. It leads you through seven ordered checks — from the fastest (a hard-refresh in incognito) to the most deliberate (cascade specificity audits and layer conflicts) — so you find the real root cause without guessing. The guide covers CSS saved through any of the three SGEN surfaces: Appearance Custom CSS, Appearance Custom Codes (with a style block), and SG-Builder Additional CSS per component. All three surfaces render your CSS on the public site, but they have different scopes, different load orders, and different sanitizer rules — which is exactly why the same rule can behave differently depending on where it lives. Understanding which surface your rule lives in is the prerequisite for every check below.

Good use cases

  • You wrote a new CSS rule, clicked Save, hard-refreshed, and the style still is not showing on the public page.
  • A CSS rule that used to work stopped working after you changed your theme's Color Swatch.
  • Your override is applying on some pages but not others — a scope mismatch between surfaces.
  • A rule with HTML-like text in a content: value saved differently than what you typed.
  • Two snippets seem to be fighting each other and you cannot tell which one wins.
  • You activated a new snippet and the change appears on every page except the one you are targeting.
  • You made a change in Styles and Layouts but the button color or link color did not update on the public page.

What NOT to use this for

  • Debugging SG-Builder layout or spacing that is not controlled by CSS you wrote. If the section width or padding looks wrong in the Builder, the fix is usually the Builder's visual panel, not Custom CSS.
  • Debugging missing pages or 404s. This guide is CSS-specific. Content-not-showing issues have a separate workflow (see Related troubleshooting below).
  • Debugging custom fonts not loading. Font-loading involves network requests and file formats that Custom CSS does not control directly. See the related font-loading guide below.
  • Applying CSS to a third-party embed (a Typeform, a Calendly widget). CSS from Custom CSS does not reach into cross-origin iframes.

Before you start

Before running through the checks, confirm the following:

  1. You are viewing the public URL of the page in a browser, not the admin preview or the SG-Builder canvas.
  2. You have already tried a hard-refresh (Ctrl+Shift+R on Windows / Cmd+Shift+R on Mac) on the public page at least once.
  3. You know which SGEN surface the CSS rule lives in: Custom CSS, Custom Codes, or SG-Builder Additional CSS.
  4. If the rule targets a specific page (homepage, shop, etc.), you are testing on that exact page.
  5. If you are on a team, confirm nobody else saved a conflicting snippet in the same session.

What you will need access to:

  • Admin access to Appearance Custom CSS and Appearance Custom Codes.
  • A browser with DevTools available (Chrome, Firefox, or Edge).
  • The public URL of the page where the CSS should be applied.

Where to go

The relevant admin panels for this workflow, in the order you will visit them:

  • Appearance Custom CSS — your first stop. Shows all CSS snippets with their Status pill (Active / Inactive / Trash) and Priority number.
  • Appearance Custom Codes — your second stop if Custom CSS checks out. Filter to Active to see only what is currently rendering.
  • SG-Builder editor — open any page in the Builder, select a component, look for the Additional CSS trait panel in the right sidebar.

Here is what the Custom CSS list looks like in the admin:

On this page