Help Center
Help Center›Design Settings

How to Customize Your Store's Design

Updated
Feature Availability User Permissions Time to Complete Skill Level
Philippine and US stores on Launch, Grow, Scale and the free trial Store owner, or a team member with Store settings & administration access. To use it inside the page builder, the team member also needs Page Builder access About 15 minutes Beginner

Summary

Overview: Your store's colors, fonts, text styles, button style and corner shape live in one place called Colors & Styles. These settings style your standard store pages (like product listing and checkout) and the pages, header and footer that Max AI builds. You can open them from AI Studio, or from inside the Max AI page builder, where you see each change on the page before you save.

Prerequisites:

  • A store on the Launch, Grow, Scale or free trial plan.
  • Store owner access, or a team member with Store settings & administration access.

Step-by-Step Instructions

Step 1: Open Colors & Styles

You can get there in three ways. All three open the same settings, so a save in one place updates the others.

From the Design Settings page

  1. In the sidebar, click Page Builder, then Design Settings.
  2. At the top of the page, the Colors & Style has moved banner explains that colors, fonts and button style now live in AI Studio. Click Open in AI Studio.

From AI Studio

  1. In the sidebar, click Max AI.
  2. Click AI Studio.
  3. In the AI Studio menu, click Colors & Styles.

The settings form fills the page. There's no store preview here — to see your changes on a real page as you make them, open Colors & Styles from inside the page builder instead (below).

From inside the page builder

  1. Open a page in the Max AI page builder. See How to Build Pages with Max AI.
  2. In the preview's top bar, click Design Settings. The settings open in place of the chat.
  3. The page preview updates as you change things, before anything is saved. The panel reads: Changes show on this page as you make them. Save applies them to your whole store. Cancel puts the page back.

In the page builder, Design Settings is in the message-box menu next to Visual Editor. It's greyed out while the page is saving or publishing.

Step 1b: Check which look you're editing

Above the form, the Look drop-down says which saved look the form is editing. Your store's current design is the one marked (store default).

  • Leave it on the store default to change your whole store. The line under it reads This is your store default. Saving changes your whole store.
  • Choose another look to change only that look. The line reads Saving changes this look only. Pages that use it show the change.

You can keep up to 10 looks and use one on a single page, your menu or your footer. See How to Save and Reuse Store Looks.

Step 2: Check what each section changes

Each section has a label that says where it applies:

Label What it changes
Storefront + Max AI Your standard store pages and the pages Max AI builds
Storefront only Only your standard store pages, like product listing and checkout. Max AI doesn't read it
Max AI only Only the pages Max AI builds
Mixed Some fields change both and others only your storefront. Each field says which

Step 3: Set your colors

