Your first 30 minutes in SGEN

The 30-minute answer. Six steps, one sitting: Step 1 (0-5 min) — Settings → General: set your site title, tagline, email, timezone, logo, and favicon. Step 2 (5-12 min) — Appearance → Themes: pick a Color Swatch that matches your brand and save. Step 3 (12-18 min) — Appearance → Theme Editor → Header: set your logo, primary CTA button, secondary CTA button, and sticky scroll behavior. Step 4 (18-24 min) — Pages → Add New: create your first real page (e.g. About) with Status set to Draft. Step 5 (24-28 min) — change Status to Published and save. Step 6 (28-30 min) — open the public URL in a new tab and confirm the header, theme color, and page content all look correct. That's the gist — everything below is the same idea in depth.

On this page: What is this for · Before you start · Steps · What success looks like · What to do if it does not work · Next step

How to spend your first 30 minutes in SGEN

You have just finished the quick tour. The site exists. It still reads "My SGEN Site" in every browser tab, the header shows a placeholder logo, and there are no real pages yet.

This walkthrough fixes all of that in thirty minutes — identity, theme, header, first page, publish, and a public-site check. Follow your store, a small online shop, through each step with exact field values and populated form mocks at every stage.

If you have not done the quick tour yet, start with 5-minute SGEN tour first. When you are done here, Your first day picks up from where this walkthrough ends — nav menu, footer, ecommerce, blog.

What is this for?

This walkthrough is the fastest path from a brand-new SGEN site to a publicly reachable page with real branding.

It is structured as a timed sequence — six segments of three to eight minutes each — so you can complete it in one sitting without losing track of where you are. Each segment covers exactly one screen in SGEN. Each segment ends with a concrete output you can verify before moving to the next.

Use this doc on launch day when you are setting up a new site, and use it again as a reset checklist if you inherit a poorly-configured site and need to replace placeholder content with real branding quickly.

The six segments are:

1. Min 0-5 — Site identity (Settings → General)
2. Min 5-12 — Theme (Appearance → Themes)
3. Min 12-18 — Header (Appearance → Theme Editor → Header)
4. Min 18-24 — First page (Pages → Add New)
5. Min 24-28 — Publish (page editor Status field)
6. Min 28-30 — Public site check (open /about in a new tab)

Good use cases

Example 1: New site on launch day. Your store signed up for SGEN on a Monday morning and needed a live About page before the press release went out at 3pm. Following this exact sequence — identity at 9:00, theme at 9:07, header at 9:14, page at 9:22, publish at 9:27, verify at 9:30 — the team had a branded site shell with a live /about page at 9:30, ninety minutes before the deadline.

Example 2: Site handover from a previous owner. A new your store team member inherited a SGEN site that still showed the original agency's placeholder branding. She ran Steps 1-3 to replace the identity, theme, and header in fifteen minutes. Steps 4-6 she skipped — the pages were already built and published. Total time: 15 minutes to a fully rebranded site.

Example 3: Restarting after a false start. The your store team tried to set up their site without a plan and ended up with inconsistent branding — one swatch active in Themes, a different colour hard-coded in a Custom CSS block, and a logo that showed on the homepage but not on product pages. Running this walkthrough from Step 1 reset everything to a consistent baseline. The Themes swatch write in Step 2 reset Styles & Layouts to a clean palette; the Header save in Step 3 confirmed the logo was wired correctly; the Custom CSS block that was overriding the colour was identified and removed.

What NOT to use this for

• Do not use this walkthrough to configure SMTP or transactional email.

The Site Email field you set in Step 1 is the From address on system emails — not the SMTP connection. SMTP host, port, username, and password live in Settings → Email.

• Do not use the Header panel in Step 3 to build the navigation menu.

The link list that appears inside the header is built separately under Appearance → Menu. The Header panel controls logo, CTA buttons, and scroll behaviour — not which links appear in the nav bar.

• Do not publish a page in Step 5 before the content is ready.

Published pages are live to the public immediately — no staging buffer. If the copy is still in draft form, leave Status as Draft and come back when it is ready.

• Do not treat this walkthrough as a complete site build.

Thirty minutes produces a site shell: identity, theme, header, one page. A fully built site also needs a navigation menu, a footer, more pages, and (for ecommerce) products and payment configuration. Those steps live in Your first day.

How this connects to other features

• Settings → General — the Site Title and Tagline you set in Step 1 flow automatically into every SEO title, email From name, og:title, and og:description on the site.

You only set them once here; every other feature on the site reads from this one source.

• Appearance → Themes — the Color Swatch you pick in Step 2 writes a full palette into Styles & Layouts.

