Collection

The Collection widget displays products in a collection. Customers can add these items to their cart.

The following image shows an example of the Collection widget:

Configurations

To specify the collection to display, replace the <code> element with your collection's code. For example, rc-32660-time-to-wine-dine.

<instacart-collection collection-id="<code>"></instacart-collection>

tip

To get the collection code (also known as collection ID) of a collection, perform one of the following actions:

• Use the Get collections endpoint to retrieve Instacart or retailer collections and their collection codes. When you use this endpoint to retrieve retailer collections, only collections that appear in the departments navigation of your storefront are returned.
• Use the Merchandising > Collection tool in Instacart Platform Portal to access collection IDs of retailer collections. For more information, see Manage collections.

The collection code for a retailer collection is prefixed with rc-.

The Collection widget also supports the following optional attributes:

Attribute	Description
hide-view-all	Hides the View All link when set to true. Omit this attribute to show View All (the default).
view-all-custom-link	The URL that opens when a customer selects View All.

<instacart-collection
  collection-id="<code>"
  view-all-custom-link="https://www.example.com/collections/<code>"
></instacart-collection>

To hide View All, add hide-view-all="true":

<instacart-collection collection-id="<code>" hide-view-all="true"></instacart-collection>

The following image shows the View All link with collection navigation controls:

Display the collection name

To display the collection's name as a heading above the product grid, add an empty element with slot="title" inside the <instacart-collection> element. The widget fetches the collection name from Instacart and writes it into the element automatically.

<instacart-collection collection-id="rc-32660-time-to-wine-dine">
  <h3 slot="title"></h3>
</instacart-collection>

The element's tag, class, and all other attributes are yours to control. The widget only sets the text content. Style the heading to match your site's design.

note

The slot="title" element is optional. If you omit it, the widget displays the product grid with no heading and makes no additional network requests.