This guide covers how to connect your Shopify products and product data to your Instant layouts. You can use AI to automatically connect content or manually connect elements to dynamic Shopify sources.
Overview
There are two ways to work with Shopify content in Instant:
Method | Description |
AI-assisted | Let the AI connect your layouts to products automatically |
Manual | Manually select products and connect content elements to dynamic sources |
Using AI to Connect Shopify Content
AI can quickly connect your layouts to Shopify products and populate them with dynamic content.
Steps
Select the layout (card, section, or container) you want to connect to a product
The selected layout appears in the AI prompt box
Enter a prompt like: "Connect this layout to one of my products"
Click Go
The AI will prompt you to select a product from your Shopify store
Once selected, the AI automatically connects all content elements (images, title, price) to the product
Manual Connection: Basic Layouts
For pages and general layouts, manually connect products and content elements.
Step 1: Connect a Product to a Layout
There are two ways to connect a product:
From the right sidebar:
Select the main layer (container) for your layout
On the right sidebar, click Add Shopify content
Select a product from the list
From the canvas:
Select the main layer for your layout
Click the Shopify icon on the canvas
Choose between a collection or a product
Select the product you want to connect
The layout now displays a green outline indicating it's connected to a Shopify product.
Step 2: Connect Content Elements to Dynamic Sources
After connecting a product, connect each content element to its dynamic source.
Connecting Images
Select the image element
Click the dynamic source icon (on the canvas or right sidebar)
Choose which product image to display:
Featured image
Media 1, 2, 3, etc.
Set the sizing mode (e.g., Fit) for proper display
Connecting Text
Select the text element
Click the source field on the right sidebar
Choose from available product data:
Data Source | Description |
Title | Product name |
Description | Product description |
Price | Current product price |
Unit price | Price per unit |
Metafields | Custom product data |
Disconnecting Products
To disconnect a product from a layout:
Select the connected layer
On the right sidebar, click the unlink icon
The layout is no longer connected
You can now connect it to a different product
Product templates
Product pages work differently because one template can be assigned to multiple products.
Previewing Products
On product pages, you preview a product rather than connecting to a specific one:
On the right sidebar, you'll see Previewing with an example product
Click to change which product you're previewing
Select an actual product from your store
All dynamic content updates to show that product's data
Connecting Product Images
Select an image element
Click the dynamic source
Choose which product media to display:
Featured image
Media 1, 2, 3, 4, etc.
You can rearrange which images show where by selecting different media elements for each image slot.
Connecting Product Options
Product options (Size, Color, Flavor, etc.) allow customers to select variants.
Single Option
Select the option element
On the right sidebar, under Option, choose which variant to display
The element shows all available values for that option
Multiple Options
To display multiple product options (e.g., both Flavor and Size):
Select an existing option element
Duplicate it using Cmd+D (Mac) or Ctrl+D (Windows)
Update the label text (e.g., "Select Size")
On the right sidebar, connect it to a different option (e.g., Size instead of Flavor)
Both options now display on the page
Selling Plans (Subscriptions)
If your product has subscription options:
The page shows one-time purchase and subscribe-and-save options
Under Previewing on the right sidebar, set the default selection:
Option | Behavior |
One-time purchase | Selected by default when customer lands on page |
First available selling plan | Auto-selects subscription option to encourage subscriptions |
Upsells: Connecting Additional Products
Add upsell products that are different from the main product being viewed.
Adding an Upsell Product
Select the main layer that holds your upsell content
On the right sidebar, click Add Shopify content
Search for and select a different product (e.g., a shaker for a protein product)
Connect the content elements (image, title, price) to this product's dynamic sources
The page now shows:
Main product in the primary sections
Upsell product in the connected upsell section
Managing Upsell Products
To change or disconnect an upsell:
Select the layer connected to the upsell product
Click the unlink icon to disconnect
Connect to a different product if desired
Visual Indicators
Outline Color | Meaning |
Blue | Regular element (not connected to Shopify) |
Green | Element is connected to a Shopify product |
Quick Reference
Task | Action |
Connect with AI | Select layout → AI prompt → "Connect to one of my products" → Go |
Add product (sidebar) | Select layout → Add Shopify content → Choose product |
Add product (canvas) | Select layout → Shopify icon → Choose product |
Connect image | Select image → Dynamic source → Choose media |
Connect text | Select text → Source field → Choose data |
Disconnect product | Select layer → Unlink icon |
Preview different product | Product page → Previewing → Select product |
Add product option | Select option element → Option dropdown → Choose option |
Add multiple options | Duplicate option element → Configure for different option |
Set default selling plan | Previewing → Choose one-time or first selling plan |
Add upsell product | Select upsell layer → Add Shopify content → Choose product |
Available Dynamic Sources
Element | Sources |
Images | Featured image, Media 1, 2, 3, etc. |
Text | Title, Description, Price, Unit price, Metafields |
Options | Product variants (Size, Color, Flavor, etc.) |
Selling plans | One-time purchase, Subscription plans |