product / products

Product picker fields. Use product for a single product or products for a list. Returns the full product object(s) from the store.

Properties

Property	Type	Required	Description
type	"product" or "products"	Yes	Single or multiple products
label	string	Yes	Label shown in the builder
default	string or array	No	"" for product, [] for products

Usage

schema.json

{
  "featured": {
    "type": "product",
    "label": "Featured product",
    "default": ""
  },
  "items": {
    "type": "products",
    "label": "Products",
    "default": []
  }
}

Template

{# Single product #}
{% if widget.settings.featured %}
  <div class="featured">
    <img src="{{ widget.settings.featured.images[0].fileUrl }}" alt="{{ widget.settings.featured.title }}">
    <h3>{{ widget.settings.featured.title }}</h3>
    <span>{{ widget.settings.featured.pricing.price | money }}</span>
  </div>
{% endif %}

{# Products list #}
{% for p in widget.settings.items %}
  <div class="product-card">
    <h3>{{ p.title }}</h3>
    <span>{{ p.pricing.price | money }}</span>
  </div>
{% endfor %}

Output

Each product object includes:

{
  "_id": "69248443e2f94be6c3772ecc",
  "title": "Product Name",
  "slug": "product-name",
  "images": [
    {
      "_id": "67ffd1927f7cd6da2d12bfdd",
      "fileUrl": "https://cdn.qumra.cloud/media/..."
    }
  ],
  "pricing": {
    "price": 150,
    "compareAtPrice": 200,
    "originalPrice": 150
  },
  "quantity": 0,
  "status": "active",
  "options": [],
  "variantsCount": 0
}

Product object

The returned product object includes title, slug, images, pricing, quantity, status, options, and more. Access nested fields like product.pricing.price or product.images[0].fileUrl.

Interactive Preview

Interactive Preview

Featured product

Classic T-Shirt

150 SAR

slug: classic-tshirt

Live Output

{
  "featured": {
    "_id": "69248443e2f94be6c3772ecc",
    "title": "Classic T-Shirt",
    "slug": "classic-tshirt",
    "pricing": {
      "price": 150,
      "compareAtPrice": 200
    },
    "images": [
      {
        "fileUrl": "https://cdn.qumra.cloud/media/..."
      }
    ]
  }
}