Open Color Settings (Storefront + Max AI).

  1. Under Color Palettes, pick a ready-made palette from Select Color Palette: Default, Mint, Chillie, Mustard, Nature, Earth, Neutral or Shadow. A palette fills in all five colors below. It also sets your button colors and footer colors.

  2. Under Customize Colors, adjust any color. Click the swatch to open a color picker, or type a hex code (for example #3871E0) in the box next to it:

    • Primary: key elements such as call-to-action buttons, pagination buttons, variant buttons, checkout navigation buttons and breadcrumb text.
    • Secondary: the hover background of call-to-action buttons.
    • Primary Text Color: key text such as titles, prices, variant titles and button hover text.
    • Secondary Text Color
    • Background Color: the product listing page background.

    Hover over the ? icon next to each color to see where it's used.

Changing any single color clears the palette name, because your colors are now custom.

Step 4: Choose fonts and text styles

Open Headings, Subheadings and Body Settings (Mixed). There are four groups: Headings, Subheadings, Body and Footer.

  1. For each group, choose a Font Family. The list has:
    • Uploaded Fonts: fonts you uploaded yourself.
    • System Fonts: the standard font list (Roboto (Default) is the default).
    • Google Fonts: type at least 2 letters of any font name to search Google's free font library. Matching fonts appear in their own style, so you can see them before you save.
  2. Set Font Size, Font Weight (Light, Normal or Bold) and Text Decoration.
  3. For Footer, you can also set Font Color and Background Color. These change your storefront footer only.

The Font Family and Font Weight of Headings, Subheadings and Body are marked Storefront + Max AI, so they also style the pages Max AI builds. The other fields in this section change only your storefront pages.

To upload your own font file, open any Font Family list and click Font Settings at the bottom. If the Custom Fonts app isn't activated, you're asked to activate it from the Marketplace first.

Step 5: Style your buttons and corners

Open Button Settings (Mixed). It has two groups: Button and Hover.

  1. For Button, set Font Family, Font Size, Font Weight, Font Color and Background Color. The hover group sets the same things for when a shopper points at a button.
  2. Under Button corners, choose how rounded your buttons are. A sample Add to cart button shows the result:
    • Sharp: square corners (0px). This is the default.
    • Rounded: 10px corners.
    • Capsule: fully rounded ends.
  3. To set each corner on its own, switch on Round each corner differently and type a pixel value for Top left, Top right, Bottom left and Bottom right. A box you leave empty becomes 0.

Font Family, Font Weight, Font Color, Background Color and Button corners for Button also style the buttons on Max AI pages.

Step 6: Set your category display (storefront only)

Open Category Settings (Storefront only) to set the categories section's Text Position (for example Below image (default)), Background Color and Image Display Style.

Step 7: Fine-tune the Max AI theme (optional)

Open Max AI Theme (Max AI only). These fields only affect the pages Max AI builds:

  • Accent color: highlights on Max AI pages. Leave it empty to have it worked out from your Secondary color.
  • Surface color: card and section backgrounds on Max AI pages. Leave it empty to have it worked out from your Background Color.
  • Aesthetic direction: one or two sentences describing the look you want, for example Quiet editorial luxury with generous whitespace. Max AI matches this on every page it generates. Click Generate with Max AI to have Max write one from the colors and fonts currently on the form.

Step 8: Save

  1. Click Save. You see Store design settings successfully updated.
  2. To undo unsaved changes, click Cancel. In the page builder, Cancel also puts the page preview back to your saved design.
  3. To go back to the default design, click Reset to Default, then click Yes on Reset Design Settings. This saves straight away.

Step 9: Know what updates, and when

What When it shows your new design
Standard store pages (like product listing and checkout) After you save. Reload the store to see it
Your Max AI header and footer After you save, on every page. Reload the store to see it
Max AI pages published with the current page builder After you save. Reload the store to see it
Max AI pages published before the store-wide theme was introduced They keep the look they were published with. Open the page in the page builder and Publish it again. From then on it follows your design settings
Pages open in the page builder in another tab, or by a teammate They refresh to the new design on their own

If Max AI suggests a theme in chat (for example, colors matched to your logo) and you approve it, the theme is saved into these same design settings.

Verify It Worked

Success criteria:

  • You see Store design settings successfully updated.
  • When you open Colors & Styles again, your colors, fonts and button corners are still there.
  • Your store shows the new colors and fonts after you reload it.
  • In the page builder, the page preview shows your design before you save and keeps it after you save.

Troubleshooting

Common errors

  • "You don't have access to Design Settings. Ask the store owner to grant you the Design Settings permission.": your team role can't change the design. Ask the store owner to give you Store settings & administration access.
  • I can't find the Design Settings button in the page builder: turn off the Visual Editor. The button is also missing if your role doesn't have Store settings & administration access.
  • "Enter a hex color like #D4AF37.": the Accent color or Surface color isn't a valid hex code. Use # followed by 3 or 6 letters or numbers.
  • "Keep it under 500 characters.": shorten the Aesthetic direction.
  • "[Font] was not applied because Google does not offer it for use on a storefront.": the save went through, but that font wasn't allowed. The message tells you which font your store kept. Choose another font.
  • "[Font] was not applied because your store is at its font limit.": your store has too many Google fonts in use. Switch some text groups to fonts you already use, then try again.
  • A typed hex code turns red and goes back: the code isn't a valid hex color. Type # with 3 or 6 letters or numbers.
  • A published Max AI page still shows my old colors: it was published before the store-wide theme. Open it in the page builder and click Publish again.

Limitations & considerations

  • Colors & Styles applies to your whole store. You can't set different colors per page here. To change one element on one page, use the Visual Editor. See How to Link Element Colors to Your Theme.
  • Reset to Default saves immediately. There is no undo.
  • The Footer color fields and Category Settings don't affect Max AI pages.
  • Choosing a palette overwrites your button and footer colors.
  • You can upload up to 3 font files of your own.

Next Steps & Related Resources

Need more help? For more information and assistance, please send an email to support@prosperna.com.

Last Updated: 10/14/2026