Product Display

product detail interface table view mode by default, the product detail interface docid\ jkcjbyuanjzp75i8ul7mt shows single variant products with the option to change quantity and an "add to order" button if you'd prefer, you can force all products to render in the special "table view" mode, even if they only have a single variant to enable this, simply add the below code please note based on the platform you're using, the variable product id will need to be adjusted to the appropriate setting "all variants" mode if your products are available in multiple variant options (e g colour, size, shape), it's possible to enable a special "all variants" mode that gives customers an easy way to see all available variants please note this differs from the 'standard' product detail interface docid\ jkcjbyuanjzp75i8ul7mt that shows variant options in a drop down menu to enable this, simply add the below code to your product pages the "all variants" mode will add additional columns to the product detail interface docid\ jkcjbyuanjzp75i8ul7mt which may interfere with the display on mobile devices by being too wide you can optionally choose to hide columns from showing on mobile devices by using the below code the special "all variants" mode takes the variants you've set up within your product catalogue, and will additionally order the list based on the ordering set within your product catalogue "matrix" mode if your products are available in multiple variant options (e g colour, size, shape) and you want to display them in a "table" view, it's possible to enable a special product matrix interface docid 8go0nyhfdmynwljsnfo s that gives customers an easy way to see all available variants this can be used anywhere that products are displayed on your website and gives customers a rapid way to add products to an order please note this differs from the 'standard' product detail interface docid\ jkcjbyuanjzp75i8ul7mt that shows variant options in a drop down menu to enable this, simply add the below code to your product pages to learn more about how this works and how to implement it, please see product matrix interface docid 8go0nyhfdmynwljsnfo s hiding the image in the table view by default, the product detail interface docid\ jkcjbyuanjzp75i8ul7mt shows a thumbnail image of the variant within the layout if you'd rather hide this, you can do this by adding a special css overwrite if you'd like this hidden, simply add the below css to your customising the design docid\ qct2zk8wjhyiv2zbvbjyy \<style> \ root { / default / \ spark pdp image table cell; / add this to hide image / \ spark pdp image none; } \</style> product code display (sku) by default, the product detail interface docid\ jkcjbyuanjzp75i8ul7mt shows the product code (sku) within the layout, both for single variant products and multi variant products (e g colour, size, etc) if you'd like this hidden, simply add the below css to your customising the design docid\ qct2zk8wjhyiv2zbvbjyy \<style> \ root { / default / \ spark pdp sku block; / add this to hide the sku / \ spark pdp sku none; } \</style> you can also modify the term for sku by editing the sparklayer default language strings updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / translations { en { "pdp product code" "product code", } }, / end of code / barcode display (isbn, upc, gtin) if your store is setup with barcodes for your products, you can optionally display these on the sparklayer product page widgets if you'd like the barcode to display, you'll need to make two changes within your theme code for the product detail page widget, add show barcode as shown below once set up, the barcode will show clearly to customers when they visit a product page updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / translations { en { "global product barcode" "barcode", } }, / end of code / stock display looking to display live stock levels? please refer to our stock display docid\ gj ao gq6oa jx0d27hys product card interface show stock status it's possible to adjust the product card interface docid\ mrp z0qizq2qksseujylv to show live stock (inventory) levels to your customers, anywhere where this interface is shown to enable this, simply use the following code please note based on the platform you're using, the variable product id will need to be adjusted to the appropriate setting product code display (sku) it's possible to adjust the product card interface docid\ mrp z0qizq2qksseujylv to show the product code (sku) to your customers, anywhere where this interface is shown to enable this, simply use the following code please note based on the platform you're using, the variable product id will need to be adjusted to the appropriate setting barcode display (isbn, upc, gtin) it's possible to adjust the product card interface docid\ mrp z0qizq2qksseujylv to show the barcode to your customers, anywhere where this interface is shown to enable this, simply use the following code please note based on the platform you're using, the variable product id will need to be adjusted to the appropriate setting hide variant drop downs it's possible to adjust the product card interface docid\ mrp z0qizq2qksseujylv to hide variant drop downs from showing for example, you may have a product that has a variant group of "size" with only one option and you'd prefer not to show the drop down to enable this, simply use the following code, replacing hide dropdown="size, colour" with the appropriate option group names from your platform please note based on the platform you're using, the variable product id will need to be adjusted to the appropriate setting hide price from button if you'd prefer to now show a "total price" in the "add" button that shows in the product card, it's possible to remove this by adding (and modifying) a special language string updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / translations { en { "product card add to order cta text" "add ({price})", } }, / end of code / product variant specific display (e g hiding) within the product detail interface docid\ jkcjbyuanjzp75i8ul7mt and product card interface docid\ mrp z0qizq2qksseujylv , it's possible to isolate specific variants to have variant specific behaviour applied to them currently this includes the following behaviour details hide specific variants within the sparklayer interfaces, specific variants can be hidden from view, either globally (for all b2b customers) or for specific customer groups set specific variants to "un sellable" within the sparklayer interfaces, specific variants can be set to "un sellable", resulting in them displaying to the customer as "unavailable" to purchase to enable this, sparklayer uses special settings (sometimes referred to as metafields or attributes ) that allow additional data to be stored against products setting up metafields on shopify 🤖 automatically add this to your shopify store by going to configure metafields 📖 learn more about how metafields work in shopify metafields & data mapping docid\ bxwngb6b1n7qffhtnu7pk hiding specific variants item details custom data type variants metafield type this must be set as json namespace this must be set as sparklayer key this must be set as settings value this must be set in the following format \[{"customer group" "base","display"\ false}] to apply to multiple customer groups, you can use this format ​\[{"customer group" "base","display" true},{"customer group" "b2b group1","display" false}] set specific variants to "un sellable" item details custom data type variants metafield type this must be set as json namespace this must be set as sparklayer key this must be set as settings value this must be set in the following format \[{"customer group" "base","sell"\ false}] to apply to multiple customer groups, you can use this format ​\[{"customer group" "base","sell" true},{"customer group" "b2b group1","sell" false}] for more information, please refer to the sparklayer technical docs product settings you can learn more about product settings in product settings docid\ cm9b1i6cz0volc67g fji quick buy mode important please note the customisations detailed in this guide are recommendations only and may vary in complexity, depending on how your store is set up whilst the sparklayer team can advise on how to approach implementing these recommendations, our team may not be equipped to implement them on your shopify store we recommend engaging a developer assist should you wish to proceed with any of the recommendations below it's possible to adapt the sparklayer interface to display in "quick buy mode" that allows customers to more rapidly build orders from your product collection pages to enable this feature, you can adapt the product card interface docid\ mrp z0qizq2qksseujylv with a special setting that adjusts the layout to a "table view" simply add the code below to any product collection page 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 using the shopify b2b dawn theme docid\ lhku0 g 4gvef1jamgxmo , this is enabled by default, and it's also possible to manually enable this on most shopify themes to enable quick buy mode, you'll need to follow the below steps within your shopify theme codebase within /templates/ create a duplicate of your default collections layout within /sections/ create a duplicate of your default collections section layout within /snippets/ create a new file with the following code https //gist github com/cm sl/3f417dbbd944998671ed44fce348c655 adjust the theme code in the new /sections/ collection section layout to render the new /snippet/ file that has the special 'quick buy mode' enabled add the following css https //gist github com/cm sl/29f2adf01ec0e522479a55fe59fc3fad to your code to enable quick buy mode, within shopify, go to products and click collections and then edit the collection page you wish to apply this to from the theme template section, simply choose 'quick buy' from the list of options and click save important to note if you apply the new 'quick buy mode' to your collection pages, this will also take effect for logged out customers also if you are looking to customise the behaviour of how this works, we recommend engaging a shopify expert to assist no configurations applicable product customisations if you sell products that require "customisations" such as custom text or any other unique requirements, it is possible to support these via sparklayer's more advanced javascript sdk docid 315unbm85 fwnh6fu9kkk option this allows your b2b customers to add customised text to products within their order and the information is sent through to your ecommerce platform when an order is placed please note this is an advanced configuration of sparklayer and will require a developer to implement on a store that requires this feature please refer to our javascript sdk docid 315unbm85 fwnh6fu9kkk for full details 1 click ordering (product bundles) it's possible to create special buttons on your store that allow customers to add collections of products to an order, rather than having to add them all individually these are called "spark buttons" spark buttons work by adding special snippets of javascript to your website that specify which skus and quantities will be added when a user clicks the button these buttons can work anywhere on your website such as the homepage or special landing pages live demo test this out for yourself on our b2b demo store https //b2b demo store usd myshopify com/pages/b2b bundles !note you'll need to be signed in first to test this feature example use cases spark buttons are useful if you're looking to direct b2b customers to purchase a specific range of products examples could include starter packs for brand new customers, e g your best selling products a curated range of products, e g a new season range a product bundle, e g the top 10 products from a certain category once the customer adds the items to the order, they can then make changes just as they would do normally, e g editing quantities, removing items, etc enabling spark buttons spark buttons can be added anywhere on your store using the sample code template below in this example, we've include two buttons with each button adding different product skus and different quantities view sample code add to order add to order when using spark buttons, please note the following item details inserting multiple buttons you can insert multiple spark buttons on a single page providing that unique queryselectors are used for example, in our code sample above, we've included two buttons data add to cart and data add to cart2 product skus for spark buttons to successfully add products, the product sku must also exist within your shopify store product quantities you can specify the product quantity to add by using absolutequantity if the product sku has pack sizes configured, the quantity will automatically be rounded up please note using this feature requires custom javascript coding and you may want to engage a shopify expert to assist our team may not be able to directly advise on the best approach due to the custom nature of this feature b2b only products (hiding products) if you're running both b2b and dtc within the same shopify store , there may be a range of products that you want to only show and be purchasable to logged in b2b customers perhaps they can only be purchased in high volumes or they are exclusive to your b2b customers the good news is there are ways to do this and we've detailed more in our guides below learn more in shopify customisations docid\ ddiv5tdancaywtoj0vyb7 no customisations applicable updating the "add to cart" button text if you'd prefer to update the text shown on the "add to cart" buttons on the frontend interfaces docid\ ccz1vnh0o6d 722w35xpa , you can modify the default language strings to do so updating language and text you can update the default text by adding code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp languages & international docid\ klrs7wtxn3wncdy8z5zvu about how to update text on sparklayer / add the below code into the sparklayer core script / / please refer to our help guide on how to do this / translations { en { "product card add to order cta text" "add ({price})", "pdp add to order cta text" "add to cart ({price})" } }, / end of code /