> ## Documentation Index
> Fetch the complete documentation index at: https://help.extendcommerce.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding Product Tables in Your Store

This guide will walk you through how to set up, manage, and customize product tables for your store. You have the option to display these tables to all visitors — including those who aren't logged in. Non-logged-in users will see **regular (DTC) pricing**, while logged-in users will see **catalog-specific pricing** based on their customer account.

# How to Create a Product Table

## 1. Access Product Table Page

* Go to Extend B2B Buying > Product Table

* Click **Add New Table** to navigate to the **Product Table Configuration** screen.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/1.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=fedfa69a71478e5d83d5fb59ce086d65" alt="" width="1552" height="887" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/1.png" />

## **2. Customize Your Product Table**

Once on the **Product Table Settings** page:

* **Table Name**: Provide a name for your product table.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/2.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=76a66a85f4e0dcf59492970a4cf5043d" alt="" width="1583" height="867" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/2.png" />

You can further customize your product table using the following tabs:

### i. **General Settings**

a. **Description**: Enter a brief description of the table’s purpose.

b. **Variants Display Mode**: Choose how variants will display:

* **Ungrouped**: All variants are displayed as separate items.

* **Grouped**: A variant selection column is added, allowing customers to choose and add specific variants to their cart.

* **Folded**: Variants are hidden under a parent product until clicked, displaying variants in an accordion-style view.

c. **Enable Search**: Allows customers to search for products within the table.

d. **Enable Filters**: Provides customers with filter options for more intuitive browsing.

e. **Enable Buying**: Check this box to allow adding products to the cart. This unlocks the **Buying Experience** option with two modes:

* **Cart Button**: Adds an "Add to Cart" button. Choose placement at the item, table, or both levels.

* **Auto Add**: Automatically adds products to the cart when quantities are updated.

f. **Enable Image Lightbox**: Enable image lightbox for larger image views.

g. **Enable Stock Availability**: Displays "In Stock" or "Out of Stock" labels in the Quick Order for products with inventory tracking enabled in Shopify.

h. **Enable Stock Quantity**: Displays the available stock quantity for each product in the Product Table, provided inventory tracking is enabled in Shopify.

i. **Show Default Quantity Rules on All Products** – If enabled, display of `Min: 1, Increment: 1` will be shown even if custom rules aren’t set.

j. **Products per Page**: Define the number of products to display per page.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/3.gif?s=36c10debcecf121f8d38110f1e52613b" alt="" width="1638" height="838" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/3.gif" />

### ii. **Products Tab**

1. **Product Selection Mode**

* **Display Product Selection**: Choose whether to display all products or only specific collections.

* **Selected Collections**: If opting for specific products, choose collections from a dropdown menu.

2\. **Default Product Sorting:** To display products from a selected collection in your product table, if only one collection is chosen, the products will be sorted based on **Shopify's default sorting order**. If multiple collections are selected, you can choose from four available sorting options:

* Product Title

* Highest Price

* Lowest Price

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/4.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=330f1081b21e599e3baf3049c87a1e3b" alt="" width="1392" height="821" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/4.png" />

* **Preview Products**: Click the eye icon to preview products within each collection.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/5.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=09b3d73e5c2c334b252ac0ccf95bb357" alt="" width="1489" height="815" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/5.png" />

### iii. **Columns & Filters**

* **Available Columns**: Select which columns to display from available product attributes, such as:

  * Product Type, Status, Tags, Vendor, Barcode, Compare at Price, Price, SKU, Published At, Category, Inventory Quantity, Tax Code, Taxable.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/6.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=ae35c04c36babcfb2efa68d942023ced" alt="" width="1453" height="820" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/6.png" />

* **Labels, Filters and Visibility**: Add a label name for the column, enable filtering by checking the "Filters" box, and toggle the "Visible" box to show or hide the column in the table.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/7.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=d4082bfd452cfe75ba508987291e644c" alt="" width="986" height="555" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/7.png" />

* **Column Management**: Rearrange columns by dragging them into your preferred order, and delete unnecessary columns. Note that the "Title" column is pre-selected and mandatory.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/8.gif?s=f5448ca6226ccd99c64c3f36165bc7f1" alt="" width="1280" height="720" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/8.gif" />

### iv. **Appearance**

* **Color Palette**: Choose colors for table elements like headings, buttons, and fonts.

* **Save Palette**: Save your customized palette; all elements will update to match.