Fine-grained overrides (button hover colour, link underline colour) live in Styles & Layouts; the swatch establishes the baseline that everything else inherits.

• Appearance → Theme Editor → Header — the Header panel reads the active swatch's primary colour for the CTA button fill.

A swatch change in Step 2 automatically repaints the header CTA without any action in Step 3.

• Pages — the page you create in Step 4 appears in the Homepage and 404 Page dropdowns in General Settings.

If you want the About page to become your homepage, return to Settings → General and set the Homepage dropdown to About Your Store after this walkthrough.

• Appearance → Menu — the nav links that appear in the header are built under Menu, not under Header config.

After this walkthrough, build your header menu under Appearance → Menu, tick Header as a location, and save.

• Media Library — the logo and favicon you upload in Step 1 live in the Media Library.

Header config, General Settings, and any page that references your logo all point to the same Media Library entry. Deleting the file from the library breaks the logo everywhere at once.

Before you start

• You are signed in to SGEN as an Administrator or Site Owner.
• Your logo and favicon files are ready to upload — a horizontal PNG at 2× render size for the logo, a 32×32 PNG on a transparent background for the favicon.

Upload them to the Media Library before you start if you want to move faster through Step 1.

• Your business name, tagline, and business email address are written out.

Your store uses: name Your Store, tagline Quality goods, thoughtfully made, email hello@yourdomain.com.

• Your preferred theme colour is decided.

If your brand has a hex value already, find the Color Swatch in Step 2 whose primary colour is closest. Your store's brand red #C83C3C maps to the Burgundy Gold swatch.

• You have 30 uninterrupted minutes.

Each step is short; the time goes into reading your own brand materials, not into the tool.

Where to go

This walkthrough moves through four different screens in SGEN. Open each one in the left navigation when the step says to.

Each screen link in the left nav opens the correct panel directly. No sub-navigation or nested menu is needed — every panel in this walkthrough is a top-level item.

Steps

1. Set your site identity (min 0-5)

Open the left navigation. Click Settings → General. The General panel opens on the Identity card.

Fill in four fields:

Then upload your logo and favicon:

• Click Choose Image next to Site Logo.

Your Media Library opens. Pick your uploaded horizontal wordmark or drag a new file into the upload area. A good logo is a transparent-background PNG at 2× the size it will render — 320×80 px is the safe default.

• Click Choose Image next to Favicon.

Pick your 32×32 transparent-background PNG. If your mark is a single letter or symbol — your store uses YS — start from transparent so it reads on both light and dark browser themes.

The Identity card filled in for your store looks like this:

Click Save Changes in the sticky right-hand column. The green success flash confirms all saved fields:

Open your public site in a new browser tab. The browser tab title now reads Your Store. The placeholder is replaced.

Step 1 complete. Expected elapsed time: 5 minutes.

2. Pick a theme (min 5-12)

Open the left navigation. Click Appearance → Themes. The panel opens on the Color Swatches tab.

Eight swatch cards are displayed as a grid. Each card shows the palette's three core colours and a sample CTA button. Click a card to select it — the card gets a red check mark. Do not click Save Changes yet; pick the swatch first.

For your store, the closest match to brand red #C83C3C is Burgundy Gold. Its primary colour #C83C3C matches the your store brand exactly — the swatch was designed with a bold retail brand in mind.

The Burgundy Gold card shows a red check mark. Click Save Changes.

A success flash confirms the theme config write:

Every public page repaints on the next browser reload. Buttons and links switch to #C83C3C.

Heads up: picking a swatch also resets any fine-grained colour overrides you may have set in Styles & Layouts. If you already customised button colours by hand, note the hex values first — a swatch change may overwrite them. Re-apply overrides in Styles & Layouts → Global Colors after this step if needed.

Step 2 complete. Expected elapsed time: 7 minutes (2 minutes if the swatch choice is quick).

3. Configure the header (min 12-18)

Open the left navigation. Click Appearance → Theme Editor. The page opens on the Header tab.

The Header panel controls the bar that sits on top of every public page. You are not building the navigation menu here — that lives under Appearance → Menu and is a separate step in Your first day. Here you set the logo, the two CTA buttons, and the header's scroll behaviour.

Fill in these fields:

The populated Header form for your store:

Click Save Changes. The public header now shows the Your Store logo and the Shop now / Subscribe button pair on every page.

The header slots after saving:

Step 3 complete. Expected elapsed time: 6 minutes.

4. Create your first page (min 18-24)

Open the left navigation. Click Pages. The Pages list shows the existing pages on your site. Click Add New in the top-right corner of the screen.

A new page form opens. Fill in:

