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.

1. The buyer opens a product page.
2. The Variant Table app block shows every variant with a quantity field.
3. The buyer enters quantities for several variants.
4. They click Add to cart to add everything at once, or Add to quote to send the variants to the quote 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).

Note

Plan Requirement: This feature is available on the Business plan and above.

---

2. Before You Begin

1. Theme App Embed: Verify that the B2B Portal 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 Quote > 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

Caution

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.