--- articleType: Tutorial categories: - Store Design - Creator Dashboard last_updated: '2026-06-12' primaryTopic: site-design-options relatedModules: - name: theme-settings-general route: /admin/dashboard/store-design/general/ - name: theme-editor-layout-checkout route: /admin/dashboard/store-design/layout/checkout - name: theme-editor-layout-home route: /admin/dashboard/store-design/layout/index - name: theme-font-change route: /admin/dashboard/store-design/general/font-change - name: theme-editor-layout-coming-soon route: /admin/dashboard/store-design/layout/password shortDescription: Learn how to use themes, adjust styles, and organize pages to customize your site tags: - theme editor - no-code - customizing - site design - theme selector - templates title: Fourthwall site design options tasks: - navigate site designer - customize page layout - adjust site colors and fonts - create and organize site pages - select and manage theme - upload logo and favicon terms: - site design - theme editor - customize shop - no-code website builder - storefront layout - change fonts - change colors - add logo - favicon - page sections - header - footer - theme selector modal labels: - theme-editor - no-code - customizing - site-design contextString: Available on all Fourthwall plans. Accessed via the site designer in the creator dashboard. breadcrumbPath: "Getting started > Design my storefront" path: getting-started/design-my-storefront/site-design-options --- # Fourthwall site design options Fourthwall lets you fully customize your site to match your brand using multiple themes and the Site Designer, all without writing code. Themes provide a starting point, and the Site Designer lets you tweak layout, style, and page settings in real time. The designer is divided into four main tabs: Layout, Style, Pages, and Theme. ## Where to customize your site Go to [Site design](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect) in your dashboard. The entry URL is `/admin/dashboard/store-design/general/`, which opens on the **Style** tab by default. [Image: Fourthwall dashboard sidebar with arrow pointing to Site design menu item] The editing panel appears on the left, and a real-time preview of your site or page appears on the right. Changes are reflected immediately. Your site design is divided into four main tabs: **Layout**, **Style**, **Pages**, and **Theme**. Each tab 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](/getting-started/design-my-storefront/navigate-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 their 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. [Video: The Layout tab] Select a page from the dropdown menu (for example, Home or Checkout), then add, remove, or rearrange sections. The following section types are available in the Layout tab: - **Featured collection**: Displays a curated set of products from one of your collections on any page. Use this to highlight new releases, seasonal picks, or bestsellers. - **Collections list**: Shows multiple collections in a grid or list format, letting supporters browse your full catalog by category. Useful on your Home page or a dedicated shop page. - **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. - **Image banner**: Showcases a large visual across the top of a page or between sections. Use image banners for announcements, promotions, or branding visuals. - **Text banner**: A typography-focused header section that puts large text front and center, with no image required. Use a text banner for a clean, content-first introduction to a page, an announcement headline, or a quote-style hero. - **Header**: Controls your site's top navigation bar, including your logo, menu links, and cart icon. The header appears on every page. - **Footer**: Adds site-wide links, social icons, and other info at the bottom of every page. Choose between **Minimal** for a stripped-down look with just the essentials and **Modern** for a richer layout with more room for links and brand elements. - **Recent posts**: Displays your latest membership posts on any page. Useful for showing supporters what kind of content your members get access to. - **Membership sections**: Membership pages include dedicated sections for the Feed, Perks, and Video catalog. Available only on membership page layouts. - **Edit code (advanced)**: Add custom header and footer code for advanced customization. Product pages, membership feed pages, and the checkout page have limited customization in the site editor. For checkout, only certain sections can be modified. ## Style tab (for controlling site-wide appearance) The **Style** tab controls how your site looks across all pages. Options include: - **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. You can also customize the **font scale** to adjust how large or small text appears across your site. - **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. Choose from layouts like the **All in one line** option to keep product info on a single row, and override the site-wide font family with a dedicated product card font. - **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 appear automatically in your site header and footer. - **Edit HTML code**: Add custom header and footer code for advanced customization. [Video: The Style tab] ## Pages tab (for managing your site structure) The [Pages](https://my-shop.fourthwall.com/admin/dashboard/store-design/pages/?redirect) 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. [Video: The pages tab] ## 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 so you can browse and compare them without extra steps. Each template shows a live preview of your site. You can scroll through the preview 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 options like **Oasis**, which skips the large top image for a cleaner, content-forward look. 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. The Theme Selector Modal supports two onboarding paths: - **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, go to the **Style** tab to fine-tune color pairs, typography, and other visual settings. This path gives you full control over every detail. 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. [Video: The Themes tab]