Developer Onboarding SGEN — Six Power-User Surfaces
You have been handed access to a SGEN site and your brief is to set up tracking, lock in brand overrides, clean up legacy URLs, and extend SG-Builder components with scoped styles. This guide covers the six surfaces you will reach for most — in the order that keeps a restore point in front of every destructive step. Read each section before you click.
Backup before you build
Export your posts before any bulk operation. Blog Export is your restore point for Search & Replace and redirect changes.
Keep layers separate
Brand tokens go in Custom CSS. Tracking scripts go in Custom Codes. Per-component overrides go in SG-Builder Additional CSS. Mixing these surfaces creates hard-to-trace bugs.
Re-open every record after saving
The admin save flash confirms the request reached the server. It does not confirm the stored value matches exactly what you entered. Re-reading the record is the reliable check.
Six surfaces, one safe sequence
SGEN gives developers and contractors several code-level surfaces that sit between the design layer (themes and SG-Builder) and the raw database. This guide walks all six in the order that minimises risk.
Styles
Custom CSS
Global stylesheets that override the active theme and survive theme switches. Use for brand tokens and site-wide utility classes.
Scripts
Custom Codes
Global HTML snippet injection for tag managers, structured data, and third-party widgets. One snippet per purpose — toggle them independently.
URLs
Redirects
Path-to-path rules for legacy URL migration and page renames. Enter paths only — not full URLs. Use 301 Permanent for changes you intend to keep.
Content
Search & Replace
Bulk string swap across all stored content and settings. Always run the dry run first, read the counts per table, then execute.
Backup
Post Export / Import
Content backup before risky bulk operations. Export covers posts — not pages, products, media, or settings. Take a database snapshot for full-site backup.
Scoped CSS
SG-Builder Additional CSS
Per-component scoped rules that do not pollute global stylesheets. Rules stay on the one component where you enter them. Click Publish after saving — auto-save only writes to builder state.
Where to find each surface
All six surfaces are in the SGEN admin. All require an Administrator role — Editor and Author roles cannot access Custom CSS, Custom Codes, Redirects, or Tools.
Custom CSS
Dashboard → Custom → CSS
Custom Codes
Dashboard → Custom → Codes
Redirects
Dashboard → Redirects
Search & Replace
Dashboard → Tools → Search & Replace
Blog Export / Import
Dashboard → Blog → Export (or Import)
SG-Builder Additional CSS
SG-Builder → select component → Style tab → Additional CSS
Steps
Follow this order. The backup in step 1 is the restore point for steps 4 and 5. Do not skip it.
1
Export a content backup before anything else
Go to Blog → Export and click Export Posts. A download starts automatically. Save the file with a date in the name — for example yoursite-posts-2026-05-05.xml — before proceeding. This is your restore point for steps 4 and 5. If you need to restore: go to Blog → Import, upload the saved file, and SGEN re-imports the posts. Import skips posts that already exist with the same slug.
2
Add brand CSS tokens in Custom CSS
Go to Custom → CSS → Add New. Create one snippet that holds your :root custom properties at priority 1. This snippet needs to exist before you start SG-Builder work — components pick up the tokens automatically.
:root { --brand-primary: #4a2c0a; --brand-accent: #c8793a; --brand-bg: #fdf6ec;
}
body { font-family: 'Inter', system-ui, sans-serif;
}
.btn-primary { background: var(--brand-primary); border-radius: 4px;
}Set Status to Active and Priority to 1. After saving, open the public homepage in a new incognito tab. Right-click → View page source. Confirm your :root block appears inside <head> before </head>. Re-open the snippet from the list and confirm the priority field stored correctly.
3
Add tracking scripts and structured data in Custom Codes
Go to Custom → Codes → Add New. Add one snippet per purpose — GTM at </body> End, structured data at <head>. Keep them separate so you can toggle each independently.
<!-- Google Tag Manager -->
<template data-safe="script" data-attrs="">(function(w,d,s,l,i){ w[l]=w[l]||[]; w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'}); var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''; j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</template>
<!-- End Google Tag Manager -->Replace GTM-XXXXXXX with your real container ID. For structured data, add a second snippet at <head>:
<template data-safe="script" data-attrs=" type="application/ld+json"">
{ "@context": "https://schema.org", "@type": "Product", "name": "Canvas Tote Bag", "brand": { "@type": "Brand", "name": "Your Store" }, "offers": { "@type": "Offer", "price": "30.00", "priceCurrency": "USD", "availability": "https://schema.org/InStock" }
}
</template>After saving, reload the public page and check view-source. Confirm the <script type="application/ld+json"> block appears inside <head>. Note: SGEN strips HTML comments from body-placed snippets — the <script> tag is preserved.
4
Add legacy redirects
Go to Dashboard → Redirects → Add New. Enter paths — /old-page — not the full URL, including the domain and scheme. Use 301 Permanent for any change you intend to keep. Use 302 Temporary for migration windows you will revert. After saving each rule, test it in an incognito tab — open the source path and confirm your browser lands on the destination. Do not test from the same authenticated session you used to save; cached state can mask a misconfigured rule.
5
Run Search and Replace to fix stored internal links
Go to Dashboard → Tools → Search & Replace. Always run the dry run first: enable the Dry Run checkbox, submit, read the counts per table — then disable it and submit again to execute.
Search for: yoursite-staging-host
Replace with: your-live-domain
Tables: All available
Dry run: ON, run first, read counts, then OFF, executeDry-run output for Your Store showed: Pages 14 matches / Posts 6 matches / Settings 3 matches / Redirects 0 matches. After confirming the counts, uncheck Dry Run and submit. Then open at least three public pages and one settings-dependent page (for example the homepage) to confirm no residual references to the old string remain.
6
Scope per-component styles in SG-Builder Additional CSS
For styles that belong to one specific component on one page — a dark hero overlay, a custom card gap, a one-off button radius — use SG-Builder Additional CSS instead of the global Custom CSS list. Open SG-Builder, select the component, open the Style tab in the right-hand panel, and scroll to Additional CSS.
/* Scoped to this Section component only */
.hero-overlay { position: absolute; inset: 0; background: rgba(74, 44, 10, 0.55); pointer-events: none;
}These rules render only on that component's wrapper element. The same class name on a different component will not carry the same styles. After entering Additional CSS, click the SG-Builder Publish button to push the change to the public page. The style panel auto-saves to builder state only — the public page does not update until you publish.
What not to use this for
Each surface has a hard boundary. Crossing them creates bugs that are difficult to trace.
Custom CSS for scripts
Custom CSS accepts style rules only. Anything with a <script> tag goes in Custom Codes.
Custom Codes for page layout
Custom Codes injects into the page shell (<head> or <body>). Page HTML, images, and product blocks belong in SG-Builder.
Search & Replace for surgical edits
The string match is not aware of context — it replaces every occurrence, including partial matches inside HTML attributes. If you need to change one specific paragraph, edit it in SG-Builder or the page editor.
Redirects for query-string routing
SGEN Redirects match on path only. Query strings are ignored.
Export / Import as a full site migration tool
Blog Export covers posts only — not pages, products, media, or settings. Take a hosting-level database snapshot for full-site backup.
Global rules in Additional CSS
Additional CSS is scoped — a rule on a hero Section does not apply to a card Section on another page. Move global rules to Custom CSS.
What to do if it does not work
Each surface has a characteristic failure mode. Check the surface-specific item first before escalating.
Custom CSS
CSS not appearing on the public page
Open the snippet from the list and confirm Status is Active and Priority is a number, not blank. Hard-reload the public page (Ctrl+Shift+R) to bypass browser cache. If the block still does not appear in view-source, create a test snippet with a trivially visible rule — for example body { outline: 2px solid red; } — to confirm Custom CSS is working on this site.
Custom Codes
Code not firing
Open the code from the list and confirm the Placement field matches what you intended. Check Status — Inactive means the snippet is saved but not rendered. For body-placed snippets: SGEN strips HTML comments but preserves the <script> tag — confirm the script tag is present in view-source.
Redirects
Redirect not working
Test in an incognito browser tab — not the authenticated admin session. Confirm you entered a path (/old-page) not a full URL. The Redirects admin has a test-URL preview tool, but always confirm on the live public page — the admin preview has a known edge case on exact-match rules.
Search & Replace
Replace changed something it should not have
Restore from the Blog Export you took in step 1. Go to Blog → Import, upload the backup file, and SGEN will restore the posts. For pages and settings not covered by Blog Export, contact your hosting provider for a database snapshot restore. This is why the dry-run step is mandatory.
Additional CSS
SG-Builder Additional CSS not showing
Confirm you clicked Publish after entering the CSS in the style panel. Auto-save writes to builder state only — the public page does not update until you publish. If you published but the change is not visible, do a hard reload of the public page.
Heads up — The admin save flash confirms the request reached the server. It does not always confirm the stored value matches exactly what you entered. Re-open every record after saving and confirm the fields match what you entered. This is especially important for the Priority field in Custom CSS and the Placement field in Custom Codes.