* **Restore Default**: Reset to the default color palette if needed.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/9.gif?s=9707c34b321288c47728e660ec17b7b7" alt="" width="1280" height="720" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/9.gif" />

### v. **Save Settings**

* **Save & Publish**: Sets the product table to Active status, allowing it to be added to any part of your store outside of Quick Order if needed. The table will be fully accessible within your store.

* **Save as Draft**: Sets the product table to Draft status, making it unavailable for standalone use on the store until published.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/10.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=eeee1f896ca66e81753bb0ab578df136" alt="" width="1460" height="852" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/10.png" />

# How to Embed a Product Table in Your Store

You can easily embed your product table anywhere in your store by adding its unique Product Table ID in your theme customization settings.

## 1. **Install Product Table in Your Theme**

Click "Install in theme" button and it will automatically add the Product Table in the App Block

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/11.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=bebb4fd9db38fdd7e8ea25c7c195e774" alt="" width="1552" height="887" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/11.png" />

### Paste Product ID

* You can find the **unique Product ID** for each product listed in the **Manage Product Tables** section. This ID is displayed alongside other product details and serves as a unique identifier for each product in the system.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/12.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=66714b8b3460bc694580551d4ce5d0f2" alt="" width="889" height="271" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/12.png" />

## 2. Access Theme Customization

* Navigate to your store's **Theme Customization** section.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/13.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=850e11d66ad135d0fcc669b4f438f586" alt="" width="1734" height="664" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/13.png" />

## 3. Paste the Product Table ID

* Click on the newly added **Product Table App** block.

* Paste the unique Product Table ID you copied in **Step 1** into the field shown, and the Product Table will instantly be populated on the page.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/14.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=74e28368f30b32c2d0d640333f3b429b" alt="" width="1304" height="628" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/14.png" />

## 4. Save Your Changes

* Click **Save** to apply the changes to your store’s theme.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/15.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=b49d3ec58e5094468d822aca7edbb10f" alt="" width="1037" height="625" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/15.png" />

# Product Table Display in Your Store

* Once configured, the product table will appear in your store with the settings you’ve selected, including search options, filters, columns, and any variants you've set up earlier.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/16.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=bae00934991227eeb1f1f8452674a89b" alt="" width="1300" height="640" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/16.png" />

# How to Edit or Delete a Product Table

## Edit Product Table

1. Go to the **Manage Product Tables** section.

2. Find the table you want to edit and click the **Edit** icon under **Actions**.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/17.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=41471f1b9cc54c4e2dbfeb0519a4f1a0" alt="" width="916" height="551" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/17.png" />

3\. You will be taken to the Product Table Configuration screen, where you can make changes.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/18.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=75fde378d371c93b7a81db096edadf5a" alt="" width="1637" height="900" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/18.png" />

## Delete Product Table

1. In the **Manage Product Tables** section, find the table you want to delete.

2. Click the **Delete** icon under **Actions**.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/19.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=a4616a4b5043a88344291a63250b762a" alt="" width="916" height="551" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/19.png" />

3\. Confirm the deletion when prompted. Please note that once deleted, this action cannot be undone.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/20.png?fit=max&auto=format&n=HZLZCqJIYVmx-_SQ&q=85&s=7b0645252c10550fed2dab0e1dc60f8f" alt="" width="1080" height="793" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/20.png" />

##

Searching and Sorting

1. **Search Functionality**\
   You can easily search for products within the management screen. The search results will be displayed dynamically as you type, providing quick and relevant matches based on your query.

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/21.gif?s=bfc1be943380da5a108c563b4c8d5e82" alt="" width="880" height="240" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/21.gif" />

​ **2. Sorting Options**\
The product table can be sorted based on the following criteria:

* **Name**: Sort the products alphabetically in either:

  * **Ascending Order** (A-Z)

  * **Descending Order** (Z-A)

* **Published Date**: Sort the products by their published date in either:

  * **Newest First** (most recent publication date)

  * **Oldest First** (earliest publication date)

<img src="https://mintcdn.com/extendcommerce/HZLZCqJIYVmx-_SQ/images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/22.gif?s=9cf165e4baf6743126352b062e410b9d" alt="" width="780" height="244" data-path="images/shopify/extend-b2b-quick-order/getting-started/embedding-product-tables-in-your-store/22.gif" />

By following these steps, you can quickly add, edit, or embed a product table in your store, making it easier for customers to browse and purchase products. If you need further assistance, feel free to reach out to our support team.
