Product Card Interface

introduction the product card interface lets you display b2b pricing and the ability to add products to an order anywhere a "product card" is shown on your website typically this includes product collection (or "category") pages, and product upsells 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 card interface replaces your existing website's product card pricing and "add to cart" area with a specially optimised layout once set up, it provides b2b customers an easy way to see their pricing and begin adding products to their order the interface can show the following information item details product pricing their specific b2b pricing and, optionally, rrp pricing variants a drop down list of 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 stock level the stock status of a product (e g pre order) sku the product code (sku) integrating the code to add the product card interface to your website, you just need to add a single line of code to the product cards that display on your collection pages \<spark product card parent id="{{ product id }}">\</spark product card> 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 sparklayer's product card 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 card app block directly through your shopify theme customiser go to online store → themes → customize , navigate to a collection or product page, and add the sparklayer product card 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 the file that renders product cards on your collection pages our team is also happy to install this for you see the theme setup page https //app sparklayer io/configuration/onboarding 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 docid\ m3df4f0eyc2rm vuarg9h on what's possible!