Skip to main content

Create New App

1. Install API on your Website​

Make sure to install the required API below to your website. It helps to display full products and images of your website on FluxBuilder, and sync with your data/website:

2. Create App on FluxBuilder​

Video guide​

image

Manual guide​

Step 1: Select [Dashboard] > choose [Create New App] (If you subscribed to a plan but haven't created an app yet, click the auto-generated app, video guide )

Step 2: App Information

Input the App Information as below:

  • App Name (required): input the name of your App/
  • App Category (required): select the field of the App.
  • Short Description (optional): input basic information about the app.
  • Upload Logo (optional): upload the logo of App in both Light Theme and Dark Theme. It can be changed later.

Step 3: Server Integration

Input your Website URL or IP address of the HOSTING service (e.g. https://1.100.67.68), select your website Framework, input API Keys/Access Token (if any), then click Run Troubleshoot

If getting failed, please click ? icon at the end of the Failed Message to see the solution:

Step 4: Select a template

Step 5: Choose Color and Font

These settings can also be edited later. Now, click CREATE APP to start your journey.

3. Common issues and Solutions​

  • If you see a failed message after clicking on Run Troubleshoot, please click on the failed button to view the solution. Alternatively, you can check the solutions listed below:

    Failed item🚨Solution ✅
    Make sure you do not input sub-folder domain like this https://yaari.store/pk-en. Please change to subdomain or main domain
    Make sure you input https instead of http
    SSL VerificationPlease select Run Troubleshoot again or Ignore it.
    Permalink SettingCheck your backend to see if it works https://your website/wp-json/wc/v2/products?consumer_key=your ck key&consumer_secret=your cs key
    CS & CK AuthorizationPlease input your Consumer Key and Consumer Secret, following this guide.
    CS & CK ValidationMake sure you have inputted the correct Consumer Key and Consumer Secret, , following this guide.
    WooCommerce ConnectivityYour REST APIs are not enabled on your website, please follow this guide.
    PrestaShop ConnectivityIt could be missing the PrestaShop plugin/API on your site. Please follow this guide.
    Magento ConnectivityYou could install this extension to active the API integrate with the app following this guide.
    WCFM ConnectivityMissing WCFM Rest API. Please install WCFM Rest API plugin to solve it.
    Dokan ConnectivityMissing Dokan Rest API. Please install Dokan Rest API plugin to solve it.
    Opencart ConnectivityYou could install this extension to active the API integrate with the app following this guide.
    Listing ConnectivityYour REST APIs are not enabled on your website, please follow Setup Rest API
    Shopify ConnectivityPlease insert "https://" before your website URL https://tppr.me/gJY9G
    Post ConnectivityPlease check if you install any strange plugins that needing the permission to access

  • Cannot see Products or Categories (slowly loading)

    To make the app load faster or to fix missing Product Images, you would resize images, optimize the network request for Images.

    • For WordPress

      • Setup the Regenerate Image plugin, then be sure your site plugin has regenerated thumbnail like this image.
      • Firstly, go to Setting/ Media Settings, and set up the image sizes for the Product Image. This is our recommended settings.
      • Secondly, go to Tools/Regenerate Thumbnails and click the blue button Regenerate Thumbnails For All xx Attachements, then wait for the process to complete.
      • To check if the image is generated correctly, go to Media  and click to view any image files, select Regenerate and you can check the list of new images generated with xxx-smal or xxx-medium or xxx-large format.
      • After running the Regenerate successfully, open lib/env.dart and update this value "kIsResizeImage": true, , or if you are using FluxBuilder, enable Image Optimization.
      • There is a good solution to optimize more image loading by converting the Image to Webp image type by using WebP Express plugin. This is also a good tool which is our recommendation to compress the images in order to optimize the image loading.

    • For Shopify

      You can modify the width and height of images for high resolution. For example, set _imageWidth to 700 and _imageHeight is 1000 as this image.

- **For PrestaShop**

    Go to `Design` > `Image Settings`, add list requirement images if it does not exist: `small_default`, `medium_default`, `large_default`. Then, tap the [Regenerate thumbnails](https://tppr.me/NO9VG) button.
note

If you see images have non-good resolution on FluxBuilder, don't worry, we downgrade the resolution of images to improve the speed of FluxBuilder. After building, the app loads images with high resolution smoothly on the real device.