Collection

Description

The collection variable provides details about the collection on a product listing (PLP) page. It includes the collection’s ID, title, handle, description, and main image. The collection object is only available on PLP pages; outside of a PLP context, it is null.

Properties

Property	Type	Scope	Description	Example
`collection.id`	`String`	`PLP`	Unique id of the Collection	123457
`collection.title`	`String`	`PLP`	The name of the collection provided in Shopify	Vintage Shirts
`collection.handle`	`String`	`PLP`	User-friendly slug used in Shopify collection URL.	vintage-shirts
`collection.description`	`String`	`PLP`	The textual description provided for the collection in Shopify. (May include HTML content)	Limited availability vintage shirts
`collection.image`	`String`	`PLP`	The image of the collection uploaded in Shopify.	https://example.com/image.jpg

Example Usage


// Access the collection on a PLP page to customise the listing or to generate headings. 

const collection_details = VajroSDK.variables.collection;

if (collection_details) {
  // Display collection title and description
  document.getElementById('collection-title').innerText = collection_details.title;
  document.getElementById('collection-desc').innerText = collection_details.description;

  // Show collection image
  const img = document.getElementById('collection-image');
  img.src = collection_details.image;
} else {
  // Fallback for non-PLP pages
  console.log("No collection context available.");
}

Best Practices

Check for null: collection is only defined on PLP pages. Outside of PLP, always handle null.
Read‑only fields: Do not attempt to modify collection properties; they reflect Shopify data.
Use the handle for navigation: When linking to a collection page, use collection.handle to generate URLs.

Caveats

Context‑dependent: The collection variable is scoped to the PLP page and is unavailable in other contexts
Optional image: Some collections may not have an image; verify collection.image exists before using it.
HTML content: collection.description can contain HTML tags; escape or sanitize before injecting into the DOM to prevent XSS issues.