# Order items List

The Order Items List Block displays a list of a customer's orders directly on the customer account pages. It provides easy access to order details, helping customers manage their purchases efficiently.

## Key features

* **Default block**: The Order Items List Block is automatically included and does not require additional setup.
* **Customizable in Shopify editor**: Add a heading and manage its placement directly in the Shopify Account Editor.
* **Actions integration**: Enhance the block with Order Item Actions to allow features like reordering or contacting support.

## Order items List block

The Order Items List Block displays a customer’s orders directly on their account page. It is highly customizable through Shopify’s Account Editor and additional configurations unlocked by generating a Block ID.

{% stepper %}
{% step %}

### Access Special Blocks

Open the sidebar and click the **Special Blocks** card.

<figure><img src="https://252181162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgNjbkcqEVwk7mzEfZieR%2Fuploads%2F6hempHlnBS4mDvURxUK5%2FBlocks%20-%20Special%20Blocks.png?alt=media&#x26;token=e33f8790-1ec8-47ab-97fa-5400b8978142" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Select Order items List

Click the **Customize** button that is in the **Order Items List** card.

<figure><img src="https://252181162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgNjbkcqEVwk7mzEfZieR%2Fuploads%2FffbDT9E4D0FY71azSmqN%2FBlocks%20_%20Special%20Blocks%20_%20Index%20(Types)%20_%20Order%20Items%20List.png?alt=media&#x26;token=4698711f-2440-4c54-bd1a-7682d5d11902" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Generate the Block ID

On the Order Items List page, click the **Generate Block ID** button (located in the “Get your Block ID” card).

<figure><img src="https://252181162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgNjbkcqEVwk7mzEfZieR%2Fuploads%2FycZiADbWRxgU1s32mEfd%2FBlocks%20_%20Special%20Blocks%20_%20Order%20Items%20List%20_%20New%20_%20Generate%20ID.png?alt=media&#x26;token=e701b689-9e8c-4291-be6a-4f79ee75001a" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
You must generate a Block ID to unlock further configurations.
{% endhint %}

{% endstep %}

{% step %}

### Configure additional settings

Once the Block ID is generated, the following options become available:

**Enabled:** On or Off, this controls the visibility of your block.

**Block ID:** Use this to publish your block in a later step.

**Manage Order Item Actions:** This is a link towards [order-item-actions](https://docs.overse.app/hubble/block-types/special/order-item-actions "mention"), a block that can be integrated.

<figure><img src="https://252181162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgNjbkcqEVwk7mzEfZieR%2Fuploads%2FCScPBKtpQEXR1AGMFZvw%2FBlocks%20_%20Special%20Blocks%20_%20Order%20Items%20List%20_%20New%20_%20Block%20Settings.png?alt=media&#x26;token=72decca0-75f4-4474-99be-09d0b9d7eb81" alt=""><figcaption></figcaption></figure>

{% endstep %}

{% step %}

### Publish your block

Click the **Publish** button that is in the right-top corner and follow the steps that will appear.

<figure><img src="https://252181162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgNjbkcqEVwk7mzEfZieR%2Fuploads%2FUrIM0bUuJgzAm5PpubZm%2FOrder%20Items%20List%20-%20Publish%20Button.png?alt=media&#x26;token=b5224085-d72f-48b4-8b5c-83a4d8d28c71" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Success: The block is now live on the customer account pages.
{% endhint %}
{% endstep %}

{% step %}

### Configure Editor settings

Layout and theming settings are available within the Shopify's Account Editor for this block.

Configure settings such as:

**Optional heading:** add a heading (e.g., “Your Orders”) above the list to improve clarity.

**Background color:** choose from these styles: Card, Base, Subdued, or Transparent.

**Toggle enable/disable Order item Actions:** toggle interactive actions (e.g., reorder, support) for each order item.

<figure><img src="https://252181162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgNjbkcqEVwk7mzEfZieR%2Fuploads%2Fdohte0yD9d5Ycn8f0xeH%2FEditor%20-%20Order%20Items%20List%20settings.png?alt=media&#x26;token=59fcc2ef-9664-4495-ba7b-19a4be2551fe" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Use Shopify’s Account Editor to adjust the block’s placement and add an optional heading.
{% endhint %}
{% endstep %}
{% endstepper %}
