Repository: bagisto/opensource-ecommerce-mobile-app
Stars: 14780
README.md
<p align="center">
<a href="http://www.bagisto.com"><img src="https://bagisto.com/wp-content/themes/bagisto/images/logo.png" alt="Total Downloads"></a>
</p>
<p align="center">
<a href="https://twitter.com/intent/follow?screen_name=bagistoshop"><img src="https://img.shields.io/twitter/follow/bagistoshop?style=social"></a>
<a href="https://www.youtube.com/channel/UCbrfqnhyiDv-bb9QuZtonYQ"><img src="https://img.shields.io/youtube/channel/subscribers/UCbrfqnhyiDv-bb9QuZtonYQ?style=social"></a>
<a href="https://deepwiki.com/bagisto/opensource-ecommerce-mobile-app"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a>
</p>
Open Source eCommerce Mobile App
Bagisto revolutionizes the world of mobile commerce with its open-source eCommerce mobile app solution. This open-source mobile ecommerce app seamlessly transforms your Bagisto store into a powerful mobile platform, providing real-time synchronization of products and categories. With a user-friendly interface, managing orders becomes a breeze, making it an essential tool for tech-savvy individuals and those new to eCommerce.
This mobile app, built on the foundation of the Bagisto eCommerce framework and leveraging the robust Laravel stack, offers many features for a comprehensive and efficient mobile shopping experience. The app ensures easy product information management and accelerates time-to-market for your products, all while giving you complete control over your store.
Live Demo
Android: <https://play.google.com/store/apps/details?id=com.webkul.bagisto.mobikul>
iOS: <https://apps.apple.com/us/app/mobikul-bagisto-laravel-app/id6447519140>
Features
The open-source ecommerce mobile app comes with an array of features to improve your customers' shopping experience.
Interactive Home Page and Search
!Interactive Home Page and Search
All Type Product Supported
Dark Mode and Push Notification
!Dark Mode and Push Notification
Discount Coupons and Guest Checkout
!Discount Coupons and Guest Checkout
Wishlist and Product Category
!Wishlist and Product Category
Order Details and Product Reviews
!Order Details and Product Reviews
Installation Guide
Before beginning with the installation, you will need the following with the mentioned versions
- Bagisto Version - Bagisto v2.0.0 or higher
- Android Studio Meerkat | 2024.3.2
- Flutter Version - 3.38.9
- Dart - 3.10.8
- Xcode - 26.3
- Swift - 6.1
Make sure you have installed the API module and set this up properly on your bagisto.
NOTE: It is recommended that you run a simple Hello World program in Flutter first before proceeding further so that you are sure that the environment is properly set up.
Installation Steps
Clone the repository
- Open your terminal or command prompt
- Navigate to the directory where you want to save the project
- Use the git clone command followed by the repository URL
git clone https://github.com/bagisto/opensource-ecommerce-mobile-app.gitInstall dependencies
- Navigate to the project's directory
cd <repository-name>- Run the following command to install the required packages
flutter pub getConnect a device or emulator
- Physical Device
1. Enable USB debugging on your device
2. Connect it to your computer using a USB cable.
- Emulator
1. Start an Android or iOS emulator using your preferred IDE or tools.
Run the Project
- Use the following command to build and run the project
flutter runMinimum Versions
- Android: 22
- iOS: 15.5
Configurations Steps
For Setup
Change the baseDomain as per your store
Go to lib/core/constants/api_constants.dart and configure the following:
/// Bagisto GraphQL endpoint (e.g., https://your-bagisto-server.com/graphql)
const String bagistoEndpoint = 'YOUR_BAGISTO_ENDPOINT_HERE';/// Storefront key for Bagisto API
/// Get this from your Bagisto admin panel
const String storefrontKey = 'YOUR_STOREFRONT_KEY_HERE';
/// Company name (optional metadata)
const String companyName = 'Your Company Name';
For Theme
In the AppColors class, find and modify the primary colors:
class AppColors {
// Primary Colors - Modify these hex values to change the app's primary color
static const Color primary500 = Color(0xFFFF6900); // Main primary color
static const Color primary600 = Color(0xFFF54900); // Darker variant for pressed states
// ...
}To change the primary color:
- Replace 0xFFFF6900 with your desired color hex value
- Adjust primary600 to a slightly darker shade of your primary color
For Push Notification Service
- Android
Replace "google-services.json".
- iOS
Replace "GoogleService-Info.plist".
Helpful Articles
Android → <https://mobikul.com/knowledgebase/generating-google-service-file-enable-fcm-firebase-cloud-messaging-android-application/>
iOS → <https://mobikul.com/knowledgebase/generating-new-googleservice-info-plist-file-fcm-based-project-ios-app/>
For Application Title
- Android
1. Path: android/app/src/main/AndroidManifest.xml
2. Change app name: android:label="*"
- iOS
1. Go to the general tab and identity change the display name to your app name
For Splash Screen
- For adding an Image as a Splash Screen
1. Path: assets/images/splash.png
2. No additional constant update is required. The splash image is loaded directly in lib/features/splash/presentation/splash_screen.dart.
For App Icon
- Android: Open the android folder in Android Studio and then right click app > new > Image Asset set Image.
- iOS: Replace the icons over the path > ios/Runner/Assets.xcassets/AppIcon.appiconset
Installation Video

API Documentation
For the API Documentation, please go through - <https://api-docs.bagisto.com/api/graphql-api/introduction.html>
Usage
For detailed usage instructions, refer to the official documentation
Contributing
Contributions are welcome! Follow the contribution guidelines to get started.
License
Bagisto is open-sourced software licensed under the MIT license.