The page editor filled in for About Your Store:

Click Save Changes. The page saves as a Draft — it is not public yet. The Pages list now shows an About Your Store row with a yellow Draft badge.

Step 4 complete. Expected elapsed time: 6 minutes.

5. Publish the page (min 24-28)

You are still on the About Your Store page editor from Step 4. Change the Status dropdown from Draft to Published. Click Save Changes.

The page is now live. The Pages list shows the About Your Store row with a green Published badge:

The About Your Store row shows Published in green. The page is now reachable at yourdomain.com/about.

The About Your Store page also now appears in the Homepage and 404 Page dropdowns in Settings → General. If you want it to become your homepage, return there after this walkthrough and change the Homepage dropdown.

Step 5 complete. Expected elapsed time: 4 minutes (mostly reading the content one more time before clicking Publish).

6. View the live public page (min 28-30)

Open a new browser tab. Load yourdomain.com/about.

Confirm three things that this walkthrough set up:

1. Chrome is correct — the header shows the Your Store logo and the Shop now / Subscribe CTA pair.

The browser tab reads About Your Store — Your Store. The favicon shows the Your Store mark in the tab corner.

1. Theme is applied — buttons and links render in #C83C3C Burgundy Gold.

If they are still the old colour, hard-refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) — CSS can be cached for a few minutes.

1. Page content is live — the hero heading, the two paragraphs, and the slug /about all render correctly.

The rendered public page with header chrome:

Step 6 complete. Total elapsed time from a blank site: approximately 30 minutes.

What success looks like

Walk through this checklist before moving on to Your first day.

Identity[ ] Browser tab on any page reads "Your Store" — not "My SGEN Site"[ ] Logo appears in the header — not a placeholder, not a broken image[ ] Favicon appears in the browser tab corner[ ] og:description in page source reads "Quality goods, thoughtfully made"Theme[ ] CTAs and links are #C83C3C Burgundy Gold[ ] No Custom CSS overrides fighting the swatch colourHeader[ ] Primary CTA reads "Shop now" and routes to /shop[ ] Secondary CTA reads "Subscribe" and routes to /subscribe[ ] Sticky behaviour: scroll down on any long page — header stays pinnedPage[ ] About Your Store shows Published (green badge) in Pages list[ ] /about page loads with the hero heading and two paragraphs[ ] /about page shows the Your Store header chrome at the top

All twelve checked? You have a working site shell. The identity is set, the design is branded, the header is configured, and there is one real page live for visitors to find.

What to do if it does not work

• Browser tab still shows the old site title after Step 1.

Hard-refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). Browser caching holds the old title for a few minutes. If still wrong after hard-refresh, re-open Settings → General, confirm the Site Title field shows your real name, and click Save Changes again.

• Logo shows as a broken image in the header.

The Media Library entry the header is pointing to no longer exists, or the field was saved blank. Re-open Appearance → Theme Editor → Header, click Choose Image next to Logo, pick your uploaded wordmark, and Save Changes.

• Burgundy Gold swatch did not repaint the site buttons.

Hard-reload the public site. CSS is cached by the browser for a few minutes. If still wrong, confirm you clicked Save Changes after selecting the swatch — selection alone does not save.

• About Your Store page is not visible at /about.

Open the Pages list, confirm the row shows a green Published badge. A yellow Draft badge means the page is still not public. Click the row, change Status to Published, and Save Changes.

• Header shows no CTA buttons.

The Primary CTA text field is blank. Open Appearance → Theme Editor → Header, fill in Primary CTA text and Primary CTA URL, and Save Changes.

• Transparent header makes the Your Store logo invisible on /about.

The About page starts with a light background, not a dark hero image — transparent-over-hero on a light page makes the wordmark disappear. Add a Custom CSS rule: body:not(.page_id-1) .site-header { background: var(--color-background, #21141A); }. This forces the header opaque on every page except the homepage. See the full pattern in Configure your site header — Example 5.

• The Site Title still reads "My SGEN Site" after I saved.

Confirm you are on the General tab (sidebar highlighted as General) rather than Email or Social Media — the three tabs are separate forms with separate Save Changes buttons. Return to the General tab, confirm your Site Title entry, and save again.

Next step

• Your first day in SGEN — nav menu, footer, more pages, and blog setup
• Configure your site identity — full identity reference including business address, age gate, and homepage routing
• Pick a theme — full theme reference including chrome presets for Header, Footer, Blog Archive, and more
• Configure your site header — full header reference including topbar, per-page overrides, and CSS variable output
• Create and manage pages — full pages reference including page hierarchy, templates, and bulk actions