> 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.

# Lab - Widget Template

Plan: Stencil Developer

Lesson 7 of 22 · 15 min

**In this lab you will**

* Create a widget template using Postman

**Prerequisites**

* BC Sandbox
* API credentials for the store (Content: Modify)
* Postman installed
* Widgets API collection

## Create a Widget Template

Create a widget template using Postman

1. **Navigate** to the ‘Widget Templates > Create' directory in the ‘V3 Widgets API' collection in the ‘Collections' pane on the left side of the Postman window
2. **Click** the 'Create' post request
3. **Select** the 'Body' tab in the main content window in Postman
4. **Update** the content in the body to the following:

```json showLineNumbers={false}
{
  "name": "Slider Template",
  "template": "<ul class=\"slider\">\n{{#each slides}}\n<ul class=\"slide\"><img class=\"mySlides\" src=\"{{image}}\"/></ul>\n{{/each}}\n</ul>\n<script>\nvar slideIndex = 0;\ncarousel();\nfunction carousel() {\nvar i;\nvar x = document.getElementsByClassName(\"mySlides\");\nfor (i = 0; i < x.length; i++) {\nx[i].style.display = \"none\"; \n}\nslideIndex++;\nif (slideIndex > x.length) {slideIndex = 1} \nx[slideIndex-1].style.display = \"block\"; \nsetTimeout(carousel, 4000); // Change image every 4 seconds\n}\n</script>",
  "schema": []
}
```

> **Info**
>
> Templates are submitted in JSON format. When creating your own templates, make sure your HTML, CSS, and JavaScript are properly escaped.

5. **Click** the 'Send' button at the top right of the Postman window
6. **Copy** the Widget Template UUID from the response section at the bottom of the Postman window (this UUID will be used in the next lab)