Layouts

The Layouts module is similar to the Products module, but instead of changing the whole product (all views), it allows to change a single view inside of the displaying product. You can set up your layouts inside the plugin options with the layouts option. The layouts option receives an array containing objects representing a view.

Example of layouts option:

layouts: [  {      title: 'My View Layout',      thumbnail: 'images/layout_thumbnail.jpg',      elements: [    {      "type": "image",      "source": "images/large_v.jpg",      "title": "Large Image",      "parameters": {        "price": 50.05,        "left": 150,        "top": 300,        "scaleX": 0.1,        "scaleY": 0.1,        "autoCenter": false,        "zChangeable": true,        "removable": false,        "draggable": true,        "rotatable": true,        "resizable": true,        "copyable": true,        "autoSelect": false,        "uniScalingUnlockable": true,        "flipX": false,        "originX": "left",        "originY": "top",        "advancedEditing": true,        "colors": "#000"      }    },    {    "type": "text",    "source": "Last\nName",    "title": "Enter your last name",    "parameters": {      "zChangeable": true,      "removable": true,      "draggable": true,      "rotatable": true,      "resizable": true,      "colors": "#ffffff",      "fontSize": 30,      "minFontSize": 5,      "maxFontSize": 100,      "patternable": true,      "fontStyle": "normal",      "fontWeight": "bold",      "lineHeight": 1.5,      "letterSpacing": 1,      "textAlign": "left",      "fill": "#990000",      "editable": true,      "left": 200,      "fontFamily": "Lobster",      "top": 500,      "maxLines": 1,      "textPlaceholder": true    }  }]  },  {      title: 'My Second Layout',      thumbnail: 'images/layout_thumbnail.jpg',      elements: [    {      "type": "image",      "source": "images/large_v.jpg",      "title": "Whie Text",      "parameters": {        "left": 150,        "top": 300,        "scaleX": 0.1,        "scaleY": 0.1,        "autoCenter": false,        "zChangeable": true,        "removable": false,        "draggable": true,        "rotatable": true,        "resizable": true,        "copyable": true,        "autoSelect": false,        "uniScalingUnlockable": true,        "flipX": false,        "originX": "left",        "originY": "top",        "advancedEditing": true,        "colors": "#000"      }    }]  },  {      title: 'My Third Layout',      thumbnail: 'images/large_v.jpg',      elements: [    {      "type": "image",      "source": "images/large_v.jpg",      "title": "Whie Text",      "parameters": {        "left": 150,        "top": 300,        "scaleX": 0.1,        "scaleY": 0.1,        "autoCenter": false,        "zChangeable": true,        "removable": false,        "draggable": true,        "rotatable": true,        "resizable": true,        "copyable": true,        "autoSelect": false,        "uniScalingUnlockable": true,        "flipX": false,        "originX": "left",        "originY": "top",        "advancedEditing": true,        "colors": "#000"      }    }]  }]

Updated on: 31/07/2026