After the Agent builds your layout, select something on the canvas to open its controls in the Design panel. Use the panel for precise changes to the current selection; use the Agent when you want to add content, change structure, or revise the wider visual direction.
This Design panel is different from the one used with Build from scratch. It does not have separate Style, Interactions, and Settings tabs. The controls below apply to layouts built with the Agent.
Start from the canvas
Open the layout on the canvas.
Click the text, image, link, section, or other part you want to change.
Review the sections shown in the Design panel.
Change a value and review the result on the canvas.
The available sections depend on what you select and how that part of the layout was built. A control that does not apply to the selection is not shown.
Change content
The panel can show content-specific sections above the styling controls:
Image — Replace the selected image with an Instant asset or a Shopify file.
Link — Change the URL and choose whether it opens in a New tab.
App block — Show all app blocks or one app block from the Shopify theme editor.
Cart state — Change the state shown while previewing a cart.
Preset — Change the preset used by a section.
You can also edit supported text directly on the canvas. Ask the Agent when content is generated dynamically and cannot be changed directly.
Adjust size
Use Size to control:
Width and Height
Min width, Max width, Min height, and Max height
Ratio
Overflow
Some controls are already visible because the selected part uses them. Use the + on a section to add another available control.
Arrange content
When the selected part supports the visual layout controls, use Layout to change:
Direction
Gap
Justify
Align
Wrap
The Layout section is not shown for every selection. Ask the Agent when you need to change a structure that the panel does not expose.
Change spacing
Use Spacing to adjust Padding inside the selection and Margin around it. You can change all sides together or set individual sides.
Style text
Use Typography for the text controls available on the selection:
Font — see Choose fonts below
Weight, following the weights of the selected font
Font size and Color
Spacing, including line height and letter spacing
Align
Case and Accent
Overflow, Wrap, and Break
Use your brand kit to guide the typography the Agent creates. Ask the Agent when you want to apply a broader typography direction.
Choose fonts
The layout carries its fonts with it. The Font picker offers your Custom fonts, your Shopify fonts, and Web fonts (Google Fonts); its search box filters all three at once.
Set the fonts for the whole layout
While nothing is selected on the canvas, the Design panel shows a Fonts section:
Under Fonts, click Body and pick a font. Every text on the layout that doesn't set its own font uses it.
Below Body, the section lists every other font the layout defines — for example Heading, or Display — one row each. The Agent adds these as the design calls for them, so a layout set in one family shows only Body. Click a row and pick a font for it. It reads Same as body until you set one.
Click the clear button on a field to go back to the default.
Set the font of one element
Select an element and open Typography. If the Font row isn't there yet, use the + on the section and choose Font. The row offers:
Body, or one of the layout's other fonts (Heading, …) — follow the layout's fonts set above. Change the layout font once and every element linked to it follows.
Choose a font… — pick a custom, Shopify, or Google font for this element only.
To remove an element's own font, click the clear button on the field; the element then follows the layout's body font again.
Weight (add it with + if it isn't shown) lists the weights of the font in use — the files you uploaded, the Shopify font's variants, or the Google Font's weights. Picking a custom font you uploaded in more than one weight shows the row for you.
Where the fonts come from
A Shopify font links the layout to that theme setting rather than to a fixed family: change the font in your Shopify theme editor and the layout follows. The theme loads the font, so nothing extra is added to the layout.
A Custom font is listed once per family, however many files you uploaded for it, and brings every weight you uploaded, so bold text renders in the bold file you uploaded.
A Web font is loaded from Google Fonts.
The Agent knows the same fonts. When you have no brand kit, it builds with your custom fonts; ask it to use your Shopify font when the layout should match the rest of your store.
Change appearance
Use the remaining sections for visual adjustments:
Style — Radius, Shadow, Opacity, Scale, and Rotate
Background — Color and Position
Border — Color, Width, and Style
Background → Position controls how a background image is aligned. It does not move the selected content around the layout. If you want to reposition content, use Layout, Spacing, or ask the Agent.
Make responsive changes
The screen size selected above the canvas determines which responsive value you view and change. Switch to desktop, laptop, tablet, or mobile first, then adjust the selection in the panel.
Review the result on the canvas after each change. A value inherited from a larger screen size remains in effect until you change it at a smaller one.
When to use the Agent
Return to the Agent when you want to:
Add, remove, replace, or reorder a section
Change the overall structure or visual direction
Apply your brand kit
Change something that is not available for the current selection
Select a specific part on the canvas before asking for a focused change, or clear the selection for a layout-wide request.