> For the complete documentation index, see [llms.txt](https://easify.gitbook.io/easify-product-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easify.gitbook.io/easify-product-options/product-personalizer-live-preview/live-preview-with-quantity-selector.md).

# Live Preview with Quantity Selector

Big news for your storefront! We’ve made the Live Preview even smarter. It now *recognizes the Quantity Selector*, meaning your customers can see their designs come to life in real-time as they add more items.

{% hint style="info" %}
This feature is available from the **Premium** **plan**.
{% endhint %}

## What is it?

💡 This feature ensures your Live Preview stays perfectly in sync with the Quantity Selector. Instead of just showing *which* option is selected, the preview image now updates to show *how many* of that option have been added.

> For example, if a customer is designing a custom necklace and uses the quantity selector to add **two "Pearl Charms,"** the Live Preview will instantly show both charms on the chain.
>
> This visual confirmation gives shoppers a clear, real-time look at exactly what they are building.

💡 This feature is available on the **Premium plan**.

{% hint style="info" %}
This update works seamlessly across all your favorite option styles, including Dropdown, Image Swatch, Color Swatch, Button, Radio Button, and Checkbox.
{% endhint %}

## Demo

[Charm Necklace](https://easify-custom-product-options.myshopify.com/products/live-preview-with-quantity-selector)

![](https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FedqMntCwdCBhpK9aSzoj%2FCharm%20necklace%201024x620.png?alt=media\&token=864a33e7-4809-4f34-916e-9142d8190197)

## How to Set Up

Follow these simple steps to enable real-time visual updates for your product options.

{% stepper %}
{% step %}

### Create your Option Set

Start by creating your Option Set and adding your product options as you normally would.
{% endstep %}

{% step %}

### Enable the Quantity Selector for your options

Select the specific option you want to use with this feature. Navigate to the Advanced Settings and toggle on Allow quantity selector for option value. This allows customers to choose more than one of the same item.

<figure><img src="https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FuLG7I15dgxAiYSqL1uMQ%2Fimage.png?alt=media&amp;token=cfb02b23-4652-41d6-9bbd-7e089326e5bc" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Configure the Live Preview

Go to the Product Personalizer tab and ensure Enable Live Preview is turned on. Set up your layers as you usually do for a standard live preview.

<figure><img src="https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FHiV8l10zdnSmXjalz0KM%2Fimage.png?alt=media&amp;token=b8e05f4d-0d53-467a-af53-f5873edafcf5" alt=""><figcaption></figcaption></figure>

To enable the quantity-based visualization, scroll to find the Quantity selector preview section and select Show multiple previews based on quantity.

<figure><img src="https://3599217945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1LQaNLzwT65jc247sV0f%2Fuploads%2FOwuBlFzC0AsfxZDNkb85%2Fimage.png?alt=media&amp;token=7dcc8816-6f26-46e9-9bc5-221c64e31b24" alt=""><figcaption></figcaption></figure>

#### Preview Spacing

Below the "Show multiple previews" setting, you will see a field for Preview Spacing. This defines the distance (in pixels) between the multiple previews of the same item. If you want your items—like charms on a necklace—to automatically shift and display clearly without overlapping, be sure to set your preferred spacing value here.
{% endstep %}
{% endstepper %}

## Need assistance?

If you have any questions or encounter issues while following this guide to set up product personalizer, don’t hesitate to reach out through our in-app live chat. We’re always here to help!