ShopMax: Documentation (v1+)

ShopMax is a mobile app template that integrates with Shopify to provide a mobile e-commerce experience for customers.

Once your (Shopify) store is connected to WooSignal, your customers will be able to browse products, categories, make purchases (with one of the payment gateways), login, register and more.

You can upload this app template to the App Store or Google Play Store (with your developer accounts). We also offer a service to upload the app on your behalf, link here to view.

This app template uses Flutter, an open-source UI software development kit created by Google. You can configure and do custom development in the source code using Dart.

The contents of our documentation here will help you get started, if you have any questions please feel free to contact us

ShopMax is available to download with a Plus membership, once you've downloaded the file, extract the zip. You should have the below file structure:

If you'd like WooSignal to upload the app to the app stores on your behalf, get in touch here

However, if you want to deploy and the app yourself, follow the below steps.

To quickly get setup, you'll need to ensure that you have the below requirements.

• Shopify Store

  Android Studio (Download here)

  Flutter (Download here)

Follow the below steps to connect your Shopify store:

1. Login to your WooSignal account (or create an account if you are new).

2. On the Dashboard, if you have not connected your store, it will display "Offline". This means you will need to connect your Shopify store, click "Connect Your Store" and add your API details, you can follow the instructions in this video here.

Once you've downloaded Android Studio, follow the below steps to help you get started

Mac

Use the following instructions for macos:

1. Start Android Studio.
2. Open plugin preferences (Configure > Plugins as of v3.6.3.0 or later).
3. Select the Flutter plugin and click Install.
4. Click Yes when prompted to install the Dart plugin.
5. Click Restart when prompted.

Linux or Windows

Use the following instructions for Linux or Windows:

1. Open plugin preferences (File > Settings > Plugins).
2. Select Marketplace, select the Flutter plugin and click Install.

First open Android Studio and select File > Open, this should bring up a new window to open a project. Next, navigate to where ShopMax was stored on your computer and open "LabelStoreMax".

When you open ShopMax for the first time you will need to run the below command to ensure the Flutter version and project is ready.

• flutter clean && flutter channel stable && flutter upgrade && flutter doctor -v && flutter pub get

This will take a minute or so to finish, if you have any issues after running the above command, check the console log for the error.

Next, try to build and run the project. In Android Studio, you can open a simulator for IOS or Android and click the play button to start a fresh build.

This will build the app onto the simulator/emulator on your computer. To test on a real device make sure you have a developer account set up and your device is registered.

If you are having trouble building the app, ensure that your Flutter version is up to date and check for errors with the below command

flutter doctor -v

To enable RazorPay, go to the "/lib/config/app_payment_gateways.dart" file and then look for the below variable.

const app_payment_gateways = ["Stripe"];

Update it to use RazorPay with the following changes:

const app_payment_gateways = ["RazorPay"];

Next open /.env

Edit the below variable with your API Keys from Razor Pay Razor Pay set up.

RAZORPAY_ID=""

Now, if a customer selects the RazorPay method from with the app it will use the "lib/app/providers/razorpay_pay.dart" file to trigger a RazorPay checkout.

To enable PayPal, go to the "/lib/config/payment_gateways.dart" file and then look for the below variable.

const appPaymentGateways = ["Stripe"];

Update it to use PayPal with the following changes:

const appPaymentGateways = ["PayPal"];

Next open /.env

Edit the below variable with your PayPal details like the below example.

PAYPAL_CLIENT_ID="your paypal client id"
PAYPAL_SECRET_KEY="your paypal secret key"

Now, if a customer selects the PayPal method from with the app it will use the "lib/app/providers/paypal_pay.dart" file to trigger a PayPal checkout.

If you want to add a custom payment gateway to the app this section will help you understand how to implement one.

First open "/lib/config/payment_gateways.dart" (this file contains the configuration settings for payments in the app).

List paymentTypeList = [
    addPayment(
        id: 1,
        name: "Stripe",
        description: trans("Debit or Credit Card"),
        assetImage: "dark_powered_by_stripe.png",
        pay: stripePay,
    ),
...

A PaymentType consists of the following:

At the bottom of the file is an example payment gateway

///
//  addPayment(
//      id: 4,
//      name: "MyNewPaymentMethod",
//      desc: "Debit or Credit Card",
//      assetImage: "add icon image to assets/images/myimage.png",
//      pay: myCustomPaymentFunction
//  ),
...

You can uncomment this out to use as a template for your custom payment gateway. You can add multiple payment gateways in this array to build your app how you want it.

Adding payment handler

Create a new file in "/lib/app/providers/payments" and name it as the payment method e.g. paypal.dart

This file will be used to handle the integration of your new payment method.

examplePay(context) async {
    // HANDLE YOUR PAYMENT INTEGRATION HERE
    // ...
    // ...
    // ...
    // THEN ON SUCCESS OF A PAYMENT YOU CAN DO SOMETHING SIMILAR BELOW

    // CREATES ORDER MODEL
    ShopifyOrder orderShopify = ShopifyOrder();

    // CREATES ORDER IN Shopify
    OrderCreatedResponse? orderCreatedResponse =
        await (appWooSignalShopify((api) => api.createOrder(orderShopify)));

    // CHECK IF ORDER IS NULL
    if (orderCreatedResponse == null) {
        showToastNotification(
        context,
        title: trans("Error"),
        description: trans("Something went wrong, please contact our store"),
        );
        // updateState(CheckoutConfirmationPage.path, data: {"reloadState": false});
        return;
    }

    Navigator.pushNamed(context, CheckoutStatusPage.path,
        arguments: orderCreatedResponse);
}
...

After the transaction is complete, the Shopify order is created and the customer is redirected to the order status page with a summary of their order.

When you are happy with the app, you can check out the below links to help you compile and upload the app to the app stores.

• IOS - Deployment
• Android - Deployment

Developer accounts