Current version is supporting to custom with flexible pre-config homepage templates
Open common/config/appConfig.json
file and replace with following code to get difference awesome homepage layout, off course you can able to customize base on your project requriements, it's super flexible.
1. The first (default)
{
"HorizonLayout": [
{
"name": "jacket",
"image": "",
"layout": "list",
"category": 20
},
{
"layout": "bannerImage",
"category": 25,
"imageBanner": "https://inspireui.com/wp-content/uploads/2019/04/Preview_1.jpg"
},
{
"layout": "circleCategory"
},
{
"name": "jacket",
"image": "",
"layout": "threeColumn",
"category": 17
},
{
"layout": "bannerHigh",
"category": 24
},
{
"name": "hoodies",
"image": "",
"layout": "list",
"category": 33
},
{
"name": "bagsCollections",
"image": "",
"layout": "threeColumn",
"category": 34
},
{
"name": "promotion",
"image": "",
"layout": "twoColumn",
"category": 17
},
{
"name": "bagsCollections",
"image": "",
"layout": "card",
"category": 33
}
],
"MainColor": "#3FC1BE"
}
2. Banner image
{
"HorizonLayout": [
{
"layout": "circleCategory"
},
{
"imageBanner": "http://s3-ap-southeast-1.amazonaws.com/mstore-bucket.io/wp-content/uploads/2019/02/25174258/sale2.png",
"column": 2,
"layout": "bannerImage",
"category": 17
},
{
"imageBanner": "http://s3-ap-southeast-1.amazonaws.com/mstore-bucket.io/wp-content/uploads/2019/02/25174231/feature2.png",
"column": 2,
"layout": "bannerImage",
"category": 20
},
{
"imageBanner": "http://s3-ap-southeast-1.amazonaws.com/mstore-bucket.io/wp-content/uploads/2019/02/25142145/woman-large.png",
"layout": "bannerImage",
"height": 118,
"category": 24
},
{
"imageBanner": "http://s3-ap-southeast-1.amazonaws.com/mstore-bucket.io/wp-content/uploads/2019/02/25142102/MAN-large.png",
"layout": "bannerImage",
"height": 118,
"category": 25
},
{
"imageBanner": "https://inspireui.com/wp-content/uploads/2019/04/Preview_12.jpg",
"column": 2,
"layout": "bannerImage",
"category": 33
},
{
"imageBanner": "https://inspireui.com/wp-content/uploads/2019/04/Preview_11.jpg",
"column": 2,
"layout": "bannerImage",
"category": 34
},
{
"imageBanner": "https://inspireui.com/wp-content/uploads/2019/04/Preview_9.jpg",
"column": 2,
"layout": "bannerImage",
"category": 17
},
{
"imageBanner": "https://inspireui.com/wp-content/uploads/2019/04/Preview_10.jpg",
"column": 2,
"layout": "bannerImage",
"category": 20
},
{
"imageBanner": "http://s3-ap-southeast-1.amazonaws.com/mstore-bucket.io/wp-content/uploads/2019/02/25142018/collection.png",
"layout": "bannerImage",
"height": 160,
"imageMode": "cover",
"category": 25
}
],
}
3-Banner Image and Vertical Two Column
{
"HorizonLayout": [
{
"imageBanner": "http://s3-ap-southeast-1.amazonaws.com/mstore-bucket.io/wp-content/uploads/2019/02/25142018/collection.png",
"layout": "bannerImage",
"height": 160,
"imageMode": "cover",
"category": 17
},
{
"layout": "circleCategory"
},
{
"name": "featureProducts",
"image": "",
"layout": "threeColumn",
"category": 20
}
],
"VerticalLayout": {
"name": "Recents",
"layout": "twoColumn"
},
}
4-Banner Image and Vertical ThreeColumn
{
"Opencart": {
"url": "http://opencart-demo.mstore.io",
"secretKey": "Z8ElFYnfqbuulPrz7QDuAM74D3mCjt1a"
},
"HorizonLayout": [
{
"imageBanner": "http://s3-ap-southeast-1.amazonaws.com/mstore-bucket.io/wp-content/uploads/2019/02/25142018/collection.png",
"layout": "bannerImage",
"height": 160,
"imageMode": "cover",
"category": 17
},
{
"layout": "circleCategory"
},
{
"name": "featureProducts",
"image": "",
"layout": "card",
"category": 20
}
],
"VerticalLayout": {
"name": "Recents",
"layout": "threeColumn"
},
}
5-Banner Slider Image and Vertical Card
{
"HorizonLayout": [
{
"layout": "bannerSlider",
"category": 17
},
{
"layout": "circleCategory"
},
{
"name": "featureProducts",
"image": "",
"layout": "threeColumn",
"category": 20
}
],
"VerticalLayout": {
"name": "Recents",
"layout": "card"
},
}
6-Banner and Vertical List
{
"HorizonLayout": [
{
"layout": "circleCategory"
},
{
"layout": "banner",
"category": 17
}
],
"VerticalLayout": {
"name": "Recents",
"layout": "simple"
},
}
7-Banner High and Vertical Two Column
{
"HorizonLayout": [
{
"layout": "circleCategory"
},
{
"layout": "bannerHigh",
"category": 17
}
],
"VerticalLayout": {
"name": "Recents",
"layout": "twoColumn"
},
}
8-Banner High and Vertical Card
"HorizonLayout": [
{
"layout": "circleCategory"
},
{
"layout": "bannerHigh",
"category": 20
}
],
"VerticalLayout": {
"name": "Recents",
"layout": "card"
},
9-Banner and Category List
{
"HorizonLayout": [
{
"layout": "banner",
"category": 17
},
{
"layout": "circleCategory",
"column": 20
}
],
}