# Custom slots (targets)

URL: https://docs.sparklayer.io/help/storefront/interfaces/custom-slots

Add your own messages, promotions and links inside SparkLayer's My Account, My Cart and checkout with custom slots, with ready-made examples to copy.

> **Quick summary**
>
> - Custom slots (also called targets) let you show B2B customers your own messages inside SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md). For example, a promotion at the top of My Account or a message on each cart line.
> - There are 8 slots, covering My Account, My Cart, each cart line, the **Shipping** and **Review & Pay** checkout steps, the order complete screen and the purchase summary.
> - You turn a slot on without code at **Storefront > Options > Custom slots** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Custom slots** in the Shopify app. The content itself is a small block of HTML (a `<template>` element) in your theme, so your developer or agency usually adds it.
> - Slot content only appears inside SparkLayer's interfaces, so only signed-in B2B customers see it. Keep your Core Script up to date at **Storefront > Widgets > Core script version** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets > Core script version** in the Shopify app to get every slot.

## 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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app 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:

1. **Turn the slot on**: In Custom slots on the Storefront Options page, or in showSlots in the Core Script
2. **Your theme**: Add a template element with the slot's ID
3. **SparkLayer interface**: Shows the template's content in the slot

You can use slots for things like:

| Use | Example |
| --- | --- |
| **Promotional content** | A message in the [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md) that customers see as soon as they sign in, such as announcing a new product line. |
| **Adding links** | Links in the [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md), such as downloadable CSV templates. |
| **Order complete content** | Offers or promotions when a customer [completes an order](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md#complete-step), such as asking for a rating. |

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

| Use | Example |
| --- | --- |
| **Customer-specific** | Show different content depending on who the customer is and which [customer group](https://docs.sparklayer.io/help/customers/customer-groups.md) they're in, such as a promotion for the `VIP` group. |
| **Order-specific** | Show 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:

| Slot | Where it appears | ID |
| --- | --- | --- |
| **My Account** | At the top of the [My Account](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md), above **Recent Activity**. | `spark-slot-my-account` |
| **My Order** | At the top of the [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md), below the search box and above the products. | `spark-slot-my-cart` |
| **Order Complete** | On the order complete screen, below the **Thank you for your order!** message. | `spark-slot-order-complete` |
| **Cart Shipping Step** | On the **Shipping** step of the checkout. | `spark-slot-cart-shipping-step` |
| **Cart Payment Step** | On the payment (**Review & Pay**) step of the checkout. | `spark-slot-cart-payment-step` |
| **Purchase Summary Header** | Above the purchase summary when a customer views a purchase. | `spark-slot-purchase-summary-header` |
| **Purchase Summary Footer** | Below the purchase summary when a customer views a purchase. | `spark-slot-purchase-summary-footer` |
| **Cart Line Item** | Below 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](https://docs.sparklayer.io/help/storefront/interfaces/my-account.md#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](https://docs.sparklayer.io/help/storefront/what-you-can-change.md).

## Before you start

- **Edit access to your theme code** (or a developer who has it), to add the slot templates.
- **An up-to-date Core Script**, so every slot on this page is available. Check it at **Storefront > Widgets > Core script version** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets > Core script version** in the Shopify app.
- **A signed-in B2B customer account** to check how your content looks, as slot content isn't shown to anyone else.

## Turn on the slots

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

1. Go to **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app 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](https://docs.sparklayer.io/help/storefront/storefront-options.md#custom-slots).

**Turn on the slots in the Core Script (for developers)**

Instead of Storefront options, add `showSlots` to the `display` section of your [Core Script](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting), listing the IDs of the slots you want to use. This example turns on all 8:

```javascript title="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](#examples-you-can-use).

**Example templates for each slot**

```html
<!-- 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](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md).
- 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.

**Show a custom HTML message with coloured backgrounds**

```html
    <!-- Template element for My Order Interface-->

    <template id="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>
        <div class="b2b-message-cart">
          🎉 For this week only, get an extra 10% off your B2B order! 🎉
        </div>

    </template>

    <!-- Template element for My Account Interface-->

    <template id="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>
        <div class="b2b-message-account">
          👋 Welcome back, Claire! Don't forget to check our <a href="link-here">latest special offers here</a>!
        </div>

    </template>

    <!-- Template element for Order Complete -->

    <template id="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>
        <div class="b2b-message-complete">
          😊 Whilst you're here, would you be able to <a href="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**

This shows a bordered message with a soft gradient background and a "NEW!" label, for example "Show content here for your B2B customers, such as new promotions".

```html
  <template id="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>

        <div class="b2b-message-account">
          <span>NEW!</span>
          Show custom content here for specific customers, such as new promotions 🚀 
        </div>

    </template>

   <template id="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>
        <div class="b2b-message-account">
          <span>NEW!</span>
          Show content to your B2B customers such as promoting free shipping 🚀 
        </div>

    </template>

  <template id="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>
        <div class="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-->

    <template id="spark-slot-my-cart">
       <spark-message 
          type="success"
          title="Title here"
          message="Message here">
        </spark-message>    
    </template>

    <!-- Template element for My Account Interface-->

    <template id="spark-slot-my-account">
       <spark-message 
          type="info"
          title="Title here"
          message="Message here">
        </spark-message>   
    </template>

    <!-- Template element for Order Complete -->

    <template id="spark-slot-order-complete">
       <spark-message 
          type="warn"
          title="Title here"
          message="Message here">
        </spark-message>         
    </template>

```

**Show a message that shows customer metafields**

```html
    <!-- 

   Replace custom.field_name with the metafield namespace and key

    -->

    <!-- Template element for My Account Interface-->
    {% if customer.metafields.custom.field_name %}
       <template id="spark-slot-my-account">
          Your message here.
          You can output a metafield like this
          {{ customer.metafields.custom.field_name }}
      </template>
    {%  endif %}
```

**Show a message that includes the customer's name**

```html

    <!-- Template element for My Order Interface-->
    <template id="spark-slot-my-cart">
       Hello {{ customer.name }}, here's a message for you.
    </template>

    <!-- Template element for My Account Interface-->
    <template id="spark-slot-my-account">
      Hello {{ customer.name }}, here's a message for you.
    </template>

    <!-- Template element for Order Complete -->
    <template id="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)**

**Shopify only:**

```html
<template id="spark-slot-my-cart">

{% for tag in customer.tags %}

 {% if tag == "b2b-group-1" %}
   As a Group 1 customer, you qualify for special B2B pricing!
 {% elsif tag == "b2b-group-2" %}
   As a Group 2 customer, you qualify for special B2B pricing!
  {% else %}  
   Message to show for regular B2B customers
 {% endif %} 

{% endfor %}

</template>
```

**Show a message that includes text and an image**

```html
  <!-- Template element for My Order Interface-->
    <template id="spark-slot-my-cart">
      <p>Here is a message</p>
      <img src="link-to-image" style="max-width: 100%">
    </template>

    <!-- Template element for My Account Interface-->
    <template id="spark-slot-my-account">
      <p>Here is a message</p>
      <img src="link-to-image" style="max-width: 100%">
    </template>

    <!-- Template element for Order Complete -->
    <template id="spark-slot-order-complete">
      <p>Here is a message</p>
      <img src="link-to-image" style="max-width: 100%">
    </template>
```

**Show a message at a cart line-item level**

This shows a message under a product line in My Cart that refers to the product, for example "MUG-CAT - example-ceramic-mug requires special handling." It uses the product's SKU and slug.

For slots that need different messages or behaviour on each line, use web components to keep each line's state separate, as in the example below.

This slot can read these `data-` attributes from its parent element, using `this.parentNode.dataset`:

- `data-sku`
- `data-slug`
- `data-spark-id`
- `data-platform-id`
- `data-item-key`

```html
  <script>
        class LineItemInfo extends HTMLElement {
          connectedCallback() {
            let data = this.parentNode.dataset;
            this.innerHTML = `<p class="line-item-info-messsage">${data.sku} - ${data.slug} requires special handling.</p>`;
          }
        }
        customElements.define('line-item-info', LineItemInfo);
      </script>
      <template id="spark-slot-my-cart-line-item">
        <style>
          .line-item-info-messsage {
              background: #f5f5f5;
              padding: 8px;
              border-radius: 4px;
          }
        </style>
        <line-item-info></line-item-info>
      </template>
```

As with every slot, only change elements inside your own template, not SparkLayer's own elements.

Found a good use for custom slots? Tell our team at [product@sparklayer.io](mailto:product@sparklayer.io).