From bigcommerce-commerce
Builds BigCommerce storefront widgets with Handlebars templates, JSON schemas, placements, and Page Builder; injects JS/CSS via Script Manager API.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin bigcommerce-commerceThis skill is limited to using the following tools:
**Fetch live docs**:
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Fetch live docs:
https://developer.bigcommerce.com/docs/storefront/widgets for Widget SDKsite:developer.bigcommerce.com scripts api for Script Manager APIbigcommerce page builder widgets custom for custom widget patternsWidgets are reusable content components managed via API:
Widget Template (Handlebars + JSON schema)
↓
Widget (template + configuration data)
↓
Placement (widget + region + page)
↓
Rendered on storefront
POST /v3/content/widget-templates:
{
"name": "Banner with CTA",
"storefront_api_query": "query { site { settings { storeName } } }",
"schema": [
{
"type": "tab",
"label": "Content",
"sections": [
{
"label": "Banner",
"settings": [
{
"type": "text",
"label": "Heading",
"id": "heading",
"default": "Welcome"
},
{
"type": "text",
"label": "Button Text",
"id": "buttonText",
"default": "Shop Now"
},
{
"type": "text",
"label": "Button URL",
"id": "buttonUrl",
"default": "/shop"
}
]
}
]
}
],
"template": "<div class='banner'><h2>{{heading}}</h2><a href='{{buttonUrl}}'>{{buttonText}}</a></div>"
}
| Type | Description |
|---|---|
text | Text input |
textarea | Multi-line text |
number | Numeric input |
boolean | Toggle/checkbox |
select | Dropdown select |
color | Color picker |
imageManager | Image upload/select |
productId | Product picker |
categoryId | Category picker |
range | Slider |
alignment | Text alignment |
Widget templates use Handlebars:
{{setting_id}} — access setting values{{{html_setting}}} — unescaped HTML{{#if condition}}...{{/if}} — conditionals{{#each items}}...{{/each}} — iterationstorefront_api_query resultsWidgets can include a storefront_api_query that fetches data at render time:
POST /v3/content/widgets:
{
"name": "Homepage Banner",
"widget_template_uuid": "template-uuid-here",
"widget_configuration": {
"heading": "Summer Sale!",
"buttonText": "Shop Deals",
"buttonUrl": "/sale"
}
}
POST /v3/content/placements:
{
"widget_uuid": "widget-uuid-here",
"template_file": "pages/home",
"region": "home_below_menu",
"sort_order": 1,
"status": "active"
}
Regions are defined in Stencil theme templates using:
{{{region name="home_below_menu"}}}
Common regions: home_below_menu, home_below_featured, product_below_price, category_below_header
Inject JavaScript, CSS, or HTML snippets into storefront pages without theme modification.
| Endpoint | Methods | Description |
|---|---|---|
/v3/content/scripts | GET, POST, PUT, DELETE | Script CRUD |
POST /v3/content/scripts:
{
"name": "Analytics Tracker",
"description": "Track page views",
"html": "<script src='https://analytics.example.com/tracker.js'></script>",
"src": "",
"auto_uninstall": true,
"load_method": "default",
"location": "head",
"visibility": "all_pages",
"kind": "script_tag",
"consent_category": "analytics",
"channel_id": 1
}
| Property | Options | Description |
|---|---|---|
location | head, footer | Where to inject |
visibility | all_pages, storefront, checkout, order_confirmation | Which pages |
load_method | default, async, defer | Script loading strategy |
kind | script_tag, src | Inline HTML or external URL |
auto_uninstall | true/false | Remove when app is uninstalled |
consent_category | essential, functional, analytics, targeting | Cookie consent category |
auto_uninstall: true for app-managed scriptsconsent_category for GDPR complianceload_method: 'defer' for non-critical scriptsFetch the BigCommerce Widget SDK and Script Manager API documentation for exact schema types, placement regions, and script properties before implementing.