This guide explains the way to customize all layout and theme, such as how to delete/hide any UI, customize the Dynamic Tabbar, App Color, Home Layout, Blog Detail Layout, Category Layout, WordPress Blog Layout, Sticky Header, Banner, Logo, ListView, Sale Off-Discount, Count Down...

There are 2 ways to customize the Design of this app:

1. Customize via the drag&drop FluxBuilder tool. Then export the JSON file, and replace it with /lib/config/config_en.json in FluxStore's source code.
2. or Customize directly on FluxStore's source code via Android Studio or Visual Studio Code.

1. Use the FluxBuilder tool

• You can use the FluxBuilder tool to customize your app Design easily by drag & drop, then Export the customzied Design to /lib/config/ folder in source code. Refer to the guide of FluxBuilder. Make sure you use the latest version.
• Check out Videos guide of FluxBuilder.

2. How to Customize any UI

The solution answering the questions like "how to change my homepage icons, Hamberger menu icon", "how to disable/hide any UI from the app?", "How to disable options from settings sections, like language, currency, dark theme", "how to remove the zip code", "how to remove the 'See All' line of the category page", is to use the Inspector Tools from Android Studio to customize any UI from the app.

Video guide:

Manual guide: Please refer to this document for the detailed guideline:

• https://flutter.dev/docs/development/tools/devtools/inspector

For example, how to change the Icon from the Home screen below (Hamberger menu icon):

Click the icon from Android Studio to enable Inspector Mode, then click on the UI Icon, the Android Studio will jump to the widget that is ready to change into new values.

3. Dynamic Tabbar

With multi languages feature, the /lib/config folder will have these files: config_ar.json, config_en.json, config_ja.json, ... If you want to add a new language, copy the configuration to other config_xx.json files so that you can see the changes reflected when changing language. Reference more detail about the Multi-Language features.

This is a good feature configuration to change the tab bar icon, positions, and default layout.

Open lib/config/config_en.json (assumes the English is the default language setting) and edit the Tabbar value:

  "TabBar": [
    {
      "layout": "home",
      "icon": "assets/icons/tabs/icon-home.png",
      "label": "Home"
    },
    {
      "layout": "category",
      "categoryLayout": "card",
      "icon": "assets/icons/tabs/icon-category.png",
      "label": "Category"
    },
    {
      "layout": "search",
      "icon": "assets/icons/tabs/icon-search.png",
      "label": "Search"
    },
    {
      "layout": "cart",
      "icon": "assets/icons/tabs/icon-cart2.png",
      "label": "Cart"
    },
    {
      "layout": "profile",
      "icon": "assets/icons/tabs/icon-user.png",
      "label": "Profile",
      "showChat": true
    }
  ],

• layout: the screen layout, for the special home layout. It is a dynamic layout that could control more flexibility by updating HorizonLayout, VerticalLayout, Background values (from the same config_en.json file).
• icon: the asset file to load the tabbar icon image.
• categoryLayout: support many kinds of layout grid, column, sideMenu, subCategories, card. It's used to display the layout category.
• label: a text line displays right under tabbar icons
• showChat: a SmartChat icon displays at the right-bottom corner of selected screens.

To apply the new styles of TabBar 🗳:

Go to lib/menu/maintab.dart and uncomment the customerTabbar() function, it could be replaced by other type: customerTabbar1(), customerTabbar2(), and customerTabbar3(). This feature will be available in the next FluxBuilder release as well, please stay tuned 👍

4. App Main Color

Open lib/config/config_en.json file in the project.

You could change most of the components' color in Color section.

For example, you could change the color of Tabbar to any color you like, then reload the app to see the effects.

"Setting": {
    "MainColor": "#3FC1BE",
    "ProductListLayout": "list"
  }

🗳 Coding Guide: to customize the theme folder, go to the lib/common/styles.dart.

5. Home Layout Templates

• To customize these setting easier, please give a try to use the FluxBuilder app to update the UI via builder app - https://fluxbuilder.com
• It’s quite easy to change your own design base on the following powerful widget from the app, try to make your own fancy Homepage by following the below guideline.

We provide many theme templates as config_themeXX.json files. You are able to select one template that you love. These theme files are in:

