Skip to main content
All CollectionsBuilderShopify content
Shopify Content
Shopify Content
Updated today

Shopify Integration Guide

With our Shopify integration, you can seamlessly utilize your existing product content, including images, text, and prices within Instant. To start working with Shopify content, follow these simple steps:

  1. Selecting Content Elements:

    • Choose a section or element on your page.

    • In the Design Panel, click on "Content."

    The selected section or element is highlighted in blue. When you activate the Content feature, the highlight turns green, indicating that this part of the page is now synced with Shopify content.

Content Options

Within the Content section, you have several choices:

  • Placeholder: Pre-made content for experimenting

  • Shopify: Access genuine Shopify content from your connected Shopify store.

  • Source: Pick the product you want to work with.

  • Variant: Select a specific product variant you want to focus on.

Working with Shopify Content

Shopify content mainly involves images and text elements:

  • Images: To showcase Shopify product images, follow these steps:

    1. In the Design Panel, go to the image options.

    2. Change the source from "Static" to "Dynamic."

  • Text: Display Shopify text with these steps:

    1. In the Design Panel, access text options.

    2. Click on "Content" and switch the source from static to dynamic.

    3. Within the source, choose the type of text you want to display: Description, Price, Title, or Vendor.

Dynamic Interactions

When working with Shopify content, you can also add dynamic interactions to buttons:

  1. Select an element that supports interactions (box or text)

  2. Navigate to the Interaction options in the Design Panel.

  3. Click on the Cart icon.

  4. Choose the desired action: "Add to cart" or "View product."

  5. Specify the redirect destination: "Go to cart" or "Go to checkout."

Limitations

When using the App Island element, only one product can be selected as a content source in your section because of a limitations enforced by Shopify. Shopify enforces this limit because the app blocks will sometimes use the selected product as a reference to display certain data, which becomes ambiguous when multiple products are used in a section.

Did this answer your question?