This article applies only to layouts created with Build from scratch. Use the Agent to add or change Shopify content in a layout built with the Agent.
Shopify content links a container or layout to a product or collection. Elements inside it can then show dynamic text, images, lists, metafields, and other data from that resource.
Connect Shopify content
Select a container, grid, or the layout root on the canvas.
Select Add Shopify content in the Design panel.
Choose Products or Collections.
Search for and select the resource you want to preview.
The selected resource appears in the Source row. Elements nested inside the container inherit that source.
To use a different source in part of the layout, connect Shopify content to a nested container. To change or remove a source, open the ⋯ menu on its connected row and choose the relevant change or unlink option.
Product and collection templates
Product and collection templates use the current storefront resource after you publish. The product or collection selected in the builder is only the preview example shown on the canvas.
Switch the preview resource to test the layout with different titles, images, prices, product options, and content lengths.
Show dynamic text
Select a text element inside the connected container.
Open Content in the Design panel.
Open Dynamic content.
Choose the Shopify field.
The available fields depend on the connected source. They can include product or collection titles and descriptions, prices, product options, cart amounts, localization values, and text metafields.
Choose Unlink field to return the element to editable static text.
Show a dynamic image
Select an image element inside the connected container.
Open the image source from the Design panel or canvas toolbar.
Choose a dynamic source instead of a fixed asset.
Dynamic sources can include a featured image, product media, or an image stored in a metafield. The image updates with the connected product or collection.
Repeat elements over Shopify data
Use Repeat element to render one container for every item in a Shopify list, such as collection products, product media, cart items, or filter options.
Select a container inside connected Shopify content, or inside a cart layout.
Open Repeat element in the Design panel.
Select +.
Choose the list under Repeat on.
Design one repeated item and connect its text and images to the relevant fields.
Use Limit and Offset when those controls are available.
Use metafields
Metafields appear in supported text, image, link, and conditional-visibility controls when their owner type matches the connected resource. The metafield definition must have Storefront API access enabled in Shopify.
If a metafield does not appear, check its owner type, Storefront API access, field type, and whether the selected element is nested inside the correct Shopify content.
Preview with store data
Use the canvas to review real data from the selected preview resource. For a product, switch variants and selling plans when those controls are available. Enter Preview to test actions and cart behavior.
Cart layouts provide cart data without selecting a product. Without a connected Shopify store, the builder uses placeholder data instead of your catalog.