Product Matrix Interface

introduction the product matrix interface lets your b2b customers rapidly add products to an order in bulk via a special "matrix table" display if your products come in multiple variant types (e g colour and size), it's a great way to allow customers to quickly see all variants available and quickly purchase them sparklayer interactive demo you can explore how the product matrix interface works on our example product here how it works please note we only recommend using the product matrix interface if you have products that have multiple variant option types (e g colour and size) with a large number of options the product matrix interface replaces elements on your website's product detail page with a specially optimised layout that shows all the product options (variants) in one single view once set up, t he interface will be presented in a table and show the following information to the customer item details product pricing their specific b2b pricing and, optionally, rrp pricing variants a matrix table of all available variants quantity the ability to select the quantity of a product using quantity rules docid\ cmxfrpgjqxfz9vjztvv0d add to order the ability to add items to an order quantity pricing visibility of quantity pricing available (this is shown in an information popup) stock level the stock status of a product (e g pre order) sku the product code (this is shown in an information popup) the product matrix interface also has handling for more than two variant groups for each additional variant group, these will be presented within the table matrix for the customer to view in the example below, the product is set up with colour, size, and an option to add a logo integrating the code to add the product matrix interface to your website, you just need to add a single line of code to your product detail page \<spark product matrix parent id="{{ product id }}">\</spark product matrix> once this is added, the interface will display for all logged in b2b customers and they can begin placing orders please note based on the platform you're using, the variable product id will need to be adjusted to the appropriate setting if you're installing on your shopify website, please see installing sparklayer on bigcommerce docid\ x6xahbj 9kyjthd80 1qh important! when using the product matrix interface, we recommend implementing it on your website in a location that gives plenty of space for the b2b customer to see for example, you may want to position it below the product image and description on your product detail page and configure it to span the full width of the page if you're looking to apply the product matrix interface to a select range of products on your store, one way to achieve this is to use product tags for products that you want to apply this to, you could set up a tag b2b product matrix and apply this to relevant products within your shopify theme code, locate your product detail page (e g sections/main product liquid ) and then apply some conditional shopify liquid code login {% if product tags contains 'b2b product matrix' %} {% else %} {% endif %} {% if product tags contains 'b2b product matrix' %} {% else %} {% endif %} please refer to your platform on how to apply custom coding configurations sparklayer supports a wide range of configurations you can apply to the frontend interfaces docid\ ccz1vnh0o6d 722w35xpa please see our product display docid\ m3df4f0eyc2rm vuarg9h on what's possible!