> For the complete documentation index, see [llms.txt](https://docs-shpf.bsscommerce.com/bss-b2b-quick-order-and-quotes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-shpf.bsscommerce.com/bss-b2b-quick-order-and-quotes/quick-order/product-page-variant-table.md).

# Product Page Variant Table

The **Product Page Variant Table** feature embeds a high-density, multi-variant ordering table directly on your store's Product Detail Pages (PDP). It empowers B2B buyers to select quantities for multiple product variants (sizes, colors, materials) and bulk add them to the cart or submit an RFQ in a single click.

***

## 1. Overview & Business Value

Standard Shopify product pages typically limit shoppers to selecting **one variant at a time** through dropdown selectors. For B2B wholesale buyers purchasing dozens of variant combinations, this requires tedious, repetitive clicks.

```mermaid
graph LR
    A["Buyer opens PDP"] --> B["Variant Table App Block renders"]
    B --> C["Buyer enters quantities across variants"]
    C --> D{"Click Action"}
    D -->|"Add to Cart"| E["Bulk added to cart"]
    D -->|"Add to Quote"| F["Transferred to R4Q form"]
```

### Key Merchant Benefits:

* **Faster Bulk Ordering**: Buyers enter quantities across all available variants on a single screen.
* **Transparent Pricing & Stock**: Live variant prices, SKUs, and inventory availability are displayed in dedicated columns.
* **Dual Action Support**: Supports both **Add to Cart** (for immediate purchase) and **Add to Quote** (for RFQ negotiation).

{% hint style="info" %}
**Plan Requirement**: This feature is available on the **Business plan and above**.
{% endhint %}

***

## 2. Before You Begin

1. **Theme App Embed**: Verify that the **BSS B2B Quotes** App Embed is turned on in your Shopify Theme Editor.
2. **App Block Integration**: The table is rendered via Shopify's Theme App Extension. You must add the **Variant Table App Block** to your Product template in the Shopify Theme Editor.

***

## 3. Configuration via Shopify Theme Editor

In the app admin (**BSS B2B Quotes > Quick Order**), the **Product Page Variant Table** card provides an **Add to theme** shortcut that opens your Shopify Theme Editor directly. All visual and functional settings are customized directly inside the **Theme Editor sidebar**:

### 3.1 Adding the App Block

1. In Shopify Admin, navigate to **Online Store > Themes > Customize**.
2. From the top dropdown menu, select **Products > Default product** (or your specific product template).
3. In the left sidebar under the **Product Information** section, click **Add block**.
4. Select **Variant Table** (under Apps).
5. Drag the block to your preferred position (e.g., directly below the price or product description).

### 3.2 Block Schema Settings

| Setting                        |     Type     | Description                                                                                                               |
| ------------------------------ | :----------: | ------------------------------------------------------------------------------------------------------------------------- |
| **Enable Quote Compatibility** |    Toggle    | When enabled, renders an **Add to Quote** button alongside Add to Cart if the product matches an active Quote Logic rule. |
| **Show Column Image**          |    Toggle    | Displays the variant thumbnail image column.                                                                              |
| **Show Column SKU**            |    Toggle    | Displays the variant SKU code column.                                                                                     |
| **Show Column Stock**          |    Toggle    | Displays real-time warehouse inventory availability.                                                                      |
| **Show Column Line Total**     |    Toggle    | Displays dynamically calculated line total per variant row.                                                               |
| **Enable Bulk Quantity Input** |    Toggle    | Adds a master quantity input in the table header to apply the same quantity across all variants simultaneously.           |
| **Primary Color**              | Color Picker | Customizes the background color of primary action buttons.                                                                |
| **Text Color**                 | Color Picker | Customizes the label text color of primary action buttons.                                                                |

6. Click **Save** in the top-right corner to publish your configuration.

***

## 4. Storefront Buyer Experience

1. **Inline Quantity Inputs**: Buyers enter required quantities for each variant row.
2. **Bulk Quantity Applicator**: When enabled, entering a number in the master quantity field at the top fills all variant rows in one click.
3. **Quantity Rules**: Automatically respects Shopify Quantity Rules (minimum order quantities, maximum limits, and pack size increments).
4. **Out-of-Stock Protection**: Variants with zero inventory (and backordering disabled) are grayed out with an "Out of stock" label.
5. **One-Click Action**: Clicking **Add to Cart** or **Add to Quote** processes all entered variants simultaneously.

***

## 5. Technical & Platform Constraints

{% hint style="warning" %}
Keep the following platform constraints in mind when using the Product Page Variant Table:

* **Variant Count Limit**: Variant data is fetched dynamically with support for up to **250 variants per product**. Products exceeding 250 variants will only display the first 250 items.
* **Volume Pricing Compatibility**: The table natively renders volume pricing tiers configured via **Shopify Native B2B Volume Pricing**. Third-party quantity break apps (such as Wholesale Solution Quantity Breaks) are not rendered within this block.
  {% endhint %}