• Fluxstore Multi Vendors app: open lib/frameworks/vendor/config_example folder - https://tppr.me/XCqVu
• Fluxstore Pro, or Fluxstore Woocommerce app: open lib/frameworks/woocommerce/config_examplefolder - https://tppr.me/UiSD4
• Fluxstore Listing app: open lib/frameworks/listing/config_example folder.
• For other FluxStore apps, you can export theme templates from the FluxBuilder tool as https://tppr.me/fp4HH

Copy and replace the content of config_themeXX.json to lib/config/config_en.json to get the demo as screenshots below:

1. Logo Item

This part guides to change logo on Homepage screen. To change logo on the Login screen or Left menu, please refer to Common Basic Features on the left menu of this guide > Onboarding and Login mode or Drawer Layout (left menu side)

🗳 Widget files: lib/widgets/home/logo.dart

📖 Usage: config lib/config/config_en.json as the following option:

  "HorizonLayout": [
    {
      "layout": "logo",
      "image": 'http://your-logo-png',
      "showMenu": true,
      "showSearch": true
    },

• image: the URL Image link or local asset link
• background: the Hex color background values
• showSearch: show the Search Icon
• color: setup color Icons
• showMenu: show the left Menu Icon, you could change the Icons.blur_on to Icons.menu to display the Hamburger menu
• showLogo: option to show or hide the Logo.
• name: show the text of App Name if you don’t want to show Logo Image.

2. Banner

This part will show you the way to config Banner Slider Image, Banner Group Image, or Tinder Banner.

Banner Slider Image:

🗳 Widget files: 

• lib/widgets/home/banner/banner_slider_items.dart
• lib/common/tools.dart

📖 Usage: config lib/config/config_en.json as the following option to enable the slider image:

    {
      "layout": "bannerImage",
      "isSlider": true,
      "autoPlay": false,
      "showNumber": false,
      "design": "default",
      "showBackGround": true,
      "radius": 2.0,
      "height": 0.15,
      "items": [
        {
          "category": 38,
          "image": "https://trello-attachments.s3.amazonaws.com/5dc3cfb1d013e9228256a65f/1200x800/1bf47a828eb5741c616ce6e9d7a9b45c/background3.jpg",
          "padding": 15.0,
          "coupon": "",
          "radius": 9.0
        },
        {
          "category": 32,
          "image": "https://trello-attachments.s3.amazonaws.com/5dc3cfb1d013e9228256a65f/1200x800/48633db8dd93f7e44f397119a24428e9/background6.jpg",
          "padding": 15.0
        },
        {
          "category": 58,
          "image": "https://trello-attachments.s3.amazonaws.com/5dc3cfb1d013e9228256a65f/1200x800/8c242df41a73e0d73a97ac2c99b2339b/background5.jpg",
          "padding": 15.0
        }
      ]
    },

• layout: the value should be bannerImage
• isSlider: value true/false, show the banner as slider.

• items: is the array of json image objects. Each image can be linked to a list of products by category ID. The Banner Items detail setting:

  • image: the URL of the Images, it could be the asset local Image file.
  • padding: the spacing padding, the value should be double values.
  • category: config this Category ID to open the banner to the category product list.

Banner Group Image:

🗳 Widget files: lib/widgets/home/banner/banner_group_items.dart

📖 Usage: use to show many images in the same row. Config lib/config/config_en.json file as the following option to enable the group image.

	{ 
          "layout": "bannerImage",
          "items": [
            {
              "category": 37,
              "image": "https://user-images.githubusercontent.com/1459805/59846823-12ffc500-938b-11e9-8d93-65ead3d6b1dd.png",
              "padding": 5.0
            },
            {
              "category": 38,
              "image": "https://user-images.githubusercontent.com/1459805/59846824-12ffc500-938b-11e9-8d5a-fc42cb1b7658.png",
              "padding": 5.0
            }
          ]
        },

• items: is the array of json image objects. Each image can be linked to the list of products by category ID. If the items have only one image Object, it will show only one banner.
• isSlider: false or it can be blank as the below example.

• items: is the array of json image objects. Each image can be linked to the list of products by category ID. The Banner Items detail setting:

  • image: the URL of the Images, it could be the asset local Image file.
  • padding: the spacing padding, the value should be double values.
  • category: config this Category ID to open the banner to the category product list.

Tinder Banner:

📖 Usage: help to show the product as Tinder Layout, the values are similar to the Product List config. Open the lib/config/config_en.json file:

{
      "layout": "bannerImage",
      "isSlider": true,
      "design": "tinder",
      "items": [
        {
          "category": 23,
          "image": "https://user-images.githubusercontent.com/1459805/59846818-12672e80-938b-11e9-8184-5f7bfe66f1a2.png",
          "padding": 15.0
        }
      ]
    },

3. Sticky Header

To enable the sticky header on the Homepage, open the lib/config/config_en.json and update StickyHeader to true.

"Setting": {
      ...
      "StickyHeader": true
    },

4. Category List Icons

🗳 Widget files: 

• lib/widgets/home/category/category_icon_items.dart
• lib/widgets/home/category/category_image_items.dart

📖 Usage: open the lib/config/config_en.json:

    {
      "layout": "category",
      "type": "icon",
      "wrap": true,
      "size": 1.2,
      "radius": 50.0,
      "noBackground": true,
      "columns": 4,
      "padding": 10.0,
      "items": [
        {
          "category": 38,
          "image": "assets/icons/categories/cate1.png",
          "colors": [
            "#3CC2BF",
            "#3CC2BF"
          ],
          "originalColor": true
        },
        {
          "category": 32,
          "image": "assets/icons/categories/cate2.png",
          "colors": [
            "#3E6AB5",
            "#3E6AB5"
          ],
          "originalColor": true
        },
     }

• layout: the value should be "category"
• type: support the value “icon” or “image” type.
• wrap: value true/false to support the wrap layout.
• size: the default value 1.0, increase the value to have a larger icons size.
• radius: the default 50.0, update the border-radius

• items: list of category Category Items

  • category: use to open the product list by category ID
  • image: link to category Image or Asset local file
  • colors: override the Color of the Icons.
  • originalColor: enable this value to true if you want to set the original color.

5. Product Listing

📖 Usage: Support to show a list of Products with flexible layout (Card, two or three columns) by adding this section to the lib/config/config_en.json file as below:

    {
      "name": "Latest Products",
      "image": "",
      "layout": "twoColumn",
      "isSnapping": true,
      "category": 38
    },

• name: the name to display the card title.

• layout: the supported layout should be

  • threeColumns
  • twoColumns
  • fourColumns
  • card
  • simpleVerticalListItems
• category: the category id of your website.
• featured: show only Feature product (for WooCommerce only)

🗳 Related Files: widget file path: lib/widgets/product/product_list.dart and lib/widgets/product/product_card_view.dart

6. Product List Layout

To change the default product list from the category layout, you could update this item in lib/config/config_en.json:

"Setting": {
    "ProductListLayout": "list",
  },

Or customize the icon and available Filters option:

// File: lib/common/constants/images.dart
const kProductListLayout = [
  {"layout": "list", "image": "assets/icons/tabs/icon-list.png"},
  {"layout": "columns", "image": "assets/icons/tabs/icon-columns.png"},
  {"layout": "card", "image": "assets/icons/tabs/icon-card.png"},
  {"layout": "horizontal", "image": "assets/icons/tabs/icon-horizon.png"},
  {"layout": "listTile", "image": "assets/icons/tabs/icon-lists.png"},
];

With product list layout named "listTile", the result would look like this: 

The default layout of the listed product is "list", you can see the example below:

In the listed product at layout "list", sometimes you may have an issue is a large image like this:

To fix this you can choose either solution

Open lib/config/config_en.json file in project.

• In the first solution, you can change the config type of list from "list" to "pinterest" at the field "ProductListLayout"

"Setting": {
    ...
    "ProductListLayout": "pinterest"
    ...
  }

result:

• Second, you can config the ratio of both image and information of the product: (refer to 7. Default Product Image Ratio part)

"Setting": {
    ...
    "ProductListLayout": "list",
    ...
  }

result:

Display -/+ on Product Grid/List (version 2.3.0+)

• The feature is available on FluxStore Woocommerce, FluxStore Pro, and FluxStore Multi-Vendor apps.
• The sign -/+ displays on Product Grid/List to add/modify the number of products. 

• To enable the feature, go to the file lib/env.dart and modify the value of “showQuantityInList”

     /// Enable this to show a quantity selector in product list.
    "showQuantityInList": false,

7. Default Product Image Ratio

To change the default product image Ratio, edit lib/env.dart (default height/width: 1.2) as below:

  "advanceConfig": {
    ...
    "RatioProductImage": 1.2,
    ...
  },

For version 1.9.x and earlier, refer to the JSON config file lib/config/config_en.json:

8. Metro Layout (staggered list)

{
      "layout": "staggered",
      "limit": 20,
      "category": 29
    }

📖 Usage: Support to show product list metro layout. Config lib/config/config_en.json as following:

• layout: the layout should be staggered
• limit: limit number of products
• category: load the list of product by category ID

9. Vertical Layout

Config lib/config/config_en.json as following:

  "VerticalLayout": {
    "layout": "default",
    "name": "Recent Collections",
    "image": ""
  },

The vertical is supported to follow Layout values: pinterest, menu, card, columns, list, default.

10. Sale Off-Discount

This feature is currently compatible with WooCommerce (single and muli-Vendor) and could be compatible with FluxBuilder on the next release.

New config JSON will be supported following the config below:

Open lib/env.dart and update saleOffProduct to show Count Down and progress color for products have SaleOff type. (For version 1.9.x and earlier, refer to /lib/common/config/products.dart)

  "saleOffProduct": {
    /// Show Count Down for product type SaleOff
    "ShowCountDown": true,
    "Color": "#C7222B"
  },

How to enable from the WooCommerce side?

• The countdown widget on the Header List will pick the first Product item.
• The app will automatically load the onSale product via Rest API, but make sure to set the pricing with the date.

11. Brands Carousel

- Brand layout supports on FluxStore version 2.3.0+

- To enable Brand layout, WooCommerce Brands plugin must be installed and activated in your CMS server with version 1.5 or later

- To enable Brand layout, those lines need to be added to your config_xx.json 

   {
      "layout": "brand", 
      "name": "Top Brand Choices", 
      "isBrandNameShown": true , 
      "isLogoCornerRounded":  true},
    {

in which:

- 'layout' : 'brand' to display Brand layout

- 'name' displays Brand label on Home screen

- 'isBrandNameShown' is a bool to display brand's name under brand's logo

- 'isLogoCornerRounded' is a bool to make brands' logo corners rounded.

6. Category Layout

Open lib/config/config_en.json and change the TabBar section to one of the following string values { card, sideMenu, column, subCategories, animation, grid, sideMenuWithSub}

  "TabBar": {
        ...
        {
          "layout": "category",
          "categoryLayout": "card",
          "icon": "assets/icons/tabs/icon-category.png"
        },

sideMenuWithSub: means Side Menu with Category Layout, supports multi-level categories as below:

New category layout type:
A new horizontal Product Layout on Home Screen that is grouped by Category Menu is supported on all FluxStore Apps version +2.4.0

Export the env.dart file in which your category layout has been modified  by using FluxBuilder, then update the type to menuWithProducts in the file lib\config\config_en.json as following

  {
  "layout": "category",
  "type": "menuWithProducts", ///update type at here 
  "wrap": false,
  "size": 2,
  "radius": 24,
  "marginLeft": 24,
  "marginRight": 24,
  "marginTop": 10,
  "marginBottom": 10,
  "paddingX": 0,
  "paddingY": 0,
  "marginX": 0,
  "marginY": 0,
  "hideTitle": false,
  ...
},

7. Blog Detail Layout

Open lib/env.dart file, in the advanceConfig section, change the DetailedBlogLayout config to one of following enums: { simpleType, fullSizeImageType, halfSizeImageType, oneQuarterImageType }:

  "advanceConfig": {
    "DetailedBlogLayout": "halfSizeImageType",
  },

 

For version 1.9.x and earlier, open lib/common/config/general.dart file, in the kAdvanceConfig section, change the DetailedBlogLayout config to one of following enums: { simpleType, fullSizeImageType, halfSizeImageType, oneQuarterImageType }. (For version 1.6.5 and earlier, it is in lib/common/config.dart):

const kAdvanceConfig = {
      "DetailedBlogLayout": kBlogLayout.halfSizeImageType
    };

8. Wordpress Blog Layout

Sometimes, your e-commerce app needs to share more information via the Blog and post a new announcement.

WordPress Blog

💠 To add a new Blog section to the homepage, open the lib/config/config_en.json and add the below section.