--- title: Design Your Storefront for Your Brand shortDescription: Stage a draft theme, then edit hero text, set brand colors and fonts, and relabel collections to match your brand before publishing. articleType: Tutorial primaryTopic: brand-storefront-design categories: - Store Design tags: - draft-theme - branding - hero-section - site-colors - fonts - collection-section - storefront-design - theme-customization - hex-code - music-merch tasks: - Create a draft theme to stage changes - Edit hero section headline and subheadline - Set a brand color palette with hex codes - Choose a bold heading font - Rename a collection section - Preview and publish a draft theme terms: - draft theme - duplicate theme - hero section - headline - subheadline - brand colors - hex code - heading font - Archivo Expanded - uppercase font - collection section label - preview theme - publish theme - global styles - per-section override labels: - store-design - branding - theme-customization - typography contextString: Available on all Fourthwall plans. Accessed via Site design in the creator dashboard. breadcrumbPath: "Getting started > Design my storefront" relatedModules: - name: theme-editor-themes route: /admin/dashboard/store-design/themes/ - name: theme-settings-general route: /admin/dashboard/store-design/general/ - name: theme-font-change route: /admin/dashboard/store-design/general/font-change - name: theme-editor-layout-home route: /admin/dashboard/store-design/layout/index last_updated: '2026-08-07' path: getting-started/design-my-storefront/design-your-storefront-for-your-brand --- # Design Your Storefront for Your Brand To make your storefront feel like your brand, stage a draft theme, then edit your hero text, set a color palette with hex codes, pick a bold heading font, relabel your collections, and preview both desktop and mobile before publishing. Working in a draft theme keeps your live site unchanged for customers until you publish, so you can make every change without anyone seeing it in progress. ## Creating a draft theme to stage your changes A draft theme is a copy of your active theme that you edit privately. Only your active theme is visible to customers, so edits to an inactive draft theme never affect your live site until you publish that draft. 1. Go to [**Site design > Theme**](https://my-shop.fourthwall.com/admin/dashboard/store-design/themes/?redirect). 2. Find your active theme and click its three-dot menu. 3. Select **Duplicate** to create a copy. 4. Click the copy's three-dot menu and select **Rename** to give it a clear name, such as "Brand refresh". The draft appears under **Inactive themes**. Click **Edit** on the draft to open it in the site designer. Everything you change from here stays on the draft until you set it as your active theme. ## Editing your hero section text The hero section is the large banner at the top of your homepage and the first message a customer reads, so use it for your brand name and a short tagline. 1. In the site designer, open the [**Layout**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/?redirect) tab. 2. Click your **Hero** section to open its settings. 3. In the **Headline** field, enter your brand name, for example a musician's stage name. 4. In the **Subheadline** field, enter a short tagline that tells customers who you are, such as "Official merch and music". Keep the headline to a few words and the subheadline to one line. Long hero text wraps awkwardly on mobile and buries your message. Watch the preview panel to see how both lines sit over your banner image. If your theme uses a hero-less layout, such as **Oasis**, there is no banner to edit. Your homepage leads with collections or products instead. ## Setting your brand color palette Color settings apply across your whole site, carrying your brand from the hero down to the footer. Go to [**Site design > Style > Colors**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Colors&redirect) to set four global values: - **Primary**. Buttons, links, and key interactive elements. - **Background**. The main background color of your site. - **Text**. Body text throughout your shop. - **Text Over Primary**. Text or icons placed on top of areas using the Primary color. Click a color block and paste in a hex code for an exact match to your brand. A music or merch brand often works well with a dark background and light text for a bold, high-contrast feel: set **Background** to a near-black like `#111111` and **Text** to a light shade like `#F5F5F5`. Pick a **Primary** color that pops against the dark background so your buttons stand out. If you don't have your brand hex codes handy, use a browser tool like the ColorPick Eyedropper extension to pull colors from your logo or artwork. Changes show in the preview panel before you publish. Check the contrast between your text and background so everything stays readable. ## Choosing a heading font Your heading font sets the tone for your brand's personality. For a music or merch identity, a wide, high-impact display font like **Archivo Expanded** gives titles a strong, poster-like feel. 1. Go to [**Site design > Style > Fonts**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Fonts&redirect). 2. Open the **Heading font** dropdown and choose your display font, such as **Archivo Expanded**. This font applies to your hero headline, section titles, and other large text. 3. Enable the **all uppercase** option for headings to push the bold, display look further. 4. Leave the **Base font** as a clean, readable typeface for body text, product descriptions, and smaller text. Pairing a bold display heading with a simple base font keeps your titles striking while your body text stays easy to read. You can choose from over 1,000 Google Fonts in each dropdown. ## Relabeling your collection sections Collection sections group products on your homepage. The default labels are generic, so replace them with copy that sounds like your brand. 1. In the [**Layout**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/?redirect) tab, click a **Collection** section to open its settings. 2. Find the section's **Title** field. 3. Replace the default text with brand-specific copy, such as "Shop the Collection" or a drop name like "New Merch". A collection section title that tells customers what they'll find makes your homepage feel intentional and guides customers toward the products you want to feature. ## Previewing and publishing your draft theme Check your draft on both screen sizes before you go live so nothing breaks for mobile visitors. 1. In the site designer, click **Preview** to open your draft with all edits applied. Nothing is live yet. 2. Use the desktop and mobile toggle to check your hero text, colors, fonts, and collection titles on both layouts. 3. When you're happy with everything, go to [**Site design > Theme**](https://my-shop.fourthwall.com/admin/dashboard/store-design/themes/?redirect). 4. Click the three-dot menu on your draft theme and select **Set as active theme**. Once you set the draft as active, your branded design is live for customers. Your previous theme moves to **Inactive themes**, so you can switch back at any time to compare or revert. Duplicate your new live theme before your next round of changes so you always have a saved copy to fall back on while you experiment. ## How global styles and section overrides work together The colors and fonts you set in the **Style** tab apply to your entire site. That is what keeps your branding consistent from page to page. You can override those global styles at the section level, without any CSS, when you want one section to stand out. To override styles for a single section: 1. Open the [**Layout**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/?redirect) tab and click the section you want to change. 2. Find the color or font size override controls in that section's settings. 3. Apply your changes to that section only. Use global styles for your core brand look and section overrides for accents, such as a lighter product grid below a dark hero. Per-section overrides are stored separately from your global theme settings, so they carry over even if you switch themes later. ## Do my draft theme edits affect my live site? No. Edits to an inactive draft theme stay private until you set the draft as your active theme. Your customers keep seeing your current live theme until you publish. ## How do I set an exact brand color? Click any color block in **Site design > Style > Colors** and paste in your brand's hex code, such as `#111111`. This applies the exact shade instead of a close approximation. ## Can I use a different font for headings and body text? Yes. The **Heading font** and **Base font** are set separately in **Site design > Style > Fonts**. Pair a bold display font for headings with a clean, readable font for body text. ## What if I want to go back to my old design? Your previous theme is saved under **Inactive themes** after you publish a new one. Open its three-dot menu and select **Set as active theme** to switch back.