Custom Slots ("Targets")
Custom Slots (or "Targets") allow you to enhance a range of the SparkLayer Frontend Interfaces by adding your own custom code in predefined areas.
It's a great way to further enhance your B2B customer experience and use-cases could include any of the following:
Use-Case | Details |
|---|---|
Promotional content | Adding promotional content to the My Account Interface that customers see as soon as they login (e.g. announcing a new product line) |
Adding links | Adding links in the My Cart Interface area that your B2B customers can access (e.g. downloadable CSV templates) |
Upsell content | Adding upsells and promotional content when a customer completes an order (e.g. asking for a rating) |
In addition to this, you could also set up more advanced content that varies based on specific rules:
Use-Case | Details |
|---|---|
Customer-specific | Based on who the customer is and which customer group they belong to, show different content (e.g. customer group VIP, show a promotional message) |
Order-specific | Based on the order contents or order total, show a message (e.g. if the order is under $100, encourage them to add more products) |
Custom Slots allow a lot of flexibility in how they're used and it's really up to you how creative you can be!
Custom Slots work by adding special template slots to your website that are then displayed in specific locations of the SparkLayer Frontend Interfaces. You can learn how to begin using them under "Getting Started" below.
The "My Account" template slot is displayed at the top of the My Account Interface when a B2B customer signs in.
The "My Order" template slot is displayed at the top of the My Cart Interface when a B2B customer signs in.
The "Order Complete" template slot is displayed when a B2B customer customer completes an order.
To begin using Custom Slots, you'll need to add some specific code to the SparkLayer Core Script within the display section.
Based on the locations you intend to add to your website, you can include the below code in your SparkLayer Core Script.
Name | Details |
|---|---|
spark-slot-my-account | This enables the "My Account" slot |
spark-slot-my-cart | This enables the "My Order" slot |
spark-slot-order-complete | This enables the "Order Complete" slot |
Once you've adjusted the SparkLayer Core Script with the above changes, you can then proceed to add custom content for each of the locations.
To get started, you simply need to add a template element within your website code, referencing the id of one of the slot locations above.
You could include these template elements within the main template file of your website (e.g. layout/theme.liquid for Shopify), or any other appropriate location that is easy for you to access and update.
The template markup can be very simple with some basic text or you could extend this with more extensive HTML, CSS, images, and other elements. It is really up to you!
Please note It's important to note the following:
- Any code added within the template elements will show within the specific SparkLayer interface (e.g. the spark-slot-my-cart template element will show in the My Cart Interface.
- These template elements will not be shown anywhere else on your website and will be invisible to logged out customers.
To help you get started, we've included some examples you could use.
Come up with an interesting use-case? We've love to know how you're using custom slots. Let our team know by emailing [email protected]