The editor inspector: styles, states and attributes

The inspector is the panel on the right of the editor. It edits whatever you have selected on the page. At the top it shows the element's path as a breadcrumb, a readable name such as Heading 1, and a count of the edits already made to it. Click any part of the breadcrumb to select that parent instead.

The inspector has two tabs. Design holds the fields described below. Code shows the selected element's HTML.

Sections

The Design tab is grouped into sections: Content, Attributes, Typography, Spacing, Size, Layout, Background & border and Properties. A collapsed section shows a short summary of its current values, such as 16px Roboto or Flex · Relative, so you can read an element without opening everything.

• Spacing is one interactive box model. Drag or type the margin and padding on each side, with the element's width and height in the middle.
• Size has width, height, and the minimum and maximum of each.
• Typography has font, size, weight, line height, letter spacing, colour and alignment.

Fields always show the element you are editing. Text content is disabled on elements that contain other elements, because typing there would wipe their markup.

Changed fields and Reset

Every field you have changed is marked and has a Reset button. Clearing a field also returns it to the page's own value. Transparent colours stay transparent, and a background image can be edited again after it has been set.

Hover, focus and active states

A Normal | Hover | Focus | Active switch at the top of the inspector styles an element's interactive states: text colour, background colour, border colour, underline, opacity, shadow and transform. For example, a button can change colour on hover, or lift slightly when pressed. Each state edit is an ordinary change, so undo, save and the Changes list work as usual.

Content fields

• Link, with an Open in new tab checkbox.
• Source for images and videos.
• Alt text.

Changing an image works on responsive images that use srcset or <picture>, which includes most Shopify stores. Undo puts the original set of images back.

Text, Link, Source, Alt text and the attribute fields have a Use data from the page picker, so the value can come from the page itself, for example each product's own price. See Dynamic content: showing page data in a variant.

Attributes

The Attributes section sets a tooltip (title) and an accessible name (aria-label) on any element, and a placeholder on text fields and a value on inputs. Event-handler attributes such as onclick are refused, so an attribute can never run script.

Properties: any CSS property

The Properties section comes last and is collapsed, with a summary such as 2 set.

• Search any CSS property the browser knows, with keyboard support. Picking one shows its current value.
• Applying it works like any other field: undo, Reset, save and the Changes list all apply.
• Properties you have set that have no built-in field are listed here, each with an edit box and Reset.
• !important is removed, with a note that the value is set inline on the element.

For anything the inspector cannot express, write it as code. See HTML, CSS and JavaScript in a variant.