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 Order 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!
How it works
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.
My Account
The "My Account" template slot is displayed at the top of the My Account Interface when a B2B customer signs in.
My Order
The "My Order" template slot is displayed at the top of the My Order Interface when a B2B customer signs in.
Order Complete
The "Order Complete" template slot is displayed when a B2B customer customer completes an order.
Getting Started
Configuring your store
To begin using Custom Slots, you'll need to add some specific code to the SparkLayer Core Script within the display section.
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.
HTML
<!-- Example code for the My Account slot --><templateid="spark-slot-my-account"><divclass="my-content">
Content here will show in the My Account.
</div></template><!-- Example code for the My Cart slot --><templateid="spark-slot-my-cart"><divclass="my-content">
Content here will show in the My Order.
</div></template><!-- Example code for the My Order slot --><templateid="spark-slot-order-complete"><divclass="my-content">
Content here will show in the Order Complete section.
</div></template>
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 Order Interface.
These template elements will not be shown anywhere else on your website and will be invisible to logged out customers.
Examples you can use
To help you get started, we've included some examples you could use.
Show a custom HTML message with coloured backgrounds
HTML
<!-- Template element for My Order Interface--><templateid="spark-slot-my-cart"><style>.b2b-message-cart{background: #3875F3;color: #fff;padding: 12px;border-radius: 8px;text-align: center
}.b2b-message-cart a{color: #fff;text-decoration: underline
}</style><divclass="b2b-message-cart">
🎉 For this week only, get an extra 10% off your B2B order! 🎉
</div></template><!-- Template element for My Account Interface--><templateid="spark-slot-my-account"><style>.b2b-message-account{background: #FF4CBF;color: #fff;padding: 12px;border-radius: 8px;text-align: center
}.b2b-message-account a{color: #fff;text-decoration: underline
}</style><divclass="b2b-message-account">
👋 Welcome back, Claire! Don't forget to check our <ahref="link-here">latest special offers here</a>!
</div></template><!-- Template element for Order Complete --><templateid="spark-slot-order-complete"><style>.b2b-message-complete{background: #FF4CBF;color: #fff;padding: 12px;border-radius: 8px;text-align: center
}.b2b-message-complete a{color: #fff;text-decoration: underline
}</style><divclass="b2b-message-complete">
😊 Whilst you're here, would you be able to <ahref="link-here">leave feedback on your B2B experience</a>? It would really help us improve our website!
</div></template>
Show a custom HTML message with gradient coloured backgrounds
HTML
<templateid="spark-slot-my-account"><style>.b2b-message-account{position: relative;overflow: hidden;padding: 1em;border: 2px solid #a68eee;border-radius: 6px;text-align: center;display: flex;column-gap: 8px;color: #444;text-align: left
}.b2b-message-account:after{background:linear-gradient(136deg, #54ff96 0%, #80c0ff 48.78%, #f860ff 100%);pointer-events: none;position: absolute;top: 0;left: 0;width: 100%;background-position: 50%;background-repeat: no-repeat;content:"";background-size: auto 100%;z-index: 1;background-size: 800px;height: 60px;filter:blur(100px);opacity: 0.9;}.b2b-message-account a{color: #5b36f5;text-decoration: underline
}.b2b-message-account span{background:linear-gradient(54deg, #5B36F5 5.48%, #FF4CBF 44.27%, #3875F3 75.97%, #5B36F5 94.09%);display: inline-flex;text-transform: uppercase;font-size: 11px;border-radius: 4px;align-items: center;padding: 0 6px;color: #fff;font-weight: 600;}</style><divclass="b2b-message-account"><span>NEW!</span>
Show custom content here for specific customers, such as new promotions 🚀
</div></template><templateid="spark-slot-my-cart"><style>.b2b-message-account{position: relative;overflow: hidden;padding: 1em;border: 2px solid #a68eee;border-radius: 6px;text-align: center;display: flex;column-gap: 8px;color: #444;margin: -6px 0 0 ;text-align: left
}.b2b-message-account:after{background:linear-gradient(136deg, #54ff96 0%, #80c0ff 48.78%, #f860ff 100%);pointer-events: none;position: absolute;top: 0;left: 0;width: 100%;background-position: 50%;background-repeat: no-repeat;content:"";background-size: auto 100%;z-index: 1;background-size: 800px;height: 60px;filter:blur(100px);opacity: 0.9;}.b2b-message-account a{color: #5b36f5;text-decoration: underline
}.b2b-message-account span{background:linear-gradient(54deg, #5B36F5 5.48%, #FF4CBF 44.27%, #3875F3 75.97%, #5B36F5 94.09%);display: inline-flex;text-transform: uppercase;font-size: 11px;border-radius: 4px;align-items: center;padding: 0 6px;color: #fff;font-weight: 600;text-align: left
}</style><divclass="b2b-message-account"><span>NEW!</span>
Show content to your B2B customers such as promoting free shipping 🚀
</div></template><templateid="spark-slot-order-complete"><style>.b2b-message-account{position: relative;overflow: hidden;padding: 1em;border: 2px solid #a68eee;border-radius: 6px;text-align: center;display: flex;column-gap: 8px;color: #444;text-align: left
}.b2b-message-account:after{background:linear-gradient(136deg, #54ff96 0%, #80c0ff 48.78%, #f860ff 100%);pointer-events: none;position: absolute;top: 0;left: 0;width: 100%;background-position: 50%;background-repeat: no-repeat;content:"";background-size: auto 100%;z-index: 1;background-size: 800px;height: 60px;filter:blur(100px);opacity: 0.9;}.b2b-message-account a{color: #5b36f5;text-decoration: underline
}.b2b-message-account span{background:linear-gradient(54deg, #5B36F5 5.48%, #FF4CBF 44.27%, #3875F3 75.97%, #5B36F5 94.09%);display: inline-flex;text-transform: uppercase;font-size: 11px;border-radius: 4px;align-items: center;padding: 0 6px;color: #fff;font-weight: 600;}</style><divclass="b2b-message-account"><span>NEW!</span>
When an order is placed, you can include further content here.
</div></template>
Show a message using ready-made SparkLayer components (e.g. "success")
HTML
<!--
You can change the message type using the following
type="success"
type="info"
type="warn"
type="error"
--><!-- Template element for My Order Interface--><templateid="spark-slot-my-cart"><spark-messagetype="success"title="Title here"message="Message here"></spark-message></template><!-- Template element for My Account Interface--><templateid="spark-slot-my-account"><spark-messagetype="info"title="Title here"message="Message here"></spark-message></template><!-- Template element for Order Complete --><templateid="spark-slot-order-complete"><spark-messagetype="warn"title="Title here"message="Message here"></spark-message></template>
Show a message that includes the customer's name
HTML
<!-- Template element for My Order Interface--><templateid="spark-slot-my-cart">
Hello {{ customer.name }}, here's a message for you.
</template><!-- Template element for My Account Interface--><templateid="spark-slot-my-account">
Hello {{ customer.name }}, here's a message for you.
</template><!-- Template element for Order Complete --><templateid="spark-slot-order-complete">
Hello {{ customer.name }}, here's a message for you.
</template>
Show a message based on the Shopify tag assigned to a customer (e.g. b2b-vip)
HTML
<templateid="spark-slot-my-cart">
{% if customer.tags contains 'b2b-vip' %}
As a VIP customer, you qualify for special B2B pricing!
{% else %}
Message to show for regular B2B customers
{% endif %}
</template>
Show a message that includes text and an image
HTML
<!-- Template element for My Order Interface--><templateid="spark-slot-my-cart"><p>Here is a message</p><imgsrc="link-to-image"style="max-width: 100%"></template><!-- Template element for My Account Interface--><templateid="spark-slot-my-account"><p>Here is a message</p><imgsrc="link-to-image"style="max-width: 100%"></template><!-- Template element for Order Complete --><templateid="spark-slot-order-complete"><p>Here is a message</p><imgsrc="link-to-image"style="max-width: 100%"></template>
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]