Skip to main content

Shopify Integration

Shopify Integration Why: Connect your Shopify store to display and sell products directly within your app, enhancing your members' shopping experie...

Written by Ken Truesdale

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 display and sell products directly within your app, enhancing your members' shopping experience and driving sales seamlessly.

Navigate: App Station > Settings > Integrations > Shopify

Quick Start

  1. Go to App Station and navigate to Settings > Integrations.

  2. Enter your Store Domain (e.g., my-store.myshopify.com).

  3. Enter your Storefront API access token from your Shopify custom app.

  4. Click Connect Store.

  5. Click Sync Now to fetch products from your Shopify store.


Detailed Sections

Overview of Shopify Integration

The Shopify integration allows you to connect your Shopify store to your app, enabling you to display products as native content cards. This integration is available for Growth-tier accounts and requires a manual sync to fetch products.

Setting Up Your Shopify Store

To set up your Shopify store in the app:

  1. Create a Custom App in Shopify:

    • In your Shopify Admin, go to SettingsApps and sales channelsDevelop appsCreate 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.

  2. Connect Your Store:

    • In the app, navigate to Integrations and enter:

      • Store Domain: your-store.myshopify.com (without https://)

      • Storefront API access token: the token you copied from Shopify.

Syncing Products

After connecting your store, you can sync products:

  • Click Sync Now 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.

Displaying Products

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

  1. Promotional Card Inserts:

    • Interleave products into existing content grids (like recipes and meal plans).

    • Configure this in the ContentGrid or ContentShowcase blocks by enabling Show Shopify Products and setting the insertion frequency.

  2. Native Content Grid:

    • Create a ContentGrid block specifically for Shopify products by setting the Content Type to SHOPIFY_PRODUCT.

  3. Content Showcase:

    • Use a ContentShowcase block to display all available products in a carousel format.

Managing Product Visibility

You can control which products are visible to your members:

  • Use the isHidden flag to hide products from member-facing surfaces.

  • Products that no longer match your sync filters will be marked as syncExcluded, keeping your historical data intact.

Quick-View Feature

When members click on a product card, a quick-view modal or sheet opens, displaying product details and a "Shop Now" button that links directly to your Shopify store for checkout.

Important Notes

  • Manual Sync: You must click Sync Now to update products; there is no automatic scheduling.

  • No In-App Checkout: All purchases are completed on the Shopify store.

  • Single Image Sync: Only the primary product image is synced; additional images are not imported.

Did this answer your question?