--- title: Build your Fourthwall website step by step shortDescription: Create and customize your Fourthwall site layout, pages, colors, and branding from scratch. articleType: Setup Guide primaryTopic: build-fourthwall-website categories: - Store Design tags: - site-editor - website-builder - site-layout - homepage-design - custom-pages - site-style - shop-theme - site-branding - beginner-guide tasks: - Open the site editor - Customize your homepage layout - Adjust site colors and visual style - Create additional custom pages - Switch or update your shop theme terms: - build fourthwall website - create site fourthwall - site editor guide - customize homepage - fourthwall website setup - design storefront - site layout editor - website builder fourthwall - shop theme labels: - design-a-fourthwall-site - fourthwall-site-editor contextString: Available on all plans. Requires an active Fourthwall account. breadcrumbPath: "Getting started > Design my storefront > How to Build Your Fourthwall Website (Step by Step)" relatedModules: - name: theme-settings-general route: /admin/dashboard/store-design/general/ - name: theme-editor-pages route: /admin/dashboard/store-design/pages/ - name: settings-general route: /admin/dashboard/settings/general - name: theme-editor-layout-home route: /admin/dashboard/store-design/layout/index - name: settings-custom-inserts route: /admin/dashboard/settings/custom-inserts/ last_updated: '2026-03-24' path: getting-started/design-my-storefront/build-your-website --- # How to Build Your Fourthwall Website (Step by Step) Fourthwall's site editor lets you create and customize your website from scratch, including layout, pages, colors, and branding. This guide walks through each step to build your site, from opening the editor to switching themes. ## Open the site editor Before you start, make sure you're logged in to the correct account with the right [permissions](/manage-my-shop/shop-settings/manage-team-roles-and-permissions-in-fourthwall) assigned. In your Fourthwall dashboard, select [**Site design**](https://my-shop.fourthwall.com/admin/dashboard/store-design/?redirect) from the left menu. This opens the site editor where you control all aspects of your website. [Image: Click Site design] ## Understand Fourthwall's site design options Fourthwall's site editor has four main tabs: - **Layout**. Add, remove, and reorder sections on your page. - **Style**. Control colors, fonts, logo, and branding. - **Pages**. Create and manage additional pages. - **Theme**. Apply preset design themes. For a detailed overview of each tab, see [Understanding Fourthwall's Site Design Options](/getting-started/design-my-storefront/site-design-options). ## Customize your homepage layout and content Use [**Site design > Layout > Home**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/?redirect) to add, remove, and edit sections on your homepage. You can insert different section types such as image banners, text blocks, or videos, then configure their content and layout to match your site's goals. You can also edit existing sections, including the [default header](/getting-started/design-my-storefront/edit-header) or [image sections](/getting-started/design-my-storefront/add-or-edit-image-section). Changes appear in the live preview as you work. For complete layout options and section types, see the [Customize Your Homepage Layout](/getting-started/design-my-storefront/customize-your-homepage-layout) help article. ## Customize your site's colors and visual style Use [**Site design > Style**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect) to control your site's global look and feel, including colors, background visuals, borders, and the appearance of product cards. These settings apply site-wide, with optional overrides available in individual sections when needed. You can adjust your primary, background, and text colors, upload a background image, and fine-tune rounded corners for buttons, inputs, and images. If your site displays products, you can also customize how product cards appear, including image ratios, hover effects, and promotional badges. Check out the full customization guide [here](/getting-started/design-my-storefront/customize-your-site-colors-and-product-appearance). You can [upload your logo](/getting-started/design-my-storefront/upload-and-edit-logo) and [add your social links](/manage-my-shop/shop-settings/add-social-links) in this tab for branding and promotional purposes. ## Create and customize additional pages Go to **Site design > Layout** to create custom pages such as an About page, press kit, FAQ, or other brand-specific content. Custom pages help organize information, improve navigation, and give your site a more complete, professional structure. After creating a page, you can add, move, hide, duplicate, or delete sections to control its layout and content. Once published, pages can be added to your site menu, featured on other pages, or shared directly using their unique URL. For a full walkthrough, see [Create and Edit Custom Pages on Your Site](/getting-started/design-my-storefront/create-custom-pages). ## Update or switch your shop theme (optional) Your site theme ([**Site design > Theme**](/getting-started/design-my-storefront/update-shop-theme)) controls the overall look and feel of your shop. You can [switch themes](https://my-shop.fourthwall.com/admin/dashboard/store-design/themes/?redirect) at any time to refresh your design without rebuilding your site. Fourthwall lets you browse and preview templates on desktop and mobile, then activate the one that best fits your brand. You can also reuse, duplicate, or reset existing themes as needed. Only the active theme can be edited. If you want to make changes without showing them live, set your site to **Coming Soon** mode while you work. This step is optional and best used when: - You want a visual refresh following launch - You are experimenting with branding or layout changes - You want to test a new theme without changing your products or pages ## Next steps Now that you have a site, [create your product listing](/getting-started/setting-up-your-shop/get-started/create-new-product-listings) and continue to [set up your shop](/getting-started/setting-up-your-shop).