Fourthwall site design options

Updated May 21, 2026

Learn how to use themes, adjust styles, and organize pages to customize your site

Fourthwall lets you fully customize your site to match your brand using multiple themes and our Site Designer, all with no-code tools. Themes provide a starting point, and the Site Designer lets you tweak layout, style, and page settings in real time. Here's what each section does and how to get started.

Where to customize your site

To customize your theme within your dashboard, go to Site design. The Site Design entry URL is /admin/dashboard/store-design/general/, which opens on the Style tab by default.
The editing panel appears on the left, and a real-time preview of your site/page appears on the right. Changes you make here will be immediately reflected on your site. Your site design is divided into four main tabs: Layout, Style, Pages, and Theme. Each tab also has a direct URL, so you can jump straight to it. For example, the Layout tab can be reached directly at /admin/dashboard/store-design/layout/index/. For Layout-specific guidance, see Design your site: Navigate the layout tab.

Layout tab (for organizing site pages and sections)

The Layout tab organizes and arranges sections on different pages. You can customize layouts for:

Home: The main landing page for your site, where visitors get the first impression of your brand.
Custom pages: Any additional pages you create for exclusive content, promotions, or other unique purposes.
Memberships: Pages for member-only content, including the Feed, Perks, and Video catalog.
Policies (and Support): Standard pages like Contact, Privacy Policy, Returns & FAQ, and Terms of Service.
Product pages: Individual pages for each product, showing details, pricing, and purchase options.
Collection pages: Pages that group multiple products, like a category or featured collection.
Checkout: The page where supporters review their order and complete the purchase.
Coming Soon: Pages that preview upcoming products, launches, or site features.

How to customize the layout

Select a page from the dropdown menu (e.g., Home, Checkout), then add, remove, or rearrange sections. Below are the section types available in the Layout tab.

Featured collection

Displays a curated set of products from one of your collections on any page. Use this section to highlight new releases, seasonal picks, or bestsellers. Learn more about adding a collection section.

Collections list

Shows multiple collections in a grid or list format, letting supporters browse your full catalog by category. This is useful on your Home page or a dedicated shop page to help supporters find what they're looking for.

Featured product

Highlights a single product with a large image, description, and purchase button. Use this to spotlight a new launch, a limited-edition item, or your top seller.

Showcases a large visual across the top of a page or between sections. Use image banners for announcements, promotions, or branding visuals. Learn more about adding or editing an image section.

Controls your site's top navigation bar, including your logo, menu links, and cart icon. The header appears on every page. Learn more about editing your header.

Adds site-wide links, social icons, and other info at the bottom of every page. Learn more about editing your footer.

Membership sections

Membership pages include dedicated sections for the Feed, Perks, and Video catalog. These sections are available only on membership page layouts.

Edit code (advanced)

Add custom header and footer code for advanced customization. Learn more about adding custom HTML and code to your site.

note

Product pages, membership feed pages, and the checkout page have limited customization in the site editor. For checkout, only certain sections can be modified. See Edit your checkout page for details on available options.

Learn more about customizing layouts.

Style tab (for controlling site-wide appearance)

Style options

Colors – Set your site's color palette, including buttons, text, and background accents. You can also override colors for specific sections in their individual settings.
Fonts – Choose from a variety of typefaces for headings, body text, and other elements to create a consistent visual identity.
You can customize your site's font scale to adjust how large or small text appears across your site. More information here.
Background visual – Add or adjust background images, patterns, or colors to give your site more depth and personality.
Logo – Upload your logo to appear in your site header, footer, and browser previews.
Favicon – Add a favicon (the small icon shown in the browser tab) to make your site easily recognizable.
Product card – Customize the appearance of product cards, including layout, image style, and content display options.
Border radius – Control how rounded your buttons, product cards, and other elements appear.
Social links – Connect your social media accounts so icons and links display on your site. These are managed in your shop settings, and the icons appear automatically in your site header and footer.
Edit HTML code – Add custom header and footer code for advanced customization. See Add custom HTML and code for details.

Pages tab (for managing your site structure)

The Pages tab lets you create, edit, and organize your pages:

Create Custom pages: Add new pages for exclusive content.
Edit Main pages: Modify existing pages, like Home or Checkout.
Manage Membership pages: Customize Feed, Perks, and other membership pages.
Update Policies and support pages: Edit Privacy Policy, Returns & FAQ, and Terms of Service.

Theme tab (for selecting and customizing your chosen theme)

The Theme tab is your starting point for choosing how your site looks. When you open it, you'll see the Theme Selector Modal, which displays all available themes upfront so you can browse and compare them without extra steps.

The Theme Selector Modal is the primary way new creators set up their first theme during onboarding. It's also available any time you want to switch themes later.

Inside the modal, each template shows a live preview of your site. You can scroll through the preview smoothly to see how your content looks with that theme applied before committing to it. Templates range from full-featured layouts with hero banners to more minimal, hero-less options like Oasis, which skips the large top image for a cleaner, content-forward look.

Two ways to get started

The Theme Selector Modal supports two onboarding paths depending on how much control you want:

Quick-start with templates: Pick a template that fits your brand and go live right away. Each template comes with pre-set color pairs and typography, so your site looks polished from the start.
Deep customization: After selecting a template, head to the Style tab to fine-tune color pairs, typography, and other visual settings. This path is for creators who want full control over every detail.

Managing your themes

Once you've selected a theme, you can:

Duplicate and/or rename themes to save different versions.
Reset to default to restore original theme settings.
Switch themes at any time by reopening the Theme Selector Modal from the Theme tab.

Was this helpful?

Fourthwall site design options

Where to customize your site