---
title: Ordered list
description: >-
  The ordered list component displays a numbered list of related items in a
  specific sequence. Use ordered list to present step-by-step instructions,
  ranked items, procedures, or any content where order and sequence matter to
  understanding.


  Ordered lists automatically number items and support nested lists for
  hierarchical content organization. For items where order doesn't matter, use
  [unordered
  list](/docs/api/checkout-ui-extensions/2026-04-rc/web-components/layout-and-structure/unordered-list).
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2026-04-rc/web-components/typography-and-content/ordered-list
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2026-04-rc/web-components/typography-and-content/ordered-list.md
---

# Ordered list

The ordered list component displays a numbered list of related items in a specific sequence. Use ordered list to present step-by-step instructions, ranked items, procedures, or any content where order and sequence matter to understanding.

Ordered lists automatically number items and support nested lists for hierarchical content organization. For items where order doesn't matter, use [unordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04-rc/web-components/layout-and-structure/unordered-list).

### Support Targets (29)

### Supported targets

* purchase.​checkout.​actions.​render-before
* purchase.​checkout.​block.​render
* purchase.​checkout.​cart-line-item.​render-after
* purchase.​checkout.​cart-line-list.​render-after
* purchase.​checkout.​contact.​render-after
* purchase.​checkout.​delivery-address.​render-after
* purchase.​checkout.​delivery-address.​render-before
* purchase.​checkout.​footer.​render-after
* purchase.​checkout.​header.​render-after
* purchase.​checkout.​payment-method-list.​render-after
* purchase.​checkout.​payment-method-list.​render-before
* purchase.​checkout.​pickup-location-list.​render-after
* purchase.​checkout.​pickup-location-list.​render-before
* purchase.​checkout.​pickup-location-option-item.​render-after
* purchase.​checkout.​pickup-point-list.​render-after
* purchase.​checkout.​pickup-point-list.​render-before
* purchase.​checkout.​reductions.​render-after
* purchase.​checkout.​reductions.​render-before
* purchase.​checkout.​shipping-option-item.​details.​render
* purchase.​checkout.​shipping-option-item.​render-after
* purchase.​checkout.​shipping-option-list.​render-after
* purchase.​checkout.​shipping-option-list.​render-before
* purchase.​thank-you.​announcement.​render
* purchase.​thank-you.​block.​render
* purchase.​thank-you.​cart-line-item.​render-after
* purchase.​thank-you.​cart-line-list.​render-after
* purchase.​thank-you.​customer-information.​render-after
* purchase.​thank-you.​footer.​render-after
* purchase.​thank-you.​header.​render-after

## Properties

* **id**

  **string**

  A unique identifier for the element.

## List item

The list item component represents a single entry within an ordered list or unordered list. Use list item to structure individual points, steps, or items within a list, with each item automatically receiving appropriate list markers (bullets or numbers) from its parent list.

List item must be used as a direct child of ordered list or unordered list components. Each list item can contain text, inline formatting, or other components to create rich list content.

* **id**

  **string**

  A unique identifier for the element.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/ordered-list-default-I55Pu9b_.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-ordered-list>
    <s-list-item>Add items to your cart</s-list-item>
    <s-list-item>Review your order details</s-list-item>
    <s-list-item>Complete your purchase</s-list-item>
  </s-ordered-list>
  ```

## Best Practices

* Use `s-ordered-list` when you need to present items in a specific sequence or order.
* Each item in the list should be wrapped in a `s-list-item` component.
* Keep list items concise and consistent in length when possible.
* Use `s-ordered-list` for step-by-step instructions, numbered procedures, or ranked items.
* Consider using `s-ordered-list` when the order of items is important for understanding.