> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nomadsarc.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 🔢 Quantity Selector

How to display a **Quantity Selector** for each cart item on the Checkout using the **Cart Item Details -> Adjust Quantity** option.

<iframe src="https://www.loom.com/embed/450773eaed82428d8c238a73b8ba3bbe" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="480" />

## Guide

<Steps>
  <Step title="Create a new customization">
    Create a new [customization](https://admin.shopify.com/apps/dynamic-checkout-customizer/customizations).

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/28fda48321.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=2c262de4965e8e0e253c530d0bb26897" alt="" width="1441" height="756" data-path="images/28fda48321.png" />
  </Step>

  <Step title="Select the Cart Item Details category">
    Choose **Cart Item Details** as the customization category.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/05437cb8d0.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=3899b09f992922722b5ad7eeb366f040" alt="" width="2880" height="1508" data-path="images/05437cb8d0.png" />
  </Step>

  <Step title="Choose the Adjust Quantity type">
    Select **Adjust Quantity** from the available Cart Item Details options to allow customers to update product quantities directly during checkout.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/e41420a3a0.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=6a562cf429a7593fbde71b8e78b3e187" alt="" width="2880" height="1508" data-path="images/e41420a3a0.png" />
  </Step>

  <Step title="Choose a placement">
    Select **Render After Each Cart Item** from the available placement options.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/08417d9e12.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=fe626aa9123d4992139b72fbb3da81be" alt="" width="2880" height="1514" data-path="images/08417d9e12.png" />
  </Step>

  <Step title="Configure display conditions">
    Add one or more **conditions** to control when the quantity selector is displayed during checkout.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/c601b5f168.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=bcb7cea74bb870be807bcd9c8c476fc3" alt="" width="2880" height="1518" data-path="images/c601b5f168.png" />
  </Step>

  <Step title="Configure Quantity Selector settings">
    Configure the **Quantity Selector** settings, including the **Link Title** displayed for each cart item.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/22a04eb26a.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=d04c307040c2c6ad3afb12730bab6c13" alt="" width="2880" height="1504" data-path="images/22a04eb26a.png" />
  </Step>

  <Step title="Activate the customization">
    Change the **Status** to **Active** to enable the customization.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/cff54a0030.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=ff4a792c2e78ec14a170bb0193b80e67" alt="" width="2878" height="1506" data-path="images/cff54a0030.png" />
  </Step>

  <Step title="Set the priority">
    Configure the **Priority** (0–100) to determine the execution order when multiple customizations are eligible.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/7d0a78dd6f.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=144c6ed1e7bc779fb3297954a19218f4" alt="" width="2878" height="1506" data-path="images/7d0a78dd6f.png" />
  </Step>

  <Step title="Copy the Placement ID">
    Open the **Placement** tab and copy the generated **Placement ID**. You'll use this in the Shopify Checkout Editor.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/3b93bc2024.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=80c9f486b90c77510205efbb8964a7cd" alt="" width="2876" height="1508" data-path="images/3b93bc2024.png" />
  </Step>

  <Step title="Save the customization">
    Click **Save** to store your configuration.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/c4bd2bd678.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=89ee730dbca0be6af828715e5e3abaac" alt="" width="1441" height="753" data-path="images/c4bd2bd678.png" />
  </Step>

  <Step title="Open the Checkout Editor">
    Go to your Shopify **[Settings](https://admin.shopify.com/settings) → Checkout**, select your checkout profile, and click **Customize**.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/ebe8a89b62.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=68d2403f6ad9255b2b47eaf5d2042514" alt="" width="2880" height="1508" data-path="images/ebe8a89b62.png" />
  </Step>

  <Step title="Add the app block">
    In the [Checkout Editor](https://admin.shopify.com/settings/checkout/editor), click **Add app block**.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/e989097815.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=2849e31bab12a748724a57a0825ec186" alt="" width="2878" height="1504" data-path="images/e989097815.png" />

    <Note>
      Make sure the app block is placed in the same checkout placement you selected in Dynamic Checkout Customizer.
    </Note>
  </Step>

  <Step title="Configure the app block">
    Select the **Checkout – Image Content** app block, drag it to the desired location, and paste the copied **Placement ID**.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/1e4bd03a7a.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=a9ec628169d039381f6d6b08ce45a321" alt="" width="2880" height="1510" data-path="images/1e4bd03a7a.png" />
  </Step>

  <Step title="Publish your changes">
    Click **Save** in the Checkout Editor to publish the customization.

    <img src="https://mintcdn.com/nomads-arc/IYjqIENMQDfy0NjK/images/7545f49df4.png?fit=max&auto=format&n=IYjqIENMQDfy0NjK&q=85&s=5d6c62de2f48cfa945a16c5e691a2006" alt="" width="1441" height="753" data-path="images/7545f49df4.png" />
  </Step>
</Steps>

<Note>
  **Why does it matter?**

  The **Cart Item Details → Adjust Quantity** customization lets customers update product quantities directly during checkout, reducing friction and making it easier to increase order quantities without returning to the cart. This can help improve average order value (AOV).
</Note>
