Theme, Domain & SEO
Your hosted website's site-wide settings — theme and branding, a custom domain, a Google Analytics tag, and SEO metadata — live in the left sidebar under the Website group. This page covers all four. For building and editing the pages themselves, see Pages and The Page Editor; for the bigger picture of the hosted website, start at the Website Overview.
Availability: The hosted website (and therefore these settings) is a Commerce plan or higher feature. On the Free plan there is no hosted website, and these screens redirect back to the dashboard. See Subscriptions & Plans and The Free Plan.
Where these settings live
In the left sidebar, open the Website group. Alongside Pages, Navigation, and Redirects, you'll find four settings entries:
| Sidebar entry | What it controls |
|---|---|
| Website → Theme | Theme, brand colors, fonts, hero/nav/footer styling, button style, storefront light/dark mode, CTA text, and social links |
| Website → Domain | Connect a custom domain, with automatic SSL |
| Website → Google Analytics | Your Google Analytics 4 tracking tag |
| Website → Metadata | Site-wide tagline, description, and SEO basics |
Each of these opens the relevant tab of the site settings screen. The rest of this page walks through all four.
Note: These four are for branding, domain, and SEO — they don't show you your traffic. To see how many people visit your site, use the separate top-level Analytics sidebar item — see Web Analytics. And if you haven't published a page in the builder yet, the older single-page layout (with its own section editor) is what visitors see — that's covered in Themes & the Legacy Single-Page Site.
Theme & branding (Website → Theme)
The Theme screen is where you set your site's overall look. Changes here apply across both your hosted website and your embeddable storefront. Click Save to apply.
Pick a theme
Choose one of five visual styles. Selecting a theme applies a coordinated starting set of colors, fonts, and button shape, which you can then fine-tune:
| Theme | Feel |
|---|---|
| Minimal | Clean lines, white space, modern feel |
| Bold | Strong typography, high contrast |
| Classic | Timeless, elegant, traditional |
| Craft | Warm tones, handmade aesthetic |
| Industrial | Raw, rugged, workshop vibes |
Storefront UI mode (light / dark)
Set Storefront UI Mode to Light or Dark. This controls the look of cards, modals, and form fields in your storefront chrome (white cards with dark text vs. dark cards with light text). Your hero, nav, and footer colors are set separately (below).
Important: This UI mode is the only thing that switches your storefront between light and dark. The
data-themeattribute on the embeddable storefront script does not change the theme — see Embed Setup and Customization.
Colors
- Primary and Secondary brand colors — used for buttons, accents, and highlights across your site.
- Navigation Bar background color — with the text color automatically chosen for legibility.
- Hero Section background — a solid color or a gradient (start color, end color, and direction), with an opacity slider and an optional color overlay (vignette) for hero images. Text color adapts automatically.
- Footer background color — again with auto-legible text.
Each picker shows a live preview, and you can type an exact hex value or use the color swatch.
Typography
Pick a body Font Family. Each theme also uses its own coordinated heading font. Available fonts:
- Inter
- Playfair Display
- Roboto
- Merriweather
- Montserrat
Buttons & calls to action
- Primary CTA Text and Secondary CTA Text — the default labels on your hero call-to-action buttons (e.g. "Shop Now" / "Learn More").
- Button Style — choose Rounded, Pill, Sharp, or Square, or leave it unset to use the theme default. Click a selected style again to deselect.
Social links
Add the URLs for your Facebook, Instagram, Twitter / X, YouTube, Pinterest, and TikTok profiles. Any you fill in appear as icons on your site.
Tip: Your colors and fonts are white-label and per-company — they're independent of TimberCloud's own branding. You can also let AI propose a coordinated palette and font when it generates your site; see AI Website Assistant.
Connect a custom domain (Website → Domain)
A custom domain lets your hosted site live at your own address (for example shop.yourbusiness.com or yourbusiness.com) instead of the default embed.timbercloud.com/site/... URL. SSL (the padlock / https://) is issued automatically once the domain connects. Your default address keeps working too — a custom domain is added, not swapped in.
Note: Custom domains require the Commerce plan or higher. On Free, the option is blocked with an upgrade prompt.
Step 1 — Enter your domain
- Go to Website → Domain.
- In the Domain name field, type your domain without
http://,https://, orwww.— for exampleyourbusiness.com. - Click Connect Domain.
TimberCloud validates the format and saves the domain. The status changes to Pending DNS Configuration, and a table of DNS records appears for you to copy.
Step 2 — Add the DNS records at your registrar
TimberCloud shows the exact DNS records you need to add — typically an A record and a CNAME. Each row has a Type, Name, and Value. Add these wherever your domain's DNS is managed — your registrar or DNS host (GoDaddy, Namecheap, Cloudflare, etc.).
- Use the copy icon on any row to copy that record's value, or Copy All to grab every record at once.
- Add them exactly as shown, leaving any existing unrelated records in place.
Tip: Not sure where to add DNS records? Look for a "DNS", "DNS Management", "Nameservers", or "Advanced DNS" area in your registrar's control panel. If you use Cloudflare, add the records there.
Step 3 — Verify
After adding the records, return to Website → Domain and click Verify DNS.
- TimberCloud also re-checks every configured domain roughly every 10 minutes in the background, so a pending domain can flip to Active on its own — and a live domain whose DNS later breaks is caught automatically. Verify DNS just runs that check on demand.
- DNS propagation can take up to 48 hours worldwide, though it's usually done in 5–30 minutes.
- The page polls for status updates automatically while a domain is pending, so you can leave it open.
Important: A domain becomes Active only when its DNS is actually pointing at TimberCloud correctly — not merely when you've proven you own it. If ownership is confirmed but the records aren't fully in place, the domain stays in a pending/verifying state and isn't served yet. Once DNS resolves correctly, the status flips to Active, SSL is issued automatically, and your site is live at
https://yourdomain.com.
Domain status reference
| Status | Meaning |
|---|---|
| No domain configured | No custom domain is connected yet. |
| Pending DNS Configuration | The domain is saved; add the shown DNS records at your registrar, then verify. |
| Verifying… | DNS records were detected and the domain is being checked / SSL is being provisioned. |
| Active | DNS is correctly configured, SSL is issued, and your site is live on the domain. |
| Error | Something's wrong (e.g. records not found or misconfigured); the screen explains what to fix. |
Removing a domain
To disconnect a custom domain, open Website → Domain, click Remove, and confirm. This is non-destructive: your website stays reachable at its default embed.timbercloud.com/site/your-slug URL, and you can connect a new domain anytime.
Google Analytics tag (Website → Google Analytics)
If you use Google Analytics 4, you can add your tracking tag so your hosted-site traffic flows into your own GA4 property:
- Go to Website → Google Analytics.
- Enter your Measurement ID in the format
G-XXXXXXXXXX. - Click Save.
Once a valid Measurement ID is saved, the GA4 tracking script loads automatically on every page of your hosted website.
- Find your Measurement ID in Google Analytics under Admin → Data Streams → your stream. It starts with
G-. - The tag loads only on your hosted website — it never tracks your dashboard or anyone else's site.
- To stop tracking, clear the Measurement ID and save.
Note: This "Google Analytics" tag is not the same thing as TimberCloud's built-in analytics. The tag sends data to your Google Analytics account. TimberCloud also gives you a first-party traffic dashboard — the top-level Analytics sidebar item — that works with no setup at all. See Web Analytics. You can use either, both, or neither.
SEO metadata (Website → Metadata)
The Metadata screen holds your site-wide SEO basics:
- Tagline — a short phrase describing your business, used in your site's title/branding.
- Description — the summary text search engines and social previews show for your site.
Fill these in so search engines and link previews represent your business well. For per-page SEO (each page's own title and description), set them in the page editor's Inspector — where you'll also see a live Google search preview and social-share card preview, plus one-click Generate buttons that draft an SEO title (≤60 characters) and description for you. See The Page Editor and AI Website Assistant.
Putting it together
A typical first-time setup looks like this:
- Theme — pick a theme, set your brand colors and font, and choose a button style.
- Metadata — add your tagline and description.
- Google Analytics — (optional) paste your GA4 Measurement ID.
- Domain — (optional) connect your custom domain and add the DNS records.
- Publish a page (see Navigation & Publishing) and watch traffic in Web Analytics.
Next Steps
- Website Overview — what the hosted website is and who gets it
- Pages — create and manage the pages of your site
- The Page Editor — block editing, the Inspector, previews, and shortcuts
- Navigation & Publishing — drafts, publishing, navigation, and redirects
- Web Analytics — the built-in dashboard for your site and storefront traffic
- AI Website Assistant — generate copy, SEO, and a full starter site
- Themes & the Legacy Single-Page Site — the older layout served before your first publish
- Embeddable Storefront — drop the catalog onto an existing site instead