Working with Shopify Content
This guide covers the new and improved workflow for managing Shopify content within the editor. A dedicated Shopify panel is now available, designed to streamline your workflow and provide more control and visibility over connected content.
Accessing the Shopify Panel
A new tab with the Shopify icon is now available in the left-hand panel.
This tab serves as the central hub for all Shopify-related content.
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
Select a section on the canvas.
In the Shopify panel, click “Add Shopify Source.”
Choose whether to connect a Product or a Collection.
A list of products or collections from your Shopify store will appear.
Select a product (e.g., Suntime). The section will now be connected, indicated by a green outline.
Viewing Connected Shopify Data
Once a product is connected:
You'll see a detailed view of the product's information, including:
Product images
Title, price, and description
Variant data
Metafields
General store-level data
Three Ways to Work with Shopify Content
Connect Elements Using the Aim Icon
Hover over any content element in the Shopify panel to reveal the aim icon.
Click it and then click on a matching element on the canvas (e.g., connect the price field to a price text element).
Note: Elements can only be dragged or connected within the green outlined section.
Drag and Drop Shopify Elements
Drag elements (e.g., price, title, image) from the Shopify panel directly onto the canvas.
They behave just like standard elements.
Use AI to Auto-Connect Shopify Data
Select the top layer of a section.
Locate the Auto Connect icon (either on the canvas or in the Shopify panel).
Click it to allow AI to connect all content elements to relevant Shopify data automatically.
A toast notification will show what the AI did — you can accept or revert the changes.
The Shopify panel will display all fields that are now connected (e.g., title, price, image).
Editing Connected Elements
Select an element on the canvas to modify it.
For images:
Click the image icon or update it from the Image Settings in the right-hand panel.
For text:
Click the dynamic icon to change the connected dynamic source (e.g., switch from title to description).
Unlinking or Switching Shopify Products
You can unlink or switch products in two places:
From the Right-Hand Panel:
Click the arrows to open the Shopify product panel.
Click the three dots to:
Change the product
Unlink the product
From the Shopify Panel:
Click the three dots on the connected product to perform the same actions.
Special Notes on Templates
When building product or collection templates, keep the following in mind:
Templates preview one product at a time but are not connected to a single product.
To change the previewed product:
Click the switch icon or the three dots in the Shopify panel.
Highlighting Other Products Within a Template
You may want to connect a separate product (e.g., a recommended product in a slider):
The product preview will show:
The template preview product
The connected product used in that specific section