For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
    • Overview
  • Learning Plans
    • Developer Foundations
    • Composable Developer
    • Stencil Developer
    • B2B Developer
  • Courses
        • Widget Templates
        • Lab - Widget Template
    • Learning Changelog
Dev Portal
LogoLogo
On this page
  • Create a Widget Template
CoursesWidgets - REST APIModule 3: Widget Templates

Lab - Widget Template

Was this page helpful?
Previous

Widget Templates

Next

Widget UI Schema

Built with

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:
{
"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": []
}

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

  1. Click the ‘Send’ button at the top right of the Postman window
  2. 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)