How to update to new+9 Homepage layout.

Since Mstore 3.7.0 you can change to many kinds of UI homepage, by open src/common/AppConfigTheme and copy the content of the theme to override to src/common/AppConfig.json

Some layout support for the HorionLayout object: the component layout, support for following type layouts: circleCategory, bannerImage,bannerSlider, featureProducts, threeColumn, twoColumn, bannerHigh, card, simple.

1. Default Theme

The layout content below components. It’s possible to add new component via CeBuilder or manually edit the AppConfig.json.

img

  • Circle category
  • Banner High
  • 2 Banner Image
  • Three Columns list view
  • Two Columns list view

2. Banner Image

img

The layout content most of the Banner Image components and link to website category Id.

{
  "imageBanner": "http://mstore.io/images/shoes.png",
  "column": 2,  
  "height": 130,
  "layout": "bannerImage", 
  "category": 24
},
  • imageBanner: te URL link to an online image
  • column: to let the app know to render as the column view
  • height: the height of the image banner
  • category: the Id of the category of the WooCommerce site
  • imageMode: the mode of the image render, similar to the React native.

3. Banner Image and Vertical Two Column list

img

  • Banner Image
  • Circle Category
  • Three Columns list view
  • Vertical Two columns with lazy load

4. Banner Image and Vertical Three Column list

img

  • Banner Image
  • Circle Category
  • Three Columns list view
  • Vertical Three columns list with lazy load

5. Banner Slider Image and Vertical Cart list

img

  • Banner Slider Image
  • Circle Category
  • Horizontal Three Columns list view
  • Vertical Card list with lazy load

6. Banner and Vertical List

img

  • Circle Category
  • Horizontal list banner
  • Vertical banner with a simple list

7. Banner High and Vertical Two Columns List

img

  • Circle Category
  • Banner High
  • Vertical banner with two column list

8. Banner High and Vertical Card List

img

  • Circle Category
  • Banner High
  • Vertical banner with Card list

9. Banner and Category List

img

  • Banner list
  • Circle Category with 4 columns view