Update website colors, fonts, header, and footer

Use the manual editor for native page blocks, or a Connected AI client for the supported theme-style and AI-section flows. Read the current theme style before choosing a replacement palette or font.

Colors and fonts

Ask for the intended light, dark, or automatic mode, the primary and secondary colors, background/paper colors, and readable text colors. Use a font from the available font catalogue. Supported settings include body and heading fonts, content width, and per-tag typography. Keep changes focused and check text contrast and long labels in the preview.

Header and footer

Decide separately for each: keep the current version, use the live store's version, use the store default, or design a new AI version. State the choice clearly. Ask the client to preserve the existing part when you have not requested a replacement. A manually built page body is not converted into AI-editable content by changing shared styles.

Mobile and tablet

Supported AI sections have responsive controls for mobile, tablet, and desktop, including visibility, spacing, widths, font sizes, alignment, and columns. Ask for the smallest required change and inspect it at each affected size. A hidden section can still be stored in the draft; hiding it is different from deleting it.

Popups and other shared settings

Advertisement popups have separate before-login and after-login slots. Specify the intended slot, message, enable state, and closing behavior. Check the actual preview and the draft/live difference before publishing. Shared header/footer/style changes can affect account and checkout pages as well as the home page.

Related guides

Create or update a custom website page with AI

Edit header and footer navigation with AI