Skip to main content

shopify-list-context
component

The list context component allows you to display multiple items in a repeating format. To use it, you need several key attributes:

  1. type: Defines what you're listing (such as 'product' or 'collection')
  2. query: Specifies which data fields you want to display
  3. first: Sets the number of items to show in the list
  4. sort-key (optional): Sets the key to sort the items by (e.g., 'TITLE', 'PRICE', etc.). Available sort keys depend on the context type and can be found in the Storefront API documentation (e.g. for product contexts, see ProductSortKeys).
  5. reverse-order (optional): If present, reverses the sort order (descending instead of ascending)

Inside the list context, a template component defines how each item should appear. This template will automatically repeat for each item in your list. When you reference data within the template (using shopify-data or other components), it will automatically pull from the current item being displayed.

Sorting

  • Use the sort-key attribute to specify the field to sort by. For example, sort-key="TITLE" will sort products alphabetically by title.
  • Add the reverse-order boolean attribute to reverse the sort order (e.g., from ascending to descending).
Note

The list context can be nested inside a context component or other list context components.

See the playground for examples.

Anchor to attributesAttributes

Anchor to first
first
number
required

The number of items to return.

Anchor to query
query
string
required

Defines where the list exists, either at the root or relative to a parent context. For example:

  1. At the root, query a list of all products, query="products"

  2. Within a parent collection context, query the products on that collection, query="collection.products"

Anchor to type
type
string
required

The type of the context. This needs to match the GraphQL Storefront API type you are querying. For example, if you are querying a product, the type should be type="product".

Anchor to metaobject-definition-type
metaobject-definition-type
string

The metaobject definition type for the context. Required when the context type is metaobject.

Anchor to nextPage
nextPage
() => void

Load the next page of items in the list.

Anchor to previousPage
previousPage
() => void

Load the previous page of items in the list.

Anchor to reverse
reverse
() => void

Reverse the order of the items in the list.

Anchor to reverseOrder
reverseOrder
boolean

If present, reverses the sort order (descending instead of ascending)

Anchor to sortKey
sortKey
string

Sets the key to sort the items by (e.g., 'TITLE', 'PRICE', etc.).

Available sort keys depend on the context type and can be found in the Storefront API documentation (e.g. for product contexts, see ProductSortKeys).

Was this section helpful?

List context

HTML

<shopify-store
store-domain="https://your-store.myshopify.com"
>
</shopify-store>

<!-- The context is bound to the store -->
<shopify-list-context
type="product"
query="products"
first="10"
>
<!-- The template is repeated for each item
in the array -->
<template>
<h2>
<shopify-data
query="product.title"
></shopify-data>
</h2>
</template>
</shopify-list-context>

Anchor to examplesExamples

Additional examples for using the component.

Anchor to example-sorting-with-sort-key-and-reverse-orderSorting with sort-key and reverse-order

Sorting products by title ascending and descending using sort-key and reverse-order.

Was this section helpful?

Sorting with sort-key and reverse-order

HTML

<shopify-store store-domain="https://your-store.myshopify.com"></shopify-store>

<!-- Sort by title ascending -->
<shopify-list-context type="product" query="products" first="3" sort-key="TITLE">
<template>
<h2><shopify-data query="product.title"></shopify-data></h2>
</template>
</shopify-list-context>

<!-- Sort by title descending -->
<shopify-list-context type="product" query="products" first="3" sort-key="TITLE" reverse-order>
<template>
<h2><shopify-data query="product.title"></shopify-data></h2>
</template>
</shopify-list-context>

Anchor to relatedRelated

shopify-context