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:

type: Defines what you're listing (such as 'product' or 'collection')
query: Specifies which data fields you want to display
first: Sets the number of items to show in the list
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).
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:

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

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).

ListContextAttributes

first
The number of items to return.
```
number
```
metaobject-definition-type
The metaobject definition type for the context. Required when the context type is `metaobject`.
```
string
```
nextPage
Load the next page of items in the list.
```
() => void
```
previousPage
Load the previous page of items in the list.
```
() => void
```
query
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"`
```
string
```
reverse
Reverse the order of the items in the list.
```
() => void
```
reverseOrder
If present, reverses the sort order (descending instead of ascending)
```
boolean
```
sortKey
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](https://shopify.dev/docs/api/storefront/latest/enums/productsortkeys)).
```
string
```
type
The type of the context. This needs to match the [GraphQL Storefront API](https://shopify.dev/docs/api/storefront) type you are querying. For example, if you are querying a product, the type should be `type="product"`.
```
string
```

interface ListContextAttributes extends BaseContextAttributes {
  /**
   * 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"`
   **/
  query: string;

  /**
   * The number of items to return.
   **/
  first: number;

  /**
   *  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](https://shopify.dev/docs/api/storefront/latest/enums/productsortkeys)).
   **/
  sortKey?: string;

  /**
   * If present, reverses the sort order (descending instead of ascending)
   **/
  reverseOrder?: boolean;

  /**
   * Load the next page of items in the list.
   **/
  nextPage?: () => void;

  /**
   * Load the previous page of items in the list.
   **/
  previousPage?: () => void;

  /**
   * Reverse the order of the items in the list.
   **/
  reverse?: () => void;
}

Was this section helpful?

List context

HTML

<shopify-store

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

</shopify-store>

<shopify-list-context

type="product"

query="products"

first="10"

<!-- The template is repeated for each item

in the array -->

<h2>

<shopify-data

query="product.title"

></shopify-data>

</h2>

</template>

</shopify-list-context>

examples

List context

description

List context example

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>

<shopify-list-context type="product" query="products" first="3" sort-key="TITLE">

</template>

</shopify-list-context>

<shopify-list-context type="product" query="products" first="3" sort-key="TITLE" reverse-order>

</template>

</shopify-list-context>

examples

Sorting with sort-key and reverse-order

description

Sorting products by title ascending and descending using 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

shopify-list-contextcomponent

Anchor to attributesAttributes

ListContextAttributes

examples

List context

description

HTML

Anchor to examplesExamples

examples

Sorting with sort-key and reverse-order

description

HTML

Anchor to relatedRelated

shopify-list-context
component