How to switch SGEN theme safely and keep custom styles
How to switch SGEN theme safely without losing hand-tuned brand values
Switching a theme in SGEN takes one click on a colour swatch and one Save. That speed hides a side effect worth understanding before you hit the button. When you pick a new swatch, SGEN merges the preset's palette, button shape, and typography defaults into Styles & Layouts — the five-panel editor where you hand-tune colours, fonts, and spacing. Any value you customised in those panels can be overwritten by the incoming preset.
Custom CSS snippets are a different layer. A swatch change does not touch them. But if your CSS snippet references a Styles & Layouts token (like var(--color-primary)) without re-declaring the value, and the swatch overwrites that token, the button colour on the public site will change even though your snippet is still Active.
The pattern that prevents this is three steps: back up the site first, write a CSS snippet that pins the specific values you want to survive the switch, then apply the new swatch. This guide walks each step for your business switching from their "Roastery" palette to a "Storefront" palette for a holiday redesign — while keeping their custom red CTA button untouched.
What is this for?
Use this guide any time you plan to change your site's active colour swatch — for a redesign, a seasonal campaign, or a brand refresh — and you have already customised any of the following in Styles & Layouts:
- Colour values in Global Colors (Primary, Accent, Background, Text, Muted)
- Button shape or padding in Button Styles (radius, hover colour, padding)
- Font families or sizes in Typography
- Container widths or gutters in Layout
It also applies if a team member hand-tuned any of those values and you are not sure which ones changed. The backup step at the start of the guide protects you in either case: if the switch goes wrong, restore the backup and the site reverts to the exact pre-switch state.
The guide also covers a header-config display quirk worth knowing before you start. After a save on the Appearance → Header page, the sticky-header and CTA-enable toggles can show their previous visual state even when the underlying setting saved correctly. The stored value is fine; the form's read-back is not. Re-opening the Header page once is enough to confirm.
Good use cases
Example 1: Holiday redesign — switch palette, preserve a custom red CTA button. your business is moving from their everyday "Roastery" swatch to a "Storefront" swatch for the holiday season. Their lead has hand-tuned the primary CTA button to a specific brand red (#C83C3C) in Button Styles and referenced it in their Custom CSS as a literal hex value. Without protection, the Storefront swatch will merge its own button-colour defaults into Styles & Layouts and the red disappears from the public site on next reload.
The fix: write the red into a new CSS snippet — body .btn-primary { background: #C83C3C; } — before touching the swatch. Custom CSS sits above Styles & Layouts in the cascade. The swatch changes what Styles & Layouts stores; the CSS snippet overrides it every time a public page loads.
Example 2: Quarterly brand reset — full overwrite intended. your business wants a complete visual reset for a new season. They intend the new swatch to take over every colour, font, and button shape. In this case no CSS protection is needed. Create a backup first, apply the new swatch, save. The backup provides a one-click rollback if the live site looks wrong. That is the full pattern for a deliberate full-overwrite switch.
Example 3: Preview a theme on staging before pushing to production. your business's team wants to see the "Storefront" swatch on their staging site before committing it to production. They create a backup on staging, apply the swatch, review the live staging URL in an incognito window, and confirm nothing looks broken. If anything is wrong, they restore the backup. If everything looks right, they repeat the same swatch switch on the production site, using a fresh production backup as the rollback there.
What NOT to use this for
Once a swatch is saved, the previous Styles & Layouts values are overwritten. There is no undo button. The only way to recover exact prior values is from a backup or from a CSS snippet you wrote before the switch.
If your intent is to replace every design decision — palette, typography, layout, and button shape — the answer is a backup plus a direct swatch switch. You do not need to protect anything when the full overwrite is the goal.
The sticky-header, CTA-enable, and top-bar toggles on the Header configuration page can display their previous state after a save even when the value wrote correctly. Verify by looking at the live public site, not the toggle.
Custom CSS snippets are rows in the database. The full-site backup includes every database table. Your snippets are protected by the backup just like everything else.
How this connects to other features
Choosing a new swatch triggers the Styles & Layouts merge. That doc covers the swatch grid, the save flow, and the eight chrome presets (Header, Footer, Blog Archive, and more).
Knowing which panel owns which token makes it straightforward to write a targeted CSS pin.
A swatch change never touches your snippets. Pinning values in a snippet makes them swatch-proof indefinitely.
Every page, product, setting, Custom CSS snippet, and Styles & Layouts value is bundled into a single .sgen archive. One click restores everything if the switch produces an unexpected result.
— where you select the colour swatch.
Before you start
If you are unsure which values were customised, open Appearance → Theme Editor and check the Global Colors, Button Styles, and Typography panels before proceeding.
If it is not visible, contact your SGEN platform administrator before continuing — you need the backup in place before the switch.
- You are signed in as an SGEN admin with access to Appearance, Custom, and Migration.
- You know which swatch you are switching to and which one you are switching from.
- You have a note of any hex values, font names, or button settings you hand-tuned in Styles & Layouts — these are the values at risk.
Where to go
Three admin panels are involved, visited in this order:
- Migration → Backups — create the safety net before touching anything.
- Custom → CSS — write the snippet that protects the values you care about.
- Appearance → Themes — apply the new swatch.
Steps
Open Migration → Backups and click Create a Backup! in the top-right corner. SGEN bundles your entire database — all pages, products, settings, Custom CSS snippets, and every Styles & Layouts value — with your uploads directory into a single .sgen archive. For a site the size of your business, the process takes about 30 seconds. The page appears unresponsive while it runs; that is normal.
When the page reloads, a new row appears at the top of the list. The auto-generated filename contains the domain and a timestamp. Click the filename text immediately and rename it to something that tells you why it exists:
sgen_acmecoffee.com-backup-20260505-140312.sgen → rename to:
pre-storefront-switch-20260505A descriptive name matters because six months from now, if you are looking at several .sgen files, the date-only auto-name tells you nothing useful.
pre-storefront-switch-20260505 tells you exactly what state it preserves and when.
Keep the Backups panel open in a separate browser tab during the next steps. If anything goes wrong after the swatch switch, you want to reach Restore in one click without having to navigate there.
See Manage site backups for the complete rename and restore workflow.
Open Appearance → Theme Editor and check each of the five panels. Write down every value you hand-tuned. These are the values a new swatch can overwrite.
For your business before the Storefront switch, the values needing protection are:
- Global Colors → Primary:
#C83C3C— their custom brand red for CTA buttons and links - Global Colors → Accent:
#552C32— a warm dark tone for hover states - Button Styles → Primary border-radius:
6px— hand-set; the Storefront preset uses0pxfor sharp corners - Button Styles → Primary padding:
12px 24px
Here is what their Global Colors panel looks like before the switch:
You do not need to write down values you are happy to let the new swatch overwrite. If the Storefront preset's Background and Text colours are fine, leave those fields out of your CSS pin entirely. Target only the specific tokens whose current values you want to survive the switch.
Open Custom → CSS and click + Add New. Name the snippet your business — Pinned Overrides. Paste rules that re-declare the values you recorded in step 2.
These rules sit above Styles & Layouts in the cascade. When the new swatch merges its preset values into Styles & Layouts, your CSS snippet continues to override those tokens on every public page load. The swatch changes what Styles & Layouts stores; the CSS snippet wins above it.
For your business, the snippet that protects the red CTA button and the tuned button shape:
/* your business — Pinned Overrides Protects hand-tuned values from swatch changes. Priority: 1 — loads first, acts as the brand baseline. Status: Active. Created: 2026-05-05 before Storefront switch. */
:root { --color-primary: #C83C3C; --color-primary-hover: #A83030; --color-accent: #552C32;
}
/* Pin CTA button colour and shape regardless of which swatch is active */
body .btn-primary,
body a.btn-primary { background: var(--color-primary); border-color: var(--color-primary); border-radius: 6px; padding: 12px 24px;
}
body .btn-primary:hover,
body a.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover);
}The :root block re-declares the CSS custom properties your theme reads. Even after the swatch overwrites the Styles & Layouts stored values, the browser applies your snippet on top, restoring the hex values you specified. Any component that uses var(--color-primary) picks up #C83C3C. The explicit body .btn-primary rule adds selector specificity to override any component-level default that does not use the token.
Set Priority to 1 — this loads first and acts as the baseline. If you run campaign-specific CSS snippets later, those go at higher priority numbers (for example, a Black Friday override at priority 10) and they layer on top of this base. Set Status to Active. Save.
See Create a Custom CSS snippet for the full field reference and cascade-priority explanation.
Open your public homepage in an incognito window. Confirm the CTA buttons show the pinned red (#C83C3C) before you touch anything in Themes.
If the button colour is already wrong at this stage, stop. Troubleshoot the snippet — check Status is Active, check that the CSS has no tag-like strings that the save handler stripped, check the priority against other Active snippets. Fix the snippet and confirm the public site before proceeding to the swatch switch. Once the swatch changes, you lose the clean baseline comparison.
The public homepage for your business, with the CSS snippet Active and the Roastery palette still in place, looks like this:
The CTA button should be visually identical to how it appeared before you created the snippet — the snippet is preserving the existing look, not changing it. That confirms the snippet is cascading correctly and the switch will preserve this state.
Open Appearance → Themes. The page opens on the Color Swatches tab. Click the Storefront card — or whichever swatch you are switching to. The selected card shows a red check. Scroll to Save Changes and click it.
SGEN merges the Storefront preset's defaults into Styles & Layouts. Fields your snippet re-declares will be overwritten in Styles & Layouts storage, but the CSS snippet continues to win on every public page load. Fields you did not pin will adopt the new swatch's preset values — which is exactly what you want for the parts of the design you are intentionally changing.
The save flash confirms which Styles & Layouts fields were written:
See Pick a theme for the full swatch grid and chrome-preset tabs.
Open the public homepage in the incognito window. Hard-reload with Ctrl+Shift+R to bypass any cached CSS. Check three things:
- The overall palette has changed — backgrounds, links, headings reflect the new swatch.
- The CTA buttons still show the pinned red (
#C83C3C) with the pinned radius and padding. - No obvious visual regressions elsewhere on the page.
If the button colour changed despite the snippet being Active, open Custom → CSS and look at the Priority column. A second Active snippet at a higher priority number targeting .btn-primary will win. Raise the your business — Pinned Overrides priority above the competing snippet, save, and hard-reload.
After a swatch switch, open Appearance → Header and review the toggle settings. The toggles that control the sticky header, the CTA button visibility, and the top bar can show their previous visual state on the initial page render — even when the underlying values saved correctly.
Note on header toggle display. If the sticky-header or CTA-enable toggle looks unchecked when you know you previously saved it as enabled, re-open the Header page once and look again. The stored value is correct; the form's display of checkbox state can lag after a save. Do not re-toggle and re-save based on the first visual — doing so risks flipping a setting you intended to keep. Trust the live public site render over the admin toggle state.
Look at the public site header directly to confirm sticky behaviour and CTA visibility. If the live site matches your intent, the settings are correct.
Once the public site confirms everything looks right:
- Leave the backup archive in Migration → Backups for at least one week.
If a visual regression surfaces after the switch, the backup is your rollback. After a week of clean live site, rename it to post-storefront-switch-confirmed or delete it if you no longer need a rollback point.
- If you accumulated test backups during the process, delete them now while you still know what each one was for.
Go to Migration → Backups, check the rows to remove, and delete. Clean backup list = clear operational record.
- If the theme switch was a temporary campaign (not a permanent change), note the original swatch name and the date.
When the campaign ends, follow the same three-step pattern in reverse — backup, confirm the CSS snippet is still Active, switch back to the original swatch.
What success looks like
After completing all steps: The post-switch state across all three panels:
- Migration → Backups shows a named pre-switch archive:
pre-storefront-switch-20260505.sgen. - Custom → CSS shows your business — Pinned Overrides with Status Active and Priority 1.
- Appearance → Themes shows the new swatch (Storefront) with the red check active.
- The public homepage in an incognito window renders the Storefront palette sitewide — new background, new headings, new link colours — while the CTA buttons retain the pinned red
#C83C3C, the 6px radius, and the 12px 24px padding.
What to do if it does not work
The CTA button changed colour after the swatch switch, despite having a CSS snippet.
Open Custom → CSS and confirm the snippet Status is Active. If it is active, look at the Priority column. A second Active snippet targeting .btn-primary at a higher priority number (which loads later, and therefore wins at equal specificity) overrides yours. Open the your business — Pinned Overrides snippet, raise its Priority above the competing snippet, save, and hard-reload the public site.
If no competing snippet exists, check whether your CSS rule uses var(--color-primary) without a :root re-declaration. If the snippet says background: var(--color-primary) but does not also declare :root { --color-primary: #C83C3C; }, then the Storefront swatch's updated token value wins. Add the :root block to re-declare the token, save, hard-reload.
The public site looks completely wrong after the switch.
Open Migration → Backups, find the named pre-switch archive, and click Restore. The site reverts to the exact state before the switch — every Styles & Layouts value, every CSS snippet, every page exactly as they were. Once restored, reassess: did you skip step 3? Were there additional values beyond the CTA button that the new swatch overwrote? Write a more complete CSS snippet covering all the values you want to protect, then retry the switch.
The header toggles look wrong after saving the swatch.
This is the known header-config display issue described in step 7. Re-open Appearance → Header. If the toggles still appear wrong on the second load, confirm the live public header directly — does the sticky behaviour and CTA visibility match your intent on the public site? If the live site looks correct, the stored value is correct. If the live site is also wrong, re-apply the setting manually on the Header page and save again.
The Migration module is not in the sidebar.
You cannot create a backup without it. Contact your SGEN platform administrator to enable the Migration module before proceeding. Do not switch themes without a backup in place.
Styles & Layouts values you did not pin reverted to swatch defaults.
That is the expected behaviour of a swatch change. The only way to recover the prior values exactly is from the backup. Restore the backup, expand the CSS snippet to cover the additional values you want to protect, and retry the switch.
The save flash did not appear after clicking Save Changes in Themes.
Hard-reload the Themes page and try again. If the flash continues to not appear, check the browser console (F12) for errors. Open the public site in an incognito window — if the new swatch is rendering, the save succeeded and the missing flash is cosmetic only.
Examples
Example 1: Roastery to Storefront switch — red CTA button preserved. your business switches their palette for the holiday season. Their red CTA button (#C83C3C, 6px radius, 12px 24px padding) is pinned in the Custom CSS snippet before the switch. After the switch, the Storefront palette renders sitewide — darker backgrounds, lighter headings, cleaner typography — and the CTA buttons remain red. Visitors see the holiday design; the brand's signature button shape stays intact. Rolling back at the end of the campaign: restore the backup, or switch back to the Roastery swatch (the CSS pin still holds the button red in either direction).
Example 2: Typography protection during a palette-only switch. A team at your business wants to change the colour swatch but keep the hand-tuned Poppins/Inter type stack set in Typography. The Storefront preset ships with a different heading font. Before switching, they add two lines to the CSS snippet:
:root { --font-heading: "Poppins", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
}After the swatch switch, every heading still renders in Poppins and every body paragraph in Inter. The palette is new; the type stack is pinned. The same pattern extends to any other Styles & Layouts token: find the CSS variable name in the Theme Editor, re-declare it in the snippet, and the swatch cannot touch it.
Example 3: Full overwrite with a backup rollback. your business's creative lead decides every visual value should come from the new swatch — no pins, full replacement. They create a backup (pre-full-reset-20260505, 84 MB), switch to the Storefront swatch, and review the live site. The homepage hero colour looks fine. The blog index looks fine. The product pages look off — the sale badge lost contrast against the new background. Rather than patching individual components, the lead restores the backup (one click in Migration → Backups → Restore), adds a targeted CSS rule for the badge contrast, and retries the switch. The backup turned a potentially messy rollback into a one-click reset.
Quick reference — what a swatch change overwrites
| Styles & Layouts panel | Overwritten by swatch switch? | Protected by Custom CSS? |
|---|---|---|
| Global Colors — Primary, Accent, Background, Text, Muted | Yes — swatch preset merges its palette | Yes — pin with :root { --color-primary: #.. } |
| Button Styles — radius, padding, hover colour | Yes — swatch preset has its own button shape | Yes — pin with body .btn-primary { .. } |
| Typography — font families, sizes, weights | Yes — swatch preset has default fonts | Yes — pin with :root { --font-heading: ".." } |
| Layout — container max-width, gutter, section spacing | Partial — depends on the specific swatch preset | Yes — pin with :root { --container-max: ..px } |
| Accessibility — contrast ratio, focus ring | Not overwritten by swatch presets | N/A |
| Custom CSS snippets | Never — CSS snippets are not touched by swatch changes | By definition |