When you select an element on the canvas, the Design panel on the right shows controls for that selection. The panel has three tabs: Style, Interactions, and Settings. Most day-to-day styling happens on the Style tab.

The Style tab groups controls into collapsible sections, and which sections appear depends on the element type. A text element shows a Text section; a container shows Layout and Size; almost every element has a Style section for fills, borders, and effects.

The selected element's name appears at the top of the panel. When you select multiple elements at once, the panel shows only the properties they share.

Many inputs support per-breakpoint values. Change the viewport using the breakpoint controls above the canvas, and your edits apply to that breakpoint only. Some inputs — such as text Content — always apply across all breakpoints.

The Style section controls the visual surface of an element:

Additional effects — Blending, Blur, Fill blur, Grayscale, and Invert — are hidden by default. Use Add on the section header to reveal them when you need them.

Containers and layout elements expose a Layout section with Direction, Gap, Distribute, Align, and Wrap to arrange child elements in rows or columns.

The Size section controls width and height using units such as Fit, Fill, Fixed, Relative, and View. Grid children also get a Location control and column/row span settings.

Text elements add a Text section with typography controls. Image and video elements show a Media section for Content (the source), Sizing, Focus, Quality, and playback options.

Elements that bind to Shopify data show a Shopify content section for setting the data context. Containers that support lists show a Repeat on section for repeating a child over a data source.

Behavior that isn't purely visual lives on the other tabs. Use Interactions for hover and other states, click actions, and motion. Use Settings for Conditional visibility, HTML attributes, and custom Classes (custom classes require the Pro plan or higher).