The Shopify panel in Instant provides a centralized hub for managing Shopify content within the editor. This guide covers accessing the panel, connecting products and collections, and working with dynamic Shopify data.
Overview
Dynamic content enables your layouts to automatically display data from Shopify products, collections, and metafields. Instead of manually entering content, elements fetch their values directly from your Shopify store.
Supported Layout Types
Layout Type | Dynamic Content Support |
Product Templates | Full support (all dynamic fields and metafields) |
Product Sections | Full support when connected to a product |
Collection Templates | Limited support (title, description, image only) |
Pages | Support when connected to Shopify content |
Accessing the Shopify Panel
Open the Instant Builder
In the left sidebar, click on the Shopify tab (Shopify icon)
The Shopify panel serves as the central hub for all Shopify-related content.
Note: When no element is selected, you'll see a message prompting you to "Select an element on the canvas to add Shopify data."
Connecting Shopify Content to a Section
Adding a Shopify Source
Select a section on the canvas
In the Shopify panel, click Add Shopify Source
Choose whether to connect a Product or Collection
Browse the list of products or collections from your Shopify store
Select an item to connect
Once connected, the section displays a green outline indicating the active Shopify connection.
Viewing Connected Shopify Data
When a product is connected, the Shopify panel displays detailed product information:
Data Type | Contents |
Images | Product images and gallery |
Basic Info | Title, price, and description |
Variants | Variant data and options |
Metafields | Custom metafield data |
Store Data | General store-level information |
Working with Shopify Content
There are three ways to connect Shopify data to elements on your canvas.
Method 1: Connect Using the Aim Icon
Hover over any content element in the Shopify panel
Click the aim icon that appears
Click on a matching element on the canvas
Example: Connect the price field to a price text element.
Note: Elements can only be connected within the green outlined section.
Method 2: Drag and Drop
Locate the element you want in the Shopify panel (price, title, image, etc.)
Drag it directly onto the canvas
The element behaves like any standard Instant element
Method 3: AI Auto-Connect
Select the top layer of a section
Locate the Auto Connect icon (on the canvas or in the Shopify panel)
Click to allow AI to automatically connect all content elements to relevant Shopify data
Review the toast notification showing what the AI connected
Accept or revert the changes as needed
The Shopify panel will display all fields that are now connected (title, price, image, etc.).
Connection Methods Comparison
Method | Best For |
Aim Icon | Precise, one-to-one field mapping |
Drag and Drop | Quickly adding new Shopify elements |
AI Auto-Connect | Bulk connecting multiple elements at once |
Connecting Text to Dynamic Content
Text elements can be connected to a wide range of Shopify fields when placed within a connected container or template.
How to Connect
Select a text element within a connected container or template
In the right sidebar under Text, locate the Content input
Click the database icon next to the content field
Select the dynamic field you want to connect
Available Text Fields
Category | Fields |
Product Info | Title, Description, Description (HTML), Vendor |
Pricing | Price, Compare Price, Save Amount, Save Percentage |
Variants | Variant Title, Variant SKU, Quantity Available |
Metafields | All text-based metafields attached to the product |
Note: Only text-based metafields are supported directly in the Instant Builder for text elements.
Connecting Images to Dynamic Content
Images can be connected to dynamic Shopify sources for automatic content updates.
How to Connect
Select an image element within a connected container or template
In the right sidebar, click on the Image field
The image popover opens with two tabs: Instant and Shopify
Select the Shopify tab
Shopify Tab Contents
Section | Contents |
Product/Collection Header | Product images (Featured, Image 1, 2, 3, etc.) or Collection image |
All Images Header | All images uploaded to your Shopify content folder |
The images shown depend on what the container is connected to:
Product connection → Shows product-related images
Collection connection → Shows collection image
Editing Connected Elements
Images
With an image element selected:
Click the image icon to change the source
Or update from Image Settings in the right sidebar
Text
With a text element selected:
Click the dynamic icon to change the connected data source
Example: Switch from product title to product description.
Unlinking or Switching Products
You can unlink or switch connected products from two locations.
From the Right Sidebar
Click the arrows to open the Shopify product panel
Click the more options button (three dots)
Select an action:
Change Product — Connect a different product
Unlink Product — Remove the Shopify connection
From the Shopify Panel
Click the more options button (three dots) on the connected product
Select Change Product or Unlink Product
Working with Templates
When building product or collection templates, the workflow differs slightly from standard pages.
Template Preview Behavior
Templates preview one product at a time
Templates are not permanently connected to a single product
The connected product serves as a preview only
Changing the Preview Product
In the Shopify panel, click the switch icon or more options (three dots)
Select a different product to preview
Connecting Additional Products
When you need to connect a separate product within a template (e.g., a recommended product in a slider):
The product preview will display:
The template preview product
The connected product used in that specific section
This allows you to build sections that reference multiple products within the same template.
Collection Template Limitations
Collection templates currently have limited dynamic content support.
Supported Fields
Field | Supported |
Collection Title | ✓ |
Collection Description | ✓ |
Collection Image | ✓ |
Metafields | ✗ (not yet supported) |
Note: Metafield support for collection templates will be added in a future update.
Advanced Features with Shopify Markets
For advanced metafield connections—including image and video metafields—enable Shopify Markets on your layout. This publishes the Shopify schema to your theme, allowing content editing directly in the Shopify Theme Customizer.
Why Use Shopify Markets for Advanced Content
Feature | Direct in Instant | With Shopify Markets |
Text metafields | ✓ | ✓ |
Image metafields | ✗ | ✓ |
Video metafields | ✗ | ✓ |
Theme Customizer editing | ✗ | ✓ |
Enabling Shopify Markets
Open the Layouts panel
Hover over the layout you want to adjust
Click the more options button (three dots)
Select Template Settings, Page Settings, or Collection Settings
Navigate to the Advanced tab
Toggle Shopify Markets to enabled
Connecting Advanced Metafields
After enabling Shopify Markets and publishing your layout:
Step 1: Open the Theme Editor
Click the Publish button
In the publish dropdown, click Open Theme Editor
The Shopify Theme Customizer opens with your layout
Step 2: Select Your Element
Click on the image or video element on the canvas within the Shopify Theme Customizer
The element highlights in the Shopify layer panel under Sections → Template
Step 3: Connect the Metafield
In the sidebar, view all editable fields (published with your schema)
Click on the image or video you want to make dynamic
Click the Replace button in the dropdown
Select from available metafields (image metafields for images, video metafields for videos)
Required: Connect Product in Theme Customizer
Important: You must connect the product within the Shopify Customizer for metafields to populate.
At the top of the template input fields, locate the Product header
Click the database icon
In the popover, click Product (with the tag icon)
The template becomes dynamic and fetches attached metafields
Shopify Markets Limitations
Limitation | Details |
Product metafields only | Only product-level metafields are supported |
Collection metafields | Not supported (coming in future update) |
Theme Customizer required | Advanced metafields must be connected in Shopify, not Instant |
Quick Reference
Task | Action |
Open Shopify panel | Left sidebar → Shopify tab |
Connect product/collection | Select section → Add Shopify Source → Choose item |
Connect element (aim icon) | Hover element in panel → Click aim icon → Click canvas element |
Connect element (drag) | Drag from Shopify panel → Drop on canvas |
Auto-connect with AI | Select section → Click Auto Connect icon |
Connect text to dynamic field | Select text → Database icon → Choose field |
Connect image to Shopify | Select image → Image field → Shopify tab |
Change connected source | Select element → Click dynamic icon → Choose new source |
Change product | More options (three dots) → Change Product |
Unlink product | More options (three dots) → Unlink Product |
Change template preview | Shopify panel → Switch icon or more options |
Enable Shopify Markets | Layout settings → Advanced → Shopify Markets toggle |
Open Theme Editor | Publish dropdown → Open Theme Editor |
Connect product in Customizer | Product header → Database icon → Product |
Dynamic Field Support by Layout Type
Field Type | Product Template | Collection Template |
Title | ✓ | ✓ |
Description | ✓ | ✓ |
Product Images | ✓ | ✓ |
Price fields | ✓ | ✓ |
Variant fields | ✓ | ✗ |
Text metafields | ✓ | ✗ |
Image metafields | ✓ (via Markets) | ✗ |
Video metafields | ✓ (via Markets) | ✗ |