Product Detail Interface

introduction the product detail interface lets your b2b customers quickly and easily add products to their order and automatically loads when a logged in b2b customer visits a product detail page on your website sparklayer interactive demo you can explore how the sparklayer product page interfaces work in our interactive demo https //www figma com/proto/5fpcy5hsgl7mlwjsjmzi2t/sparklayer interfaces?page id=0%3a1\&type=design\&node id=86 36708\&viewport=554%2c 398%2c0 33\&t=34vlpwbcqpvqotsh 8\&scaling=min zoom\&starting point node id=35%3a7920\&hide ui=1 how it works the product detail interface replaces your existing website's pricing and "add to cart" area with a specially optimised layout it supports a variety of product types, from single variant products, to multi dimensional products (e g colour and size) when a b2b customer visits a product detail page, they'll see this specially optimised layout and can begin ordering this is the most simple product type with just a single option to purchase what sparklayer displays product price specific to the customer (including quantity pricing) rrp price (if set) product sku (or code) stock availability (including pre ordering) quantity, including quantity rules (e g pack sizes) add to order button this interface will render for products that have variants (e g colour, size, etc) to make purchasing easy, the variants are displayed in a table format what sparklayer displays product price specific to the customer (including quantity pricing) rrp price (if set) variant list primary variant (e g colour) and secondary variants that relate to them (e g size) pack sizes (if available variant specific price and rrp price stock availability if a variant isn't available, it will display accordingly note unless the set up allows purchase of out of stock products, the product will display as unavailable if there is no stock quantity, including quantity rules (e g pack sizes) add to order button integrating the code to add the product detail interface to your website, you just need to add a single line of code to your product detail page template \<spark pdp parent id="{{ product id }}">\</spark pdp> one 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 sparklayer's product detail interface can be installed in three ways on shopify automatic install on supported themes https //docs sparklayer io/installing shopify sparklayer#installing the frontend widgets , the interface is added automatically as a shopify app block, no code changes required manual install via app block on any online store 2 0 theme, you can add the sparklayer product page app block directly through your shopify theme customiser go to online store → themes → customize , navigate to a product page, and add the sparklayer product page app block where you'd like it to appear manual install via code if your theme doesn't support app blocks, or you'd prefer a code based install, add the code snippet above to your product detail page template our team is also happy to install this for you see the theme setup https //app sparklayer io/configuration/onboarding page in the sparklayer dashboard to request a free install please refer to guide above configurations sparklayer supports a wide range of configurations you can apply to the frontend interfaces docid\ ccz1vnh0o6d 722w35xpa please see our full guide here docid\ m3df4f0eyc2rm vuarg9h on what's possible!