> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Box Model

Allows you to display box model controls for your widget.

---

**Widget Configuration Output**

```json showLineNumbers={false}
{
  "productCardMargin": {
    "top": {
      "value": "0",
      "type": "px"
    },
    "right": {
      "value": "10.5",
      "type": "px"
    },
    "bottom": {
      "value": "0",
      "type": "px"
    },
    "left": {
      "value": "10.5",
      "type": "px"
    }
  }
}
```

---

**User Interface Output**

![output](/_fern-img/e055d97d7c1350c262ef3c2cb5e5f156cdcbc0064122410a84f288a116ba6d09.webp)

---

**JSON Schema**

| Property               | Type   | Description                                                                         | Example             |
| ---------------------- | ------ | ----------------------------------------------------------------------------------- | ------------------- |
| `type`                 | string | The type of setting component to display.                                           | "boxModel"          |
| `label`                | string | The user friendly message to inform the user how this setting will be used.         | "Margin"            |
| `id`                   | string | The variable name where the setting value will be available in the widget template. | "productCardMargin" |
| `default`              | object | The default value to use when rendering the widget for the first time.              |                     |
| `default.top`          | object |                                                                                     |                     |
| `default.top.value`    | string |                                                                                     | "0"                 |
| `default.top.type`     | string |                                                                                     | "px"                |
| `default.right`        | object |                                                                                     |                     |
| `default.right.value`  | string |                                                                                     | "10.5"              |
| `default.right.type`   | string |                                                                                     | "px"                |
| `default.bottom`       | object |                                                                                     |                     |
| `default.bottom.value` | string |                                                                                     | "0"                 |
| `default.bottom.type`  | string |                                                                                     | "px"                |
| `default.left`         | object |                                                                                     |                     |
| `default.left.value`   | string |                                                                                     | "10.5"              |
| `default.left.type`    | string |                                                                                     | "px"                |