Grouped Variant Order Table Setup Guide
A grouped variant order table puts one product in each main row. Shoppers expand the row, choose a variant quantity, and use that variant’s cart control. This example uses fictional stationery products. Its sample cart demonstrates separate variant actions without connecting to a store or placing an order.
Setup tutorial · Table Master · Updated 2026-09-07 · By Activory
Try the storefront example
Select Show variants for Demo Notebook. Increase the A5 / Blue quantity to two, then reduce it. These are the app’s quantity controls in sample-cart mode. The grey variant is unavailable.
These presets are available in Table Master. Changes apply to this example only.
Use these settings in your store
Open your table view, then select Design.
- Table colors → Design template: Ocean blue.
- Cell padding: set Top, Bottom, Left, and Right to 8 px.
- Table style → Text alignment: Left.
- Table style → Rounded corners: Medium (6px).
Save the table view. Check it in your theme. Your theme controls the font and available width.
This example uses Table Master storefront code with sample data and the settings below. Your theme’s fonts and available width can change the result. Example links show their destination; purchase controls use a sample cart. Use the checks below to confirm the finished setup in your store.
Build it in Table Master
- In Table Master, choose Shopify products as the data source. Select Products with grouped variants. Choose the products for the table and import them.
- Create a table view from that database. In Column type, set text identifiers to String. Set measurements and amounts to Number. Keep each unit in its heading.
- Use Shopify products as the source and choose Products with grouped variants. Do not use the sample rows for real cart IDs.
- Configure quantity controls on each variant’s Add to Cart column. In Order & visibility, move this column next to Product so Show variants stays visible on phones. There is no Add all action.
- Use variant rows for products with more than 20 variants. Check real prices and availability after Sync products.
- Save and publish the table view. Open the target page template in the theme editor. Add the Table Master app block and choose the table view. Save the theme and test the public page.
Example settings
- The starting design is Ocean blue with 8 px padding, left-aligned text, and Medium (6 px) rounded corners. In Design, choose Ocean blue under Table colors → Design template. Set all four Cell padding values to 8. Under Table style, choose Left for Text alignment and Medium (6px) for Rounded corners. Try the other presets and corner sizes above; Reset example restores this starting design.
- This grouped table has Responsive table disabled. Use the app block’s horizontal scroll to read all columns on phones. Keep Quantity next to Product. In Column width, set Min width (px): Product 140, Quantity 140, Variant 130, SKU 130, price 110, and Availability 110. This keeps the quantity controls within their column when variant rows open.
Sample data and content
Use these values for a test. Replace them with checked product data, published destinations, and offers that your store can supply.
| Product | Variant | SKU | Example price USD | Availability |
|---|---|---|---|---|
| Demo Notebook | A5 / Blue | NOTE-A5-B | 12 | Available |
| Demo Notebook | A5 / Grey | NOTE-A5-G | 12 | Unavailable |
| Demo Notebook | A4 / Blue | NOTE-A4-B | 18 | Available |
| Demo Refillable Pen | Black | PEN-B | 8 | Available |
| Demo Refillable Pen | Silver | PEN-S | 9 | Available |
| Demo Refill Pack | Blue / 3 pack | REF-B3 | 6 | Available |
Should I use grouped product rows or one row per variant?
Use grouped rows for products with up to 20 variants when the product name is the natural starting point. Use variant rows for larger products or when buyers compare individual SKUs directly. Table Master gives each variant its own cart control. It does not add all selected variants with one action.
- In Table Master, create a database with Shopify products as the source. Grant product access if requested; a CSV of sample SKUs cannot create real cart controls.
- Choose Products with grouped variants and select the intended Shopify products. Check the number of variants per product and the estimated plan-row use.
- Create an embedded table. In Column type, configure the Add to Cart column and quantity controls. Choose how unavailable variants are handled.
- Preview each product group on a phone. Add one actual variant through its own button, then verify the variant and quantity in the real cart. Use Sync products after changing Shopify-managed values.
Read the Table Master setup guide for the full app controls and placement options.
Check the finished setup
- Expand Demo Notebook, preview two A5 / Blue units, and confirm the sample cart contains two NOTE-A5-B units.
- Confirm the unavailable grey notebook has no active sample-cart action. Test the real store’s configured unavailable-variant treatment separately.
- Search PEN-S and expand the matching product group. Clear the search before checking the full set again.
Common mistakes
- Do not use fictional SKUs or CSV rows as Shopify variant IDs. Real cart actions require the Shopify product import source.
- Do not describe the example cart as checkout, live stock, or a bulk Add all feature. Product data refresh uses Sync products.
Supported use
The interactive example uses a local sample cart. It does not contact Shopify, reserve stock, or place an order. A real Table Master order table needs imported Shopify products and supported per-variant cart controls. Refresh Shopify-managed values with Sync products.
Table Master features, current app plans, and Grouped row limits and per-variant cart controls explain the supported setup.
Related tutorials
- Product Comparison Setup Guide
- Wholesale Pack List Setup Guide
- Metafield Product Catalog Setup Guide
Browse all Table Master tutorials. Read how the examples are made or report a correction.