How to do a site rebrand SGEN without downtime

Open Migration → Backups and click Create a Backup! in the top-right corner. SGEN bundles the complete database — every page, post, product, setting, Custom CSS snippet, and Styles & Layouts value — with the uploads directory into a single .sgen archive. The page appears unresponsive for about 30 seconds while it runs; that is normal.

When the page reloads, a new row appears at the top of the list. Click the auto-generated filename immediately and rename it to something descriptive:

sgen_acmecoffee.com-backup-20260505-091500.sgen → rename to:
pre-rebrand-20260505

Keep the Backups panel open in a separate browser tab throughout the entire sequence. If anything looks wrong at any point, Restore is one click away.

See Manage site backups for the full rename and restore workflow.

Before touching any design panel, write a CSS snippet that locks the values you want to carry forward into the new brand. Custom CSS loads above Styles & Layouts in the cascade — a swatch switch overwrites what Styles & Layouts stores, but your snippet continues to win on every public page load.

Open Custom → CSS and click + Add New. Name the snippet your business — Rebrand Safety Layer. Paste rules for every value you recorded in your pre-start notes.

For your business, the snippet pins the existing button shape and protects against swatch side-effects during the transition:

/* your business — Rebrand Safety Layer Created: 2026-05-05, before rebrand sequence begins. Purpose: Pin values that must survive the swatch switch in step 6. Status: Active. Priority: 1. Note: --color-primary will be updated to #D44225 at step 6b. */
:root { --color-primary: #C83C3C; /* existing red — updated to #D44225 at step 6b */ --color-primary-hover: #A83030; --color-accent: #552C32;
}
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);
}

Set Priority to 1 and Status to Active. Save. Open the public homepage in your incognito window and confirm the site still looks correct before continuing. The snippet should not change anything visible yet — it is preserving the existing look.

See Create a Custom CSS snippet for the full field reference.

Open the Media Library and upload all new brand assets before visiting any Appearance panel. Having the files already in the library means every panel that needs them can pick from it without interrupting the sequence.

Assets to upload in this step:

• Logo — light variant (acme-coffee-logo-light-2026.png) — used in the header on light backgrounds
• Logo — dark variant (acme-coffee-logo-dark-2026.png) — used in the footer or dark-background header preset
• Favicon (acme-coffee-favicon-32.png) — 32 × 32 PNG on a transparent background
• Recoleta — Regular (Recoleta-Regular.woff2) — new headline font, regular weight
• Recoleta — Bold (Recoleta-Bold.woff2) — headline font, bold weight

Toggle WebP conversion off before uploading font files — WOFF2 files must not be converted. Toggle it on for PNG assets if you want browser-optimised images.

Note the Media Library IDs for the font files. The IDs appear in the URL bar when you open a file's detail view (/sg-admin/media/edit/91, for example — the number at the end is the ID). You will need these IDs in step 5 when registering the Custom Font.

Open Settings → General. Update the three identity fields that change for this rebrand:

• Site Title: your business & Roastery
• Tagline: Small-batch, straight from the roastery
• Site Logo: choose acme-coffee-logo-light-2026.png from the Media Library
• Favicon: choose acme-coffee-favicon-32.png from the Media Library
• Site Email: hello@yourdomain.com (unchanged — confirm it is correct)

Click Save Changes. The site title updates sitewide on the next page-load — browser tabs, email From-Name, and anywhere the site title token surfaces.

After saving, open the public homepage in your incognito window and confirm the browser tab shows your business & Roastery.

See Configure site identity for the full field reference.

Open Custom → Fonts and click Add New Font. Name the font family Recoleta. Add two weight groups using the WOFF2 Media Library IDs you noted in step 3:

Click Publish. SGEN generates an @font-face declaration and inlines it in the <head> of every public page. The family name Recoleta then appears in the Appearance typography pickers.

You do not need to set Recoleta as the active heading font yet — that happens in step 6 when you update Typography.

See Upload and manage custom fonts for the full weight-group setup and file-format details.

This step makes the new brand colour and new font go live sitewide. Three sub-steps happen here — do them in the same session so you see the combined result before moving on.

6a — Update Global Colors

Open Appearance → Theme Editor → Global Colors. Update the Primary value to the new brand red:

• Primary: #D44225 — new your business red
• Primary hover: #B53A1E — a step darker for hover states
• Accent: #552C32 — warm dark tone (unchanged)

Save.

6b — Update the Custom CSS snippet to match the new colour

Open Custom → CSS, edit the your business — Rebrand Safety Layer snippet, and replace the old Primary hex:

