Product Display
By default, the Product Detail Interface 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.
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 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 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.
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 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 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 our guide here.
By default, the Product Detail Interface 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 CSS overwrites.
By default, the Product Detail Interface 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 CSS overwrites.
You can also modify the term for SKU by editing the SparkLayer default language strings.
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
Looking to display live stock levels? Please refer to our full guide here.
It's possible to adjust the Product Card Interface 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.
It's possible to adjust the Product Card Interface 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.
It's possible to adjust the Product Card Interface 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.
It's possible to adjust the Product Card Interface 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.
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.
Within the Product Detail Interface and Product Card Interface, 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. |
Setting up metafields on Shopify To learn more about how to configure metafields on Shopify for SparkLayer, please refer to our guide here
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}] |
Product settings You can learn more about product settings in our full guide here.
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 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, 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
- 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
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.
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 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 for full details.
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!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.
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.
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 our guide here
If you'd prefer to update the text shown on the "Add to Cart" buttons on the Frontend Interfaces, you can modify the default language strings to do so.
