Skip to main content

Shopify Integration

Shopify Integration Why: Connect your Shopify store to seamlessly display and sell products within your app. This integration enhances your content...

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 seamlessly display and sell products within your app. This integration enhances your content offerings and provides a streamlined shopping experience for your subscribers.

Navigate: App Station > Settings > Integrations > Shopify

Quick Start

  1. Go to the Integrations page in App Station.

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

  3. Enter your Storefront API access token from Shopify.

  4. Optionally, enter a Collection Handle to limit the sync.

  5. Click Connect Store and then Sync Now to fetch products.

Detailed Sections

Setting Up Your Shopify Store

To connect your Shopify store, you first need to create a custom app in Shopify to obtain a Storefront API access token.

  1. In Shopify Admin, navigate to Settings → Apps and sales channels → Develop apps → Create an app → Create app manually.

  2. Configure the Storefront API scopes:

    • unauthenticated_read_product_listings — Read product catalog.

    • unauthenticated_read_product_inventory — Read inventory/availability.

  3. Install the app (or enable it for development).

  4. Copy the Storefront API access token from the API credentials section.

  5. In Member Kitchens, go to Integrations and enter:

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

    • Storefront API access token: the token you copied.

Syncing Products

Once your store is connected, you can sync products from Shopify into your app. This sync is manual, meaning you will need to click Sync Now to fetch the latest products.

  • Promotional Inserts: Products can be displayed alongside your other content, such as recipes and meal plans.

  • Native Content Grid: You can create a dedicated grid that only shows Shopify products.

  • Content Showcase: Display all available products in a carousel format.

Configuring Product Display Options

You can configure how Shopify products are displayed in your app:

  1. As Promotional Inserts:

    • Edit any ContentGrid or ContentShowcase block.

    • Enable "Show Shopify Products" and set the insertion frequency (e.g., every 4, 8, 12 items).

  2. As a Dedicated Product Grid:

    • Add a ContentGrid block and set the Content Type to "Shopify Products".

  3. As a Product Carousel:

    • Add a ContentShowcase block and set the Content Type to "Shopify Products". No category selection is needed.

Managing Product Visibility

You have control over which products are visible to your members. Each product has an isHidden flag that you can manage from the Products page in the Shopify integration settings. Products marked as hidden will not appear in member-facing surfaces.

Quick View Feature

When members click on a Shopify product card, a quick-view modal or sheet opens, allowing them to see product details and a "Shop Now" button that links directly to the Shopify store.

  • Desktop: Opens a centered modal with product details.

  • Mobile: Opens a full-screen sheet with details and a pinned CTA.

Limitations

  • No In-App Checkout: Purchases are completed on the Shopify store; there is no cart or payment integration within your app.

  • Manual Sync Only: You must manually trigger product sync; there are no automatic updates.

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

Related Articles
Did this answer your question?