Manage Custom CSS Snippets
The Custom CSS list at Custom → CSS is your single control surface for every saved stylesheet snippet. From here you can edit rules in place, toggle snippets on and off without deleting them, tune the priority order so the right rule wins when two snippets target the same selector, send old snippets to Trash, and restore them in one click. No redeploy, no cache to bust on the SGEN side.
Soft delete, always recoverable
The Trash action is a soft delete — the CSS is preserved and you can Restore it at any time. Only Delete Permanently removes the row from the database.
Priority controls the cascade
Higher Priority number renders later in <head> and wins on equal specificity. Raise the number of the snippet you want to win.
Inactive is a diagnostic toggle
Toggle a snippet Inactive to pause it while you debug, then re-activate in one click. Changes land on the next public-page reload — no cache to flush on the SGEN side.
What this is for
The list is your inventory of every Custom CSS snippet you have saved. Use it to see at a glance which snippets are Active (rendering on the public site), Inactive (saved but dormant), or in Trash (soft-deleted). From here you can iterate on a snippet, toggle it off temporarily, retire it by moving it to Trash, or tune the priority order so collisions resolve in your favour.
The list also makes periodic maintenance cheap: a Monday-morning pass to flip seasonal ribbons off, a quarterly review to clean out Trash, an end-of-campaign sweep to restore the brand cascade.
Common tasks at a glance
These are the operations you will reach for most often. Each maps to a step below.
Status sweep
Monday morning pass
Open the Active pill. Scan titles. Flip seasonal or debug snippets to Inactive. Five minutes keeps the list clean.
Iterate
Edit during a design review
Click a snippet title, edit the CSS, click Update Custom CSS, hard-reload the public page. Two-second feedback loop — no redeploy.
Retire
Seasonal ribbon end-of-run
Row-hover Trash. The snippet stops rendering but stays recoverable. Restore next season if you want it back.
Cascade
Wrong snippet wins a selector
Open the losing snippet, raise its Priority number above the competing one, click Update. Change takes effect on next public-page render.
Before you start
Confirm these before making changes, especially destructive ones.
Admin access with Custom CSS permission
You need to be signed in as an SGEN admin with Custom CSS access. If Custom → CSS is not visible in the left navigation, contact your site owner.
At least one snippet saved
This guide covers managing existing snippets. To create your first snippet, see the companion Create a Custom CSS snippet guide.
A public page open in another tab
Keep a public page ready for hard-reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) so you can verify changes immediately after saving.
Team agreement before Delete Permanently
For destructive operations, confirm with whoever else maintains the site that the snippet is safe to remove. Hard deletes have no undo.
Find and edit a snippet
Search is a case-insensitive substring match on the title only — it does not search the CSS body. Use the search box (top-right of the list) to filter by title, or browse the pills to narrow the view.
1
Locate the snippet
Use the pill filter and the search box to find the row. If your search returns "No items were found!", clear the search box. Search is on title only — searching for a selector or property will not match.
2
Click the snippet title (or hover → Edit)
The edit form opens pre-filled with the current title, CSS body, Priority, and Status. Make your changes.
3
Click Update Custom CSS
On success, a green banner reads "Custom CSS has been successfully updated!" The change takes effect on the next public-page reload. Hard-reload the browser with Ctrl+Shift+R to skip the browser's CSS cache.
The right rail of the edit form shows row metadata: who authored the snippet, when it was created, and when it was last modified. The Modified date updates every time you click Update — useful when teammates ask "is this fresh?"
Toggle a snippet Active or Inactive
Inactive is a reversible pause — use it as a fast diagnostic toggle, not just an end-of-life state. The public site reflects the change on its next render.
1
Single-row: open the edit form
Click the snippet title, flip the Active switch, click Update Custom CSS.
2
Bulk: select rows + apply
Check the boxes for the snippets you want, pick Move to Active or Move to Inactive from the bulk-action dropdown above the table, and click Apply. The status updates immediately for every selected row.
If you do not see the change after saving, hard-reload the public page. Browsers cache CSS aggressively; a soft reload can show stale stylesheets for many minutes.
Trash, Restore, and Delete Permanently
The three-step lifecycle for retiring a snippet: Trash (soft delete, always recoverable) → Restore (brings it back as Inactive) → Delete Permanently (hard delete, no undo).
1
Send to Trash
Hover a row and click Trash. Confirm the modal. The snippet stops rendering and moves to the Trash tab — the CSS is preserved. To trash multiple rows at once, use the bulk-action dropdown: select rows → Move to Trash → Apply.
2
Restore a trashed snippet
Click the Trash pill. Find the row, hover, click Restore. The snippet returns to the All list as Inactive. If you intend to keep it live, you must also toggle its status back to Active (Step 3 above) before it renders on the public site. Restore is "get the row back" — Activate is "put it live."
3
Delete Permanently
On the Trash tab, hover a row and click Delete Permanently (or use the bulk-action dropdown, which only shows this option on the Trash tab). Confirm the modal. This is a hard delete — no undo, no recovery window. Only do this when you are certain you will never want the snippet back. If you are unsure, leave the row in Trash. It costs nothing to keep.
Tune the priority cascade
Every Active snippet renders inside <head> on every public page. When two snippets target the same selector, the one with the higher Priority number renders later — and later rules in CSS win on equal specificity. Priority 15 wins over Priority 5 when both target the same selector.
To change a snippet's priority: open its edit form, change the Priority number, click Update Custom CSS. The next public-page reload uses the new order.
Convention: keep base brand styles at low priority (1–5), feature toggles in the middle (6–14), and short-term overrides at high priority (15–20). That way emergencies — a Friday-night promo, a hotfix for a broken widget — do not fight the brand cascade.
A worked cascade. Your site has three Active snippets touching the same button:
/* Priority 5 — Your Store Autumn Palette */
.btn-primary { background: #8b4513; border-radius: 12px;
}
/* Priority 10 — Hide Legacy Signup Sidebar */
.btn-primary { padding: 14px 28px; }
/* Priority 15 — Holiday Promo */
.btn-primary { background: #c41e3a; font-weight: 700;
}The rendered button has background: #c41e3a (Holiday Promo wins on background), border-radius: 12px (only Autumn Palette set it, so no override), padding: 14px 28px (only the legacy snippet set it), and font-weight: 700 (only Holiday Promo set it).
When the promo ends, toggling the Holiday Promo snippet Inactive returns the button to autumn brown. No CSS edits needed.
Scoping a rule to one page: Every Active snippet runs on every public page — the Targets column always reads "Global." To scope a rule to one page, prefix the selector with body.page_id-N (where N is the page ID) inside the CSS itself:
/* Scoped to page 42 only */
body.page_id-42 .hero-headline { font-size: 56px; color: #c41e3a;
}Run a bulk action
Bulk actions sit above the list in a dropdown labelled Action For Selected. Available actions depend on which pill you are viewing.
All / Active / Inactive pills
Move to Active · Move to Inactive · Move to Trash.
Trash pill only
Restore · Delete Permanently.
To run a bulk action: check the boxes next to the rows you want (or click the header checkbox to select every row on the current page) → pick the action from the dropdown → click Apply. The page reloads with the new state.
Bulk actions only operate on the current page of results. If your list is paginated and you want to act on rows across pages, do it one page at a time, or filter the list with search first to bring the rows you care about into view.
Maintenance routines
A short cadence keeps the Custom CSS list healthy and scannable as it grows past ten or twenty rows.
Weekly
Status sweep
Open the Active pill on Monday morning. Flip anything seasonal-named or titled staging, debug, or test to Inactive. Five minutes.
Monthly
Title hygiene
Open All Custom CSS. Look for vague titles like Test 2 or css-fix. Rename to something descriptive — for example, Homepage hero button radius. Saves future archaeology.
Quarterly
Trash cleanup
Open the Trash pill with a teammate. For each row ask: "Could we ever conceivably want this back?" If no, click Delete Permanently. Most rows can stay — Trash is cheap.
Annually
Cascade audit
Look for Active snippets that overlap with Theme Editor controls (brand colors, button radius, heading font). Anything the Theme Editor now supports natively: move it there. Theme Editor changes survive SGEN upgrades; Custom CSS rules that fight it are a maintenance tax.
What not to do
A few patterns cause hard-to-diagnose problems. Avoid them.
Do not Delete Permanently for routine retirement
Delete Permanently is inside the edit form and on the Trash tab's bulk dropdown. It hard-deletes the row with no recovery. Use the list's Trash action instead — that is a soft delete you can undo. Trash never expires on its own.
Do not paste secret keys into a snippet
The CSS is rendered verbatim in the public page's <head> on every visit. Anyone who views source can read it. Tracking IDs are fine; private keys and API tokens are not.
Do not treat Custom CSS as a versioning system
There is no history of past edits — only the current value. For brand-critical stylesheets, keep a copy of the previous CSS in a place you control before every major edit.
Do not use Custom CSS to override SG-Builder HTML structure
Custom CSS only changes appearance — colors, sizes, spacing, fonts. To change the HTML structure of a component, edit it in SG-Builder. CSS that hides and replaces large pieces of UI tends to break on the next SG-Builder template update.
Troubleshooting
Common issues and their fixes. If the answer is not here, hard-reload first — it resolves most stale-cache problems.
Cache
Edit saved but page looks the same
Hard-reload the public page (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). Browsers cache stylesheets aggressively. If it still does not appear, try an incognito/private window — that bypasses extension-level caching too.
Missing row
Snippet disappeared from the list
Check the pill filter. If you are on the Active pill, Inactive rows are hidden. Click All Custom CSS to see everything except Trash. If it is still missing, click Trash — someone may have soft-deleted it.
Restore
Restored a snippet but it is not on the public site
Restore lands the snippet as Inactive, not Active. Open the row's edit form, toggle Active, then reload the public page. This is by design — Restore is "get the row back to me," not "put it back live."
Cascade
Two snippets target the same selector and the wrong one wins
The snippet with the higher Priority number wins because higher-priority rules render later in <head>. Open the snippet you want to win, raise its priority above the other one's, click Update. If it still does not win, check that the selectors match exactly — .btn-primary vs body .btn-primary have different specificity, and specificity beats source order.
Bulk action
Bulk action ran but nothing changed
Confirm at least one checkbox was ticked before you clicked Apply. If no rows are selected, the action is a no-op — but the page still reloads, which can look like the action ran.
Hard delete
Clicked Delete Permanently by accident
No recovery. Paste the CSS back from a screenshot or a teammate's copy. Prevention: leave rows in Trash. Trash never expires on its own, so there is no cost to keeping a row there.
Staging vs live
Edited a snippet on staging and the change is not on the live site
Custom CSS is per-site. Staging and live are separate SGEN instances with separate Custom CSS lists. Edits on staging do not propagate to live. To replicate, open the live site's Custom CSS list, paste the same CSS, set the same priority and status, and click Update.
Sanitizer
CSS that uses < or > got stripped
The save handler runs a tag-stripping pass on the snippet body. Combinator selectors or content values that include literal angle brackets may lose them. Encode instead: \3C for < and \3E for >. The encoded form survives the sanitizer intact.
Heads up — Restore always returns a snippet as Inactive, regardless of its status before it was trashed. You always need to toggle it back to Active explicitly. This is intentional: two clicks, two confirmations of intent before a rule goes live.