Skip to content
Storefront & productsStorefront widgets

Custom slots (targets)

Steps for

How it works

Your customers see slot content as part of SparkLayer's interfaces, in a fixed place such as the top of My Account. Behind the scenes, each slot has an ID, such as spark-slot-my-account.

You turn on the slots you want, at Storefront,Options (opens in your SparkLayer Dashboard in a new tab) or in your Core Script. Your developer then adds a <template> element with the same ID anywhere in your theme. SparkLayer takes the content of the template and shows it in that slot's place in the interface.

How slot content reaches the storefront

Turn the slot on

In Custom slots on the Storefront Options page, or in showSlots in the Core Script
(this flows forward)

Your theme

Add a template element with the slot's ID
(this flows forward)

SparkLayer interface

Shows the template's content in the slot

You can use slots for things like:

UseExample
Promotional contentA message in the My Account that customers see as soon as they sign in, such as announcing a new product line.
Adding linksLinks in the My Cart, such as downloadable CSV templates.
Order complete contentOffers or promotions when a customer completes an order, such as asking for a rating.

With some extra code in your theme, the content can also change for each customer or order:

UseExample
Customer-specificShow different content depending on who the customer is and which customer group they're in, such as a promotion for the VIP group.
Order-specificShow a message based on the order contents or total, such as encouraging customers to add more products when the order is under $100.

Slot locations

Each slot appears in one place in the interfaces:

SlotWhere it appearsID
My AccountAt the top of the My Account, above Recent Activity.spark-slot-my-account
My OrderAt the top of the My Cart, below the search box and above the products.spark-slot-my-cart
Order CompleteOn the order complete screen, below the Thank you for your order! message.spark-slot-order-complete
Cart Shipping StepOn the Shipping step of the checkout.spark-slot-cart-shipping-step
Cart Payment StepOn the payment (Review & Pay) step of the checkout.spark-slot-cart-payment-step
Purchase Summary HeaderAbove the purchase summary when a customer views a purchase.spark-slot-purchase-summary-header
Purchase Summary FooterBelow the purchase summary when a customer views a purchase.spark-slot-purchase-summary-footer
Cart Line ItemBelow each product line in My Cart.spark-slot-my-cart-line-item

In the My Account interface, you can also choose where the My Account slot sits among the other sections. See Reorder or hide sections.

You can't add a slot anywhere else, or move one. For what else you can change in the widgets, and what needs a developer, see What you can and can't change.

Before you start

Turn on the slots

Turn on each slot you want to use. You don't need code:

  1. Go to Storefront,Options (opens in your SparkLayer Dashboard in a new tab) and open Custom slots.
  2. Click Add slot and choose the slot you want to use. Repeat for each slot.
  3. Click Save and publish. See Storefront options.
Turn on the slots in the Core Script (for developers)

Instead of Storefront options, add showSlots to the display section of your Core Script, listing the IDs of the slots you want to use. This example turns on all 8:

Core Script
display: {
  showSlots: [
    'spark-slot-my-account',
    'spark-slot-my-cart',
    'spark-slot-order-complete',
    'spark-slot-cart-shipping-step',
    'spark-slot-cart-payment-step',
    'spark-slot-purchase-summary-header',
    'spark-slot-purchase-summary-footer',
    'spark-slot-my-cart-line-item',
  ],
},

Add content to a slot

This step is for your developer, or whoever edits your theme's code. For each slot you've turned on, add a <template> element to your theme with the slot's ID as its id, and put your content inside it. For a ready-made styled message, see Examples you can use.

Example templates for each slot
<!-- Example code for the My Account slot -->
<template id="spark-slot-my-account">
   <div class="my-content">
       Content here will show in the My Account section.
   </div>
</template>

<!-- Example code for the My Cart slot -->
<template id="spark-slot-my-cart">
   <div class="my-content">
       Content here will show in the My Order section.
   </div>
</template>

<!-- Example code for the My Order slot -->
<template id="spark-slot-order-complete">
   <div class="my-content">
       Content here will show in the Order Complete section.
   </div>
</template>

<!-- Example code for the Cart Shipping Step slot -->
<template id="spark-slot-cart-shipping-step">
   <div class="my-content">
       Content here will show in the Cart Shipping Step section.
   </div>
</template>

<!-- Example code for the Cart Payment Step slot -->
<template id="spark-slot-cart-payment-step">
   <div class="my-content">
       Content here will show in the Cart Payment Step section.
   </div>
</template>

<!-- Example code for the Purchase Summary Header slot -->
<template id="spark-slot-purchase-summary-header">
   <div class="my-content">
       Content here will show in the Purchase Summary Header section.
   </div>
</template>

<!-- Example code for the Purchase Summary Footer slot -->
<template id="spark-slot-purchase-summary-footer">
   <div class="my-content">
       Content here will show in the Purchase Summary Footer section.
   </div>
</template>

Put the templates in your theme's main layout file (for example layout/theme.liquid on Shopify), or anywhere else that's easy to find and update.

The content can be a line of text, or full HTML with CSS, images and other elements. Only your B2B customers see it:

  • Content in a template only shows in its slot. For example, the spark-slot-my-cart template shows in the My Cart.
  • Templates aren't shown anywhere else on your store, and customers who aren't signed in never see them.

Only change your own slot content

You can only change the elements inside your own slot templates. Don't try to change SparkLayer's own interface elements (the DOM): their structure and selectors change regularly, so any code that relies on them will stop working.

Examples you can use

These examples are for your developer, ready to copy and adapt. The Liquid examples (using {{ }} and {% %}) are for Shopify.

Found a good use for custom slots? Tell our team at product@sparklayer.io.

Was this page helpful?

Last updated

Product price

Show signed-in B2B customers their own price or the RRP anywhere on your product or collection pages with the SparkLayer product price snippet.

B2B Catalogs

Show or hide Shopify products for B2B and retail customers with tags, using the free B2B Catalogs app. Install it, enable it on a theme and see how it works.