Marketo – Flutter E-Commerce App with Shopify Integration

Marketo Shopify

The Ultimate E-Commerce User Flutter App with Shopify Integration

Project Overview

Marketo Shopify delivers a seamless Flutter application tailored
for users,
enhancing their shopping experience. Designed to integrate with Shopify, it provides a clean and
efficient platform for browsing and purchasing products directly from your Shopify store.

E-Commerce Ready

• Complete shopping experience
• Product browsing & search
• Cart management
• Order tracking

Shopify Powered

• Direct Shopify integration
• Real-time product sync
• Secure checkout process
• Inventory management

Flutter Built

• Cross-platform compatibility
• Native performance
• Beautiful UI/UX
• Responsive design

App Screenshots

Welcome Screen

Product Collection

Product Preview

Shopping Cart

App Interface

Product Details

Category View

Search Results

User Profile

Code Structure

️ Shopify Integration

Quick Setup Guide

1-Create Shopify App

Navigate to Settings → Apps → App Development → Create an App

2-Generate Tokens

Create Admin API and Storefront API access tokens

3-Set Permissions

Configure read/write permissions for products and collections

4-Configure App

Update GraphQL configuration with your tokens

API Token Comparison

Token Type	Admin API Token	Storefront API Token
Usage	Backend operations (REST/GraphQL)	Frontend customer interactions (GraphQL)
Header	X-Shopify-Access-Token	X-Shopify-Storefront-Access-Token
Access Level	Full store management	Limited to storefront data

Required Permissions

• read_products – View product information
• write_products – Manage product data
• read_collections – Access product collections
• write_collections – Manage collections

✨ App Features

Product Discovery

• Browse by main categories
• Search products by name
• Filter by attributes
• View “Limited Quantity” items
• Explore “New Arrivals”

Personalized Experience

• Categorized product browsing
• Personalized recommendations
• Browsing history tracking
• Special offers & deals

Shopping Features

• Detailed product pages
• Product variants support
• Shopping cart management
• Coupon application
• Order tracking

Key App Screens

Home Screen
Category Browse
Product Search
Product Details
Shopping Cart
Shopify Checkout
Order History
Account Management

Order Processing Flow

1. Product selection with variant options
2. Shopping cart management
3. Coupon application
4. Shipping information collection
5. Order confirmation with unique ID
6. Real-time status tracking

⚙️ Technical Specifications

Multilingual Support

• Arabic (ar)
• English (en)
• Easy to add more languages

Flutter Dependencies

• graphql_flutter – Shopify GraphQL
• flutter_inappwebview – Checkout
• easy_localization – Multi-language
• flutter_bloc – State management
• cached_network_image – Images
• hive – Local storage

Shopify Requirements

• Active Shopify store
• API access enabled
• Admin & Storefront tokens
• GraphQL configuration
• Product permissions

Installation Guide

Prerequisites

1. Flutter SDK installed (Flutter.dev)
2. VS Code or Android Studio
3. Android emulator or physical device
4. Active Shopify store with API access

Troubleshooting: If Flutter pub get fails, ensure your pubspec.yaml is correctly formatted and run ‘flutter
clean’ first.

Quick Start

# Clone the repository

git clone [repository-url]

# Navigate to project directory

cd marketo_shopify

# Install dependencies

flutter pub get

# Run the app

flutter run

1-Download & Extract

Extract the project files to your desired location. Verify all files are present, including
pubspec.yaml.

2-Install Dependencies

Run flutter pub get in the project directory. This installs all packages listed in
pubspec.yaml.

3-Configure Shopify

Update GraphQL configuration with your tokens in lib/core/databases/graphql/graph_ql.dart.

4-Run & Test

Launch the app and test with your Shopify store. Use ‘flutter run—debug’ for debugging.

Dependencies Table

Package	Purpose	Version Requirement
graphql_flutter	Shopify API integration	5.0.0
flutter_inappwebview	In-app checkout	5.3.2
easy_localization	Multi-language support	3.0.0
flutter_bloc	State management	8.0.0
cached_network_image	Image caching	3.2.0
hive	Local database	2.0.4

Configuration

Project Structure

marketo_shopify/

├── lib/

│ ├── core/

│ │ ├── databases/

│ │ │ └── graphql/

│ │ │ └── graph_ql.dart

│ │ └── enum/

│ │ └── enums.dart

│ ├── features/

│ └── main.dart

├── assets/

│ ├── lang/

│ │ ├── ar.json

│ │ └── en.json

│ ├── fonts/

│ └── icons/

└── pubspec.yaml

Key Files

• graph_ql.dart – Shopify GraphQL setup (add your API tokens here)
• enums.dart – Language configuration
• assets/lang/ – Translation files (add new languages as JSON)
• pubspec.yaml – Dependencies and assets declaration

Adding Languages

• Create JSON file in assets/lang/ (e.g., fr.json)
• Update supportedLocales in main.dart
• Add to languageList in enums.dart
• Use en.json as reference; test with ‘flutter run—locale=fr’

Shopify Store Setup

• Products with variants & pricing
• Collections organized
• API permissions configured (read/write for products/collections)
• Tokens generated & active; regenerate if expired

Language Configuration Example

{

“welcome”: “Welcome to Marketo Shopify”,

“products”: “Products”,

“cart”: “Shopping Cart”,

“checkout”: “Checkout”

}

Troubleshooting: If localization fails, ensure assets are declared in pubspec.yaml under flutter: assets.

Get Started Today

Ready to integrate Marketo with your Shopify store? Follow our comprehensive setup guide to get started!

Quick Setup
Steps:

1. Configure your Shopify API tokens

2. Update GraphQL configuration

3. Run flutter pub get

4. Launch your app with flutter run

Created by MDSoft

Professional Flutter & E-Commerce Development

Created: September 2025

Contact Support