Shopify content links a layer to a Shopify product or collection. Once a layer is connected, elements inside it can pull dynamic text, images, and lists from that resource. It's the starting point for product pages, collection grids, and any section that shows live catalog data.
Connect a product or collection
The Source connector sits at the top of the Design panel when you select a container, grid, or the layout root.
Select a container (or the layout root) on the canvas.
In the Design panel, click Add Shopify content.
Choose Products or Collections, then search and pick the resource.
The connected resource shows in a row at the top of the panel. Text, image, and repeater controls on child elements now offer sources from that product or collection.
Product and collection templates
Product template and Collection template layouts are always connected to the current product or collection at runtime — the resource you pick in the builder is only a preview (it carries a preview badge). Use it to design against representative data; the live storefront swaps in the actual product or collection a shopper is viewing.
To change the preview resource, use the replace control on the connected row and pick a different product or collection.
Nested layers inherit context
Elements inherit the Shopify content of their nearest connected parent, so you usually connect one container and build inside it. To point a child container at a different resource — for example a related-products block inside a product template — select it and choose Add Shopify content again. A note reads This layer will use its own Shopify source.
To manage an existing connection, open the ⋯ menu on the connected row:
Change product / Change collection — swap the resource
Unlink product / Unlink collection — remove the connection
Product options in preview
When a product is connected, the panel also shows a variant selector and, where the product has subscriptions, a selling-plan selector. Switching either updates prices, options, and dynamic values in the canvas.
If dynamic options look empty
Dynamic sources only appear when an element sits inside a connected container. If an element is directly under the layout root with no Shopify content, Instant shows: Make sure the element is nested inside a container that supports Shopify content. Connect the parent container first.
Cart layouts
Cart layouts connect to a placeholder cart context automatically, so cart-line and cart-total sources are available without picking a product.
Before you start
Connecting real products requires your store to be connected to Instant. Until then, the builder previews with placeholder sample data. See Connect your Shopify store.