Help Center
Help Center›Design Settings

How to Link Element Colors to Your Theme

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 Page Builder access About 5 minutes Intermediate

Summary

Overview: On pages built with Max AI, text and backgrounds usually follow your store's theme colors from Design Settings, so changing your theme restyles them. If you pick a fixed color for one element in the Visual Editor, that element stops following the theme. You can link it back at any time by choosing one of the Theme swatches, and you can do the same for fonts with Theme fonts.

Prerequisites:

  • A page built with Max AI, open in the page builder. See How to Build Pages with Max AI.
  • Your store colors set up in Colors & Styles. See How to Customize Your Store's Design.

Step-by-Step Instructions

Step 1: Select the element

  1. Open the page in the Max AI page builder.
  2. Turn on the Visual Editor and click the element you want to change. See How to Edit a Page in the Visual Editor.

Step 2: See where the color comes from

In the editing panel, open Colors. Under Text and Background, a short note tells you where the current color comes from:

Note What it means
[Color] · from Design Settings (for example Primary · from Design Settings) This element is linked to that theme color. It changes when you change Design Settings
[Color] · inherited from Design Settings (text only) This element doesn't set its own text color. It shows a theme color it picks up from around it
Fixed for this element This element has its own color. Design Settings changes won't affect it

Step 3: Link the color to a theme color

  1. In the Theme row, click one of the swatches. Each swatch is one of your theme colors. Hover over a swatch to see its name:
    • Primary, Primary hover, Secondary, Accent
    • Background, Surface, Alternate section background, Dark section background
    • Text, Text secondary, Heading color, Muted text, Link color, Text on dark backgrounds
    • Button text, Button hover text, Borders and dividers, Image overlay
  2. The note changes to [Color] · from Design Settings, and the linked swatch is highlighted.

To give the element its own color instead, click one of the fixed swatches below the Theme row, or use Custom to pick any color. The note changes to Fixed for this element.

Step 4: Link the font to a theme font (optional)

  1. Open Typography.
  2. In the Font list, under Theme fonts, choose Heading font, Sub-heading font, Body font or Button font. Each option shows the font it currently uses, for example Heading font · Poppins.
  3. The note under the list shows [Font] · from Design Settings. Choosing any other font in the list fixes the font for this element.

Step 5: Save and publish

  1. Click Save Changes in the editing panel.
  2. Turn off the Visual Editor, then click Publish to put the change on your live store.

Verify It Worked

Success criteria:

  • The note under the color shows [Color] · from Design Settings.
  • When you change that color in Design Settings (for example from Design Settings in the page builder's message-box menu), the element changes with it in the preview.
  • After you publish, the element on your live store matches your theme.

Troubleshooting

Common errors

  • I don't see the Theme row: the row only shows when your store has theme colors to offer. Set up your colors in Colors & Styles first. See How to Customize Your Store's Design.
  • The element didn't change when I changed Design Settings: its note says Fixed for this element. Click a Theme swatch to link it again.
  • The whole published page keeps old colors after I changed Design Settings: the page was published before the store-wide theme was introduced. Open it in the page builder and click Publish again.

Limitations & considerations

  • Linking is per element and per property. Text color, background color and font are linked separately.
  • The inherited note only appears for text color and font, not for background.
  • Linking works on pages built with Max AI. Your standard store pages always use Design Settings directly.
  • You can't edit the theme colors themselves from the Visual Editor. Change them in Colors & Styles.
  • A swatch looks blank when your store hasn't set that color yet. Set it under Text and surfaces in Colors & Styles, then come back.

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