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
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
Website URL or
IP address of the HOSTING service (e.g. https://220.127.116.11), select your website Framework, input API Keys/Access Token (if any), then click Run Troubleshoot
- Make sure you input https instead of http
- Make sure you do not input sub-folder domain like this https://yaari.store/pk-en because it causes Rest API issue. Please change to subdomain or main domain.
- Guides to get the Magento’s access token, Shopify’s access token, PrestaShop’s API Key.
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
failedmessage after clicking on
Run Troubleshoot, please click on the
failedbutton 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
httpsinstead of http
SSL Verification Please select
Run Troubleshootagain or Ignore it.
Permalink Setting Check your backend to see if it works https://
your ck key&consumer_secret=
your cs key
CS & CK Authorization Please input your Consumer Key and Consumer Secret, following this guide. CS & CK Validation Make sure you have inputted the correct Consumer Key and Consumer Secret, , following this guide. WooCommerce Connectivity Your REST APIs are not enabled on your website, please follow this guide. PrestaShop Connectivity It could be missing the PrestaShop plugin/API on your site. Please follow this guide. Magento Connectivity You could install this extension to active the API integrate with the app following this guide. WCFM Connectivity Missing WCFM Rest API. Please install WCFM Rest API plugin to solve it. Dokan Connectivity Missing Dokan Rest API. Please install Dokan Rest API plugin to solve it. Opencart Connectivity You could install this extension to active the API integrate with the app following this guide. Listing Connectivity Your REST APIs are not enabled on your website, please follow Setup Rest API Shopify Connectivity Please insert "https://" before your website URL https://tppr.me/gJY9G Post Connectivity Please 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.
- 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 Thumbnailsand 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
Mediaand click to view any image files, select Regenerate and you can check the list of new images generated with
- After running the Regenerate successfully, open
lib/env.dartand 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.
You can modify the width and height of images for high resolution. For example, set
_imageWidthto 700 and
_imageHeightis 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.
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.