Get Products

Description

The getProducts helper retrieves multiple Shopify products in a single call, based on collection ID or collection handle.
It provides a paginated list of products with core information — useful for PLPs, carousels, and recommendation blocks.

Function Signature

const data = await Superfans.helpers.getProducts({
  collectionHandle: "men",
  count: 10
});

const products = data.products || data;

(OR)

const data = await Superfans.helpers.getProducts({
  collectionId: "12346789",
  count: 10
});

const products = data.products || data;

We don't support metafields, market based filters and inventory based on location

Parameter	Type	Required	Description
id	String	Yes (if handle is not passed)	ID of the collection available in Shopify
handle	String	Yes (if id is not passed)	Handle of the collection available in Shopify
count	Number	Yes	Number of products you want to fetch from the collection

Structure of Response

An array of products with each product having its properties.

Sample response structure of each product is mentioned below

Property	Type	Description	Example
id	String	Unique ID of each product	product_id
title	String	Name of each product	Product title
description	String	HTML content of each product	Product description
handle	String	Slug of each product used in URL	product-handle
featuredImage	String	The main image associated to each product	https://cdn.shopify.com/image.jpg
images	Array	Array of images associated to each product	["https://cdn.shopify.com/image.jpg"]
variants	Object[]	An object containing all the properties of the variant of each product	[{"id": "1234","title":"grey"}]
selectedOptions	Object[]	An object containing all option sets available for each product	[{"name": "Size","value":"xl"}]
vendor	String	Vendor name of each product	Vendor

Example Usage

async function fetchProductsFromCollection(collectionId) {
  try {
    const data = await Superfans.helpers.getProducts({
      collectionId: collectionId,
      count: 10
    });
    const products = data.products || data;
    displayProducts(products);
  } catch (error) {
    await Superfans.actions.showToast({
      title: "Something went wrong",
      message: "Please try again."
    });
  }
}

function displayProducts(products) {
  const productGrid = document.getElementById("productGrid");
  productGrid.innerHTML = "";

  products.forEach((product) => {
    const card = document.createElement("div");
    card.className = "product-card";
    card.innerHTML = `
      <img src="${product.images[0]}" alt="${product.title}" class="product-image" />
      <div class="product-info">
        <div class="product-name">${product.title}</div>
      </div>
    `;
    productGrid.appendChild(card);
  });
}

fetchProductsFromCollection("123456789");

Best Practices

Avoid overfetching: Always limit product count to optimize performance.
Use consistent display logic: Match product card design to PDP for consistent UX.
Graceful fallback: If no products are returned, display a “No items found” message.

Caveats

Partial data: Product metafields and deep relationships are not included for performance reasons.
Read-only: The helper retrieves products; it does not support modifications.
Null safety: Always check if response.products is defined before accessing it.