collection_products

Lets the merchant select a collection and returns it with its products included. Perfect for "Featured Collection" or "Best Sellers" sections.

collection vs collection_products

Unlike collection which returns only the collection info, collection_products also fetches the products inside the selected collection.

Properties

Property	Type	Required	Description
type	"collection_products"	Yes	Field type identifier
label	string	Yes	Label shown in the builder
default	string	No	Default value (empty string if omitted)

Usage

schema.json

{
  "featuredCollection": {
    "type": "collection_products",
    "label": "Featured Collection",
    "default": ""
  }
}

Template

{% if widget.settings.featuredCollection %}
  <h2>{{ widget.settings.featuredCollection.title }}</h2>

  <div class="product-grid">
    {% for product in widget.settings.featuredCollection.products %}
      <div class="product-card">
        {% if product.images[0] %}
          <img src="{{ product.images[0].fileUrl }}" alt="{{ product.title }}">
        {% endif %}
        <h3>{{ product.title }}</h3>
        <span>{{ product.pricing.price | money }}</span>
      </div>
    {% endfor %}
  </div>
{% endif %}

Output

{
  "featuredCollection": {
    "_id": "691f38a8a60232b8a1049823",
    "title": "New Arrivals",
    "slug": "new-arrivals",
    "handle": "new-arrivals",
    "image": {
      "fileUrl": "https://cdn.qumra.cloud/media/..."
    },
    "description": "Check out our latest products",
    "productCount": 4,
    "products": [
      {
        "_id": "69248443e2f94be6c3772ecc",
        "title": "Product 1",
        "slug": "product-1",
        "images": [{ "fileUrl": "https://cdn.qumra.cloud/media/..." }],
        "pricing": { "price": 150, "compareAtPrice": 200 }
      },
      {
        "_id": "692483d8e2f94be6c3772dcc",
        "title": "Product 2",
        "slug": "product-2",
        "images": [{ "fileUrl": "https://cdn.qumra.cloud/media/..." }],
        "pricing": { "price": 99, "compareAtPrice": 0 }
      }
    ]
  }
}

Interactive Preview

Interactive Preview

Featured Collection

New Arrivals

3 products

Product 1

150 SAR

Product 2

99 SAR

Product 3

249 SAR

Live Output

{
  "featuredCollection": {
    "title": "New Arrivals",
    "productCount": 3,
    "products": [
      {
        "title": "Product 1",
        "pricing": {
          "price": 150
        }
      },
      {
        "title": "Product 2",
        "pricing": {
          "price": 99
        }
      },
      {
        "title": "Product 3",
        "pricing": {
          "price": 249
        }
      }
    ]
  }
}