1. Home
  2. Templates
  3. Ecommerce
  4. Product catalog card — overlapping details panel

Product catalog card — overlapping details panel

1080 × 1350

Create ecommerce product cards with a photo behind an overlapping details panel and a circular offer badge. Personalize the product image, name, category, price and purchase link, with brand colors and logo and a distinct Archivo Narrow / IBM Plex Sans type pairing.

  • Computes values
  • Adapts to any size
  • Uses brand kit
1

Apply brand

Every template, in your brand

Add your logo, colours and fonts once — every design here restyles itself.

Start free
2

Pick a size

1080 × 1350
3
Fill content
4
1

Render via API

Mint an API key under Settings → Developers. Variables override template content. Brand tokens replace the brand settings for this render.

2

Connect an agent

Point any MCP client at this space and the agent can render this design itself, with its own variables, as often as it likes.

{
  "mcpServers": {
    "bannx": {
      "url": "https://bannx.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Works in Claude, Cursor, and anything else that speaks MCP. Full setup in the MCP guide.

Or paste a prompt

For an assistant that is already connected, this says everything it needs.

Render the bannx design "Product catalog card — overlapping details panel" for me.

Template id: 6ad1c1835b0db437a8ebcc45
Use the bannx MCP server and call render_creative with these variables:
  product: <your value>
  badge: <your value>

Return the PNG it gives back.
Drag a layer to adjust the layout