Design Your Storefront for Your Brand

Updated August 7, 2026

Stage a draft theme, then shape hero text, colors, fonts, and collections around your brand

Your storefront is often the first thing a customer sees, so it should feel like your brand from the moment the page loads. This guide walks through one full pass: create a draft theme, edit your hero text, set a color palette, pick a bold heading font, relabel your collections, then preview and publish. Working in a draft means your visitors keep seeing your current site until you're ready to go live.

Here's the path this guide follows:

1. Create a draft theme. Stage every change on a copy of your live theme.
2. Edit your hero text. Put your brand name and tagline front and center.
3. Set your color palette. Apply brand colors as global styles with hex codes.
4. Choose a heading font. Pick a display font that matches your identity.
5. Relabel your collections. Swap generic labels for brand-specific copy.
6. Preview and publish. Check your work, then push the draft live.

Step 1: Create a draft theme

A draft theme is a copy of your active theme that you edit privately. Your customers keep seeing your live site until you publish the draft, so you can rework the whole look without anyone watching it change in real time.

1. Go to Site design > Theme.
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, like "Brand refresh".

Your draft now 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.

note

Only your active theme is visible to customers. Edits you make to an inactive draft theme never affect your live site until you publish the draft in Step 6.

Step 2: Edit your hero section text

The hero section is the large banner at the top of your homepage. It's 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 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.

note

If your theme uses a hero-less layout, like Oasis, there's no banner to edit. Your homepage leads with collections or products instead. See Update your shop theme for how hero and hero-less templates differ.

Step 3: Set your brand color palette

Color settings apply across your whole site, so they carry your brand from the hero down to the footer. A music or merch brand often works well with a dark background and light text for a bold, high-contrast feel.

Go to Site design > Style > Colors 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. For a dark look, 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.

Step 4: Choose a bold 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.
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.

Step 5: Relabel 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 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".

Give each collection section a title that tells customers what they'll find. Clear, branded labels make your homepage feel intentional and guide customers toward the products you want to feature.

Step 6: Preview and publish your draft theme

Before you go live, check your draft on both screen sizes 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.
4. Click the three-dot menu on your draft theme and select Set as active theme.

Your branded design is now live for customers. Your previous theme moves to Inactive themes, so you can switch back at any time if you want to compare or revert.

tip

Duplicate your new live theme before your next round of changes. That way 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's what keeps your branding consistent from page to page. When you want one section to stand out, you can override those global styles at the section level without any CSS.

To override styles for a single section:

1. Open the Layout tab and click the section you want to change.
2. Look for 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.

Frequently asked questions

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.

---

If you have any questions, do not hesitate to contact us at support@fourthwall.com.