Product Card

The Product Card turns each row of a SharePoint list into a clean catalog tile with an image, name, and price, so a list of products reads like a storefront instead of a table. It is built with a standard Microsoft List and a small piece of gallery view formatting JSON. Each card shows the product photo, a category label, the name, the price, and a colored stock pill, and the whole list switches to cards without changing the underlying data. It is the fastest way to make any product or catalog list browsable.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, Hyperlink Column, JSON, Number Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Renders each list item as a catalog card with a photo using the SharePoint Gallery layout
• The image sits at the top, with the category, name, and price beneath it
• The price shows in bold, and a colored stock pill flags In stock, Low stock, or Out of stock
• The image comes from a column holding the picture URL, so each product shows its own photo
• Applied as gallery view formatting JSON, so the whole list switches to cards without changing the underlying data
• Works on any catalog-style list, and the fields are easy to adapt to your products

Common Use Cases

• Product or merchandise catalog
• Company store or swag shop
• Equipment or asset catalog
• Menu or food and drink list
• Course or training catalog
• Marketing or brand asset gallery

Details

• Design Pattern: Cards & Tiles
• Format Scope: View

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Populate the list with data. In ImageUrl, paste a direct link to each product image – for example a picture uploaded to the Site Assets library.
3. Internal column names (in brackets) must match the JSON exactly.
4. Upload each product image to Site Assets (or another library the client users can open), then copy the full https:// address from the browser address bar – do not type or guess the path.
5. A broken-image symbol usually means the URL, filename, path, extension, capitalization, or permissions are wrong, not the JSON – test the link in a private browser window signed in as a normal client user.

How to Apply JSON code

1. Create a Gallery view on the list (view dropdown at the top right, Create new view, set the layout to Gallery, then Create).
2. With the new gallery view open, open the view dropdown again and choose Format current view.
3. Switch to Advanced mode, paste the JSON below, and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 300,
  "width": 240,
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "box-sizing": "border-box",
      "height": "100%",
      "width": "100%",
      "border": "1px solid #edebe9",
      "border-radius": "10px",
      "overflow": "hidden",
      "background-color": "#ffffff"
    },
    "children": [
      {
        "elmType": "img",
        "attributes": {
          "src": "[$ImageUrl]",
          "alt": "[$Title]"
        },
        "style": {
          "display": "block",
          "width": "100%",
          "height": "150px",
          "object-fit": "cover",
          "background-color": "#f3f2f1"
        }
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "gap": "4px",
          "padding": "12px 14px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-size": "11px",
              "font-weight": "600",
              "text-transform": "uppercase",
              "letter-spacing": "0.4px",
              "color": "#8a8886"
            },
            "txtContent": "[$Category]"
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "15px",
              "font-weight": "600",
              "color": "#201f1e"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "space-between",
              "margin-top": "4px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size": "16px",
                  "font-weight": "700",
                  "color": "#201f1e"
                },
                "txtContent": "=if([$Price] == '', '', '$' + [$Price])"
              },
              {
                "elmType": "div",
                "style": {
                  "padding": "2px 9px",
                  "border-radius": "10px",
                  "font-size": "11px",
                  "font-weight": "600",
                  "color": "#ffffff",
                  "background-color": "=if([$Stock] == 'In stock', '#107c10', if([$Stock] == 'Low stock', '#f7a600', if([$Stock] == 'Out of stock', '#d13438', '#8a8886')))"
                },
                "txtContent": "=if([$Stock] == '', 'Unknown', [$Stock])"
              }
            ]
          }
        ]
      }
    ]
  }
}

Common Questions About the Product Card