Reusable components let you design a block once — a product card, testimonial, or navigation item — and reuse it across pages. Edit the main component and every instance stays in sync.
Components are available when they're enabled for your project. When enabled, Components appears in the ⋯ menu in the builder's left panel, alongside Brand styles and Assets.
Main components vs. instances
A main component is the source definition. An instance is a linked copy placed on a page. Editing the main component updates every instance that hasn't overridden the changed properties.
When you select an instance without editing its main component, the Design panel shows a Reusable components message with a Watch video link. From there you can jump into editing the main component to change structure and styles for all instances.
Create a component
Build the block on the canvas — containers, text, images, and interactions included.
Right-click the element and choose Create component (
Ctrl+Alt+K/Cmd+Alt+K).
Instant saves it and adds it to the Components panel. A couple of limits apply: components can't be nested inside other main components, and a grid can't be saved as a component.
Insert instances
Open the Components panel and drag a component onto the page to insert an instance. Position it like any other element. Style and content changes you make on an instance stay local to that instance; structural changes require editing the main component.
Manage components
Right-click a component in the panel for Rename, Edit, Duplicate, and Delete. On an instance, right-click and choose Detach instance to break its link to the main component and turn it into normal elements.
Components with Shopify data
Components work well inside Repeat on lists — design one product tile as a component, repeat it over a collection's products, and maintain a single main component for the tile. Keep dynamic Content bindings inside the component so they resolve from the parent repeater or Shopify content container.