Platform 2 Guide — This article applies to the new platform. Looking for classic platform docs? Browse the Platform 1 collection.

Why: Connect your Shopify store to seamlessly display and sell products within your app, enhancing your members' shopping experience and driving sales directly from your content.

Navigate: App Station > Settings > Integrations > Shopify

Quick Start

Go to App Station and select Integrations.
Click on Shopify.
Enter your Store Domain (e.g., my-store.myshopify.com).
Enter your Storefront API access token from Shopify.
Click Connect Store and then Sync Now to fetch products.

Detailed Sections

Connecting Your Shopify Store

To integrate your Shopify store with your app, you'll need to set up a connection using the Storefront API. This allows you to sync products and display them as native content within your app.

Create a Custom App in Shopify:
- In your Shopify Admin, navigate to Settings → Apps and sales channels → Develop apps → Create an app.
- Configure the Storefront API scopes:
  - unauthenticated_read_product_listings — Read product catalog.
  - unauthenticated_read_product_inventory — Read inventory/availability.
- Install the app and copy the Storefront API access token.
Enter Your Store Information:
- In the App Station, go to Integrations and select Shopify.
- Enter your Store Domain and Storefront API access token.
- Optionally, enter a Collection Handle if you want to limit the sync to a specific collection.
- Click Connect Store.

Syncing Products

Once your store is connected, you can manually sync products from Shopify to your app:

Click the Sync Now button to fetch products from your Shopify store.
The sync process will create or update product records in your app, allowing you to display them to your members.

Tip: You can check the last sync date and product count to ensure your products are up-to-date.

Displaying Products

You can display your Shopify products in various ways within your app:

Promotional Card Inserts:
- Interleave Shopify products into existing content grids (like recipes or meal plans).
- Configure this in the ContentGrid or ContentShowcase blocks by enabling "Show Shopify Products" and setting the insertion frequency.
Native Content Grid:
- Create a dedicated ContentGrid block that displays only Shopify products.
- Set the content type to SHOPIFY_PRODUCT to show products with shop badges.
Content Showcase:
- Use a ContentShowcase block to display all available products in a carousel format.
- This block does not require category selection since all products will be shown.

Managing Product Visibility

You have control over which products are visible to your members:

Use the Products page in the Shopify integration settings to manage product visibility.
Each product can be marked as hidden or excluded from sync, allowing you to tailor the shopping experience.

Quick View Feature

When members click on a Shopify product card, a quick-view modal or sheet opens, displaying product details and a "Shop Now" button that links directly to the product on your Shopify store. This enhances the shopping experience by keeping users engaged within your app while facilitating purchases externally.