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 using no-code tools. Themes specifically provide a starting point, and the Site designer allows you to tweak layout, style, and page settings in real time. Let's dig into the details behind our theme editor and what each section means.
Where to customize your site
-
To customize your theme within your dashboard, go to Site design.
- 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.
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 customers 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).
- Add or remove sections:
- Header: Navigation & branding
- Image banner: Showcase visuals
- Recent posts & Featured collection: Highlight content & products
- Footer: Add site-wide links and info
- Edit code (advanced): Implement custom header and footer code
Note: Product pages and membership feed pages cannot yet be customized by the site editor.
Learn more about customizing layouts.
Style tab (for controlling site-wide appearance)
The Style tab has been redesigned for a cleaner, more intuitive experience. Key updates include:
- Smarter grouping of settings: Product card appearance options now live in their own dedicated accordion.
- Simpler navigation: No more nested sections; accordions make it faster to find and edit settings.
- Modern look: Updated font selector, color picker, and overall interface.
- Edit HTML visibility: The Edit Code feature is now part of the accordions for easier access.
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 now 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.
- Edit HTML code – Add custom HTML or advanced styling directly within the Style tab for further customization.
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 allows you to choose and customize a theme:
- Add/Set a theme: Pick a theme for your site from our theme collection to set as your active theme.
- Duplicate and/or Rename themes: Save different versions of a theme.
- Reset to default: Restore original theme settings.