How to Customize Your Brand Design

Your Zemers brand design controls how your public pages look and feel.

The settings you choose here apply across your customer-facing experience, including your storefront, product pages, blog, articles, courses, and other public content pages.

You can start from a preset, switch between light and dark mode, customize your colors, adjust typography, and control the visual style of images, cards, and buttons.

Before you start

You need:

• A Zemers account

• Access to your creator dashboard

• A basic idea of your brand colors

• A visual direction, if available

You can change your brand design at any time.

Step 1: Open the Brand settings

From your Zemers dashboard, go to: Storefront → Brand

Or open:

https://www.zemers.com/creator/storefront?tab=brand

This opens the brand customization area.

You will see your current preset on the left and a live preview of your storefront on the right.

Step 2: Choose a preset

Presets give you a fast starting point for your storefront design.

Click: Change preset

You can choose between light and dark preset styles.

Select the preset that fits your brand best, then click Save.

You can also click More palettes if you want to explore additional options.

Step 3: Choose light or dark mode

Your brand can use either:

• Light mode

• Dark mode

Light mode usually works well for clean, minimal, editorial brands.

Dark mode works well for premium, bold, creator-led, or community-style brands.

Choose the mode that matches the feeling you want customers to have when they visit your store.

Step 4: Customize your color palette

After choosing a preset, you can customize the colors further.

Click Customize to edit your palette.

You can adjust colors such as:

• Background: the main page background

• Text: the main text color

• Accent background: used for buttons and active states

• Accent text: text shown on accent-colored surfaces

• Card background: background color for product cards and content cards

• Card text: text color inside cards

• Card border: border color around cards

These colors shape the full public experience, not just the storefront.

They affect how your products, blog posts, article pages, and customer-facing pages appear.

Step 5: Adjust typography

In the Typography & Layout section, you can control the fonts and text scale used across your storefront and public pages.

You can change the typography used for:

• Store headings

• Body text

• Product descriptions

• Blog and article content

• Public customer pages

Click Change inside the Typography section to choose a different font style.

Step 6: Set your font size hierarchy

Zemers lets you control the size of different text levels.

You can adjust sizes for:

• H1

• H2

• H3

• H4

• H5

• H6

• Paragraph text

You can customize them for:

• Desktop view

• Mobile view

This helps you make sure your pages look right on both large screens and phones.

Use larger heading sizes when you want a stronger visual impact.

Use smaller, cleaner sizes when you want a more minimal and calm storefront.

Step 7: Choose your imagery style

In the Imagery Style section, choose how images and cards are shaped across your storefront.

You can choose:

• Rounded

• Sharp

Rounded images create a softer, more modern feel.

Sharp images create a cleaner, more editorial feel.

This setting affects how your images and media cards appear on your public pages.

Step 8: Choose your button style

In the Buttons Style section, choose how buttons should look across your storefront.

You can use:

• Rounded buttons

• Sharp buttons

Buttons appear on product pages, storefront sections, checkout-related areas, and customer-facing calls to action.

Choose the style that feels closest to your brand.

Step 9: Preview your changes

Use the live preview on the right side of the Brand page to see how your storefront looks.

As you update colors, typography, imagery, and buttons, check how the design feels in context.

Look at:

• Profile area

• Featured products

• Product cards

• Text readability

• Button contrast

• Background and card colors

Make sure the design feels clear, readable, and aligned with your brand.

Step 10: Save your design

After customizing your brand design, save your changes.

Your design will apply to your public Zemers pages, including:

• Storefront

• Product pages

• Blog pages

• Articles

• Course/public content pages

• Other customer-facing pages

Your creator dashboard design does not change. These settings are for the public experience your customers see.

Resetting your brand design

If you want to return to the default look, click: Reset colors

This resets your colors, typography, and layout settings back to the default brand setup.

Use this if you experimented with too many changes and want to start fresh.

Best practices

Keep your brand design simple.

A good storefront does not need many colors. Usually, you only need:

• One strong accent color

• A clean background

• Clear text contrast

• Consistent card styling

• Readable typography

Before publishing, always check your store on mobile. Most customers will see your page from their phone first.

What if something is not working as expected:

If your colors do not look good together

Start from a preset, then only change one or two colors. Avoid changing every color manually unless you already have a clear brand palette.

If your text is hard to read

Increase contrast between the background and text colors. Avoid using low-contrast colors for body text.

If your buttons do not stand out

Check your Accent background and Accent text colors. The button color should clearly stand out from the page background.

If your design looks good on desktop but not mobile

Switch to Mobile view inside the font size hierarchy and adjust the mobile text sizes.

If you want to start over

Click Reset colors to return your branding to the default settings.