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"
      }
    }]
  }
]

JavaScript

Updated on: 06/08/2025