> For the complete documentation index, see [llms.txt](https://easify.gitbook.io/easify-box-bundle-builder-docs/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-box-bundle-builder-docs/user-guide/visual-editor/product-list/display-product-options-variants-in-product-list.md).

# Display Product Options/Variants in Product List

## What Is This Feature?

The **Display Product Options in Product List** feature allows you to show product options directly on product cards in your box’s product list.

Previously, customers needed to open **Quick View** to view and select product variants such as size, color, style, or shape. With this feature, those product options can now be displayed directly in the product list, helping customers choose the right variant more quickly while building their box.

For example, if you sell a **Unisex Polo Shirt** with size options such as **XS**, **S**, **M**, and **L**, customers can select the size directly from the product card without opening Quick View.

**Demo Example:**

* [Swim Set](https://easify-box-bundle-builder.myshopify.com/apps/box-builder/swim-set-one-page)

<figure><img src="/files/dFnOjCr5KU4rY9zhuVid" alt=""><figcaption></figcaption></figure>

## Why Use This Feature?

The **Display Product Options in Product List** feature is designed to make the box-building experience faster and more convenient for customers.

* Faster variant selection: Customers can choose product options directly from the product card without opening Quick View.
* Better product visibility: Available options such as sizes, colors, or shapes are shown earlier in the shopping flow.
* Smoother box-building experience: Customers can compare products and variants more easily while browsing the product list.
* More flexible display: You can choose between Pills, Dropdown, or Color/Image Swatch depending on your product type and storefront design.

## How to Enable Product Options in Product List

{% stepper %}
{% step %}

### Open Product Cards Settings

* Go to your **Visual Editor** and open the **Theme Settings** tab.

<figure><img src="/files/wsidaqXP8e1VFpufVK2F" alt=""><figcaption></figcaption></figure>

* Navigate to the **Product Card** tab.

<figure><img src="/files/xC3wshj8liWMVB0lVTYr" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Enable Product Options

* Enable the checkbox: **Product options**.
* Once enabled, product options such as size, color, shape, or other variants will be displayed directly on the product cards in the product list.

<figure><img src="/files/s3uieoEtLiyPL37jVJv4" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Choose a Display Style

* After enabling **Product options**, choose how the options should be displayed.

<figure><img src="/files/ikJOmeaJ0v9ZqG1kTtbN" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Customize Variant Styling in Quick View

* The detailed styling of product options in the product list follows the variant style settings configured in **Quick View**.

<figure><img src="/files/9LR2xSS2FvwXN7R0dGXS" alt=""><figcaption></figcaption></figure>

{% endstep %}
{% endstepper %}

## How Each Display Style Looks

You can choose one of the following display styles for product options in the product list.

### Pills

Pills display each option value as a clickable button. This style works well for simple options such as size, style, or shape.

<figure><img src="/files/H4TpXLRQ7H1e45tU96RI" alt=""><figcaption></figcaption></figure>

### **Dropdown**

Dropdown displays option values in a compact dropdown menu. This style is useful when a product has many option values and you want to save space on the product card.

<figure><img src="/files/0AJflKdgH7CAnfyg71pE" alt=""><figcaption></figcaption></figure>

### **Color/Image Swatch**

Color/Image Swatch displays options as color swatches or image-based choices. This style is suitable for visual options such as color, pattern, material, or design.

<figure><img src="/files/hdgS112qUgYCwKUeXllg" alt=""><figcaption></figcaption></figure>

## Notes

> * **Product Requirements:** Product options will only appear for products that have variants or product options configured in Shopify.
> * **Display Style:** The selected style controls how options appear in the product list, while the detailed styling follows the variant style settings in **Quick View**.
> * **Shared Styling:** Any changes made to the variant style in **Quick View** will also apply to product options displayed in the product list.

## 💬 Need Assistance?

If you're unsure how to use this feature or need help with a specific product setup, we’re here for you 24/7. Reach out via the **in-app live chat**, we’ll make sure your setup works exactly how you want it.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easify.gitbook.io/easify-box-bundle-builder-docs/user-guide/visual-editor/product-list/display-product-options-variants-in-product-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.