:root { --color-primary: #D44225; /* new your business red — updated from #C83C3C */ --color-primary-hover: #B53A1E; --color-accent: #552C32;
}

Save. This keeps the CSS layer in sync with the new Global Colors value. Any component using var(--color-primary) now renders #D44225 whether it reads the token or the CSS snippet.

6c — Set Recoleta as the heading font

Open Appearance → Theme Editor → Typography. Set H1, H2, and H3 to Recoleta. Set body to your current body font (unchanged if not part of this rebrand). Save.

6d — Apply the swatch preset (if switching)

If you are switching to a new colour swatch preset: open Appearance → Themes, click the new swatch card, click Save Changes. Your CSS snippet overrides any token it declares — the swatch cannot overwrite it. If you are only updating colours in Styles & Layouts directly (not switching presets), skip this sub-step.

Open the public homepage in your incognito window and confirm headings render in Recoleta and CTA buttons show the new red #D44225. If either is wrong, see the troubleshooting section.

Open Appearance → Header (within Theme Editor).

Update the following fields:

• Logo: choose acme-coffee-logo-light-2026.png from the Media Library
• Primary CTA text: Shop beans (unchanged for your business — update if your CTA changed)
• Primary CTA URL: /shop
• Secondary CTA text: Subscribe
• Secondary CTA URL: /subscribe

If the nav link order is changing as part of the rebrand, update that in Appearance → Menu separately. The Header panel owns logo, CTAs, and behaviour toggles; the Menu panel owns the link list.

Save.

Note on header toggle display. After saving, the sticky-header and CTA-enable toggles can show their previous visual state even when the underlying value saved correctly. Re-open the Header page once and look again before making changes based on the displayed toggle state. Verify the live public header directly rather than relying on the toggle read-back.

See Configure your site header for the full field reference.

Open Appearance → Footer (within Theme Editor).

Make all footer changes in a single pass before clicking Save. The Footer form saves every column and every widget together as one bundle — half-saves can drop widget content.

Updates for your business:

• Column 1 (About paragraph): update body text to reflect the new tagline: "Small-batch, straight from the roastery. We roast every Monday and ship Tuesday — beans at peak freshness, every week."
• Column 3 (Social links): update Instagram URL if the handle changed; remove any retired platform; add any new one.
• Legal strip — copyright line: update to © 2026 your business & Roastery. All rights reserved.

Save once. Open the public site footer in your incognito window and confirm the tagline paragraph, social links, and copyright line all read correctly.

See Configure your site footer for the column and widget reference.

The Search & Replace tool sweeps every table in the database in a single pass. Run it after the visual rebrand is complete and verified — that way you are replacing clean, confirmed content.

Open Tools → Search & Replace. Run one job at a time. Always start with a dry run for each string to confirm the row count before committing.

Job 1 — Old tagline sweep

Search for: Fresh roasted beans delivered to your door every Friday
Replace with: Small-batch, straight from the roastery
Tables: posts, post_metas, site_settings
Dry run: Yes — confirm row count before committing

Job 2 — Old copyright line

Search for: © 2025 your business
Replace with: © 2026 your business & Roastery
Tables: posts, post_metas, site_settings, custom_codes
Dry run: Yes

Job 3 — Retired URL (if any path changed)

Search for: /blog/old-roastery-tag
Replace with: /blog/roastery
Tables: posts, post_metas, redirects
Dry run: Yes

There is no undo for a committed search-replace job other than restoring the backup. That is why step 1 exists.

See Bulk search and replace content for the full table-selection reference and the dry-run workflow.

Open each of these pages in your private browsing window and confirm the checklist:

If anything looks wrong, check whether it is a CSS layer issue (Custom → CSS), a Styles & Layouts issue (Global Colors panel), or a content issue (page in editor). If a regression is visually severe, restore the backup and reassess before proceeding.

Return to the Migration → Backups tab you left open. Create one more backup now that the rebrand is complete and verified: click Create a Backup!, wait for it to finish, then rename the new row:

sgen_acmecoffee.com-backup-20260505-141500.sgen → rename to:
post-rebrand-confirmed-20260505

You now have two named archives:

• pre-rebrand-20260505 — the clean pre-rebrand state (rollback if needed)
• post-rebrand-confirmed-20260505 — the confirmed post-rebrand state

For the next week, check the public site daily. If a visual regression or a missed text instance surfaces, you know exactly which archive reflects the correct before and after states. After a week of a clean live site, delete the pre-rebrand archive if you no longer need the rollback point.