An open-source, pre-built mobile app for your Headless Shopify app!

Get started

Prerequisites:

• Make sure you have Node.js installed
• Download the Headless App

1. Enter Environment Variables

EXPO_PUBLIC_STORE_TOKEN=
EXPO_PUBLIC_STORE_DOMAIN=
EXPO_PUBLIC_ENCRYPTION_KEY=
EXPO_PUBLIC_CUSTOMER_SHOP_ID=
EXPO_PUBLIC_CUSTOMER_STORE_ENDPOINT=
EXPO_PUBLIC_CUSTOMER_ACCOUNT_API_TOKEN=
EXPO_PUBLIC_CUSTOMER_ACCOUNT_API_ENDPOINT=

All environment variables are prefixed with EXPO_PUBLIC to be available through the expo client this may change in the future.

• STORE_TOKEN is your Storefront Public API Token
• STORE_DOMAIN is the domain given to you from the Headless app
• ENCRYPTION_KEY random string used by MMKV to encrypt user data.
• CUSTOMER_STORE_ENDPOINT is the endpoint given to you from the Shopify Headless app in the Customer Account API section
• CUSTOMER_ACCOUNT_API_TOKEN is the Client ID of your Customer API Endpoint

2. Install with npm

npm create sellflow

3. Start the app

    npx expo start

In the output, you'll find options to open the app in a

• development build
• Android emulator
• iOS simulator
• Expo Go, a limited sandbox for trying out app development with Expo

[!WARNING] The app does not run with Expo Go because of Unistyles and the Shopify Checkout Sheet Kit the app will not run inside of Expo Go and will only run on an iOS or Android dev build.

Features

• 100% React Native and TypeScript built on Expo
• User Auth
• Search & Filtering
• Checkout Page
• Plugs directly into your existing Shopify store
• Android, iPhone and iPad, Web
• Customizable to your brand's look and feel
• Responsive layout: supports phones and tablets
• Internationalization ready: all strings localized and ready to be translated into your customers' language.
• Free and open source!
• Commercial support available

Checkout Sheet Demo: Search & Filtering Demo:

Add to Cart Bottom Sheet for Multi-Variant Products:

How to Contribute

• Fork the repository.
• Follow the Getting Started instructions above.
• Use your favorite code editor to develop a feature or fix.
• Commit your change to a branch.
• Push to your fork and create a PR.

Professional Support

With official support, you get expert help straight from the core team. We provide dedicated support, prioritize feature requests, deployment strategies, advice on best practices, design decisions, and team augmentation. Reach out to us for consulting at support@kodefox.com.

License

MIT. Copyright (c) KodeFox, Inc.