How products are shown

How it works

Two interfaces show your products to signed-in B2B customers:

• The product detail interface loads on product pages. In your theme's code it's the <spark-pdp> tag.
• The product card interface loads wherever a product card appears, such as collection pages. In your theme's code it's the <spark-product-card> tag.

Each option on this page starts with what customers see, then how to set it up. Most of the set-up is for whoever edits your theme. There are 4 ways to change what the interfaces show:

If someone else looks after your theme, use Options at a glance to tell them what you'd like changed. The code examples on this page use {{ product.id }}, which is Shopify's variable for the product ID. On other platforms, replace it with your platform's equivalent.

Options at a glance

Change the product page layout

These options change how customers see a product on its product page.

Show every product as a table

By default, a product with a single variant shows customers a quantity selector and an Add to Order button. Table-view mode shows every product in the table layout used for multi-variant products, with Item, Price, Stock and Qty columns, even if it only has one variant.

Your developer adds mode-table-only to the product detail tag:

<spark-pdp parent-id="{{ product.id }}" mode-table-only></spark-pdp>

Show all variants in one table ("All Variants" mode)

If your products have more than one variant option (for example colour and size), "All Variants" mode lists every variant in one table. Customers see this instead of the standard drop-down menus.

Your developer adds mode-all-variants to the product detail tag on your product pages:

<spark-pdp parent-id="{{ product.id }}" mode-all-variants></spark-pdp>

The table lists variants in the same order as your product catalogue. In Shopify, that's the order of the options and values in the product's Variants section.

All Variants mode adds a column for each option, which can make the table too wide for phones. To hide columns on mobile, list them in hide-on-mobile:

<spark-pdp parent-id="{{ product.id }}" hide-on-mobile="colour,size" mode-all-variants></spark-pdp>

Show variants as a matrix ("Matrix" mode)

If your products have more than one variant option, the product matrix interface shows them to customers as a grid. Customers can then add many variants to an order quickly. You can use it anywhere products appear on your site.

Your developer adds the product matrix tag to your product pages:

<spark-product-matrix parent-id="{{ product.id }}"></spark-product-matrix>

To show the restock date in the matrix, they add show-restock-date:

<spark-product-matrix parent-id="{{ product.id }}" show-restock-date></spark-product-matrix>

See Product matrix for how it works and how to set it up.

Hide the image in the table view

The product detail table shows customers a thumbnail of each variant. To hide the image, you or your developer add this to your custom CSS:

<style>
:root {
    /* Default */
    --spark-pdp-image: table-cell;

    /* Add this to hide image */
    --spark-pdp-image: none;
}
</style>

Show or hide product details on product pages

These options change which product details customers see on product pages.

Product code (SKU)

The product detail interface shows customers the product code (SKU), labelled Product Code, for single-variant and multi-variant products. To hide the SKU, you or your developer add this to your custom CSS:

<style>
:root {
    /* Default */
    --spark-pdp-sku: block;

    /* Add this to hide the SKU */
    --spark-pdp-sku: none;
}
</style>

To change the Product Code label without code, add a translation override for pdp.product-code at Storefront,Options,Translation overrides (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab..

translations: {
  en: {
    "pdp.product-code": "Product Code",
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "pdp.product-code": "Product Code",
      }
    },
  };
</script>

Barcode (ISBN, UPC, GTIN)

If your products have barcodes, SparkLayer can show customers them next to the product code, labelled Barcode. It uses the barcode stored against each variant in your eCommerce platform (in Shopify, the Barcode (ISBN, UPC, GTIN, etc.) field).

To show barcodes on product pages, your developer adds show-barcode to the product detail tag. To show them on collection pages too, they add it to the product card tag as well (see Show the barcode on product cards).

<spark-pdp show-barcode parent-id="{{ product.id }}"></spark-pdp>

To change the Barcode label without code, add a translation override for global.product.barcode at Storefront,Options,Translation overrides (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab..

translations: {
  en: {
    "global.product.barcode": "Barcode",
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "global.product.barcode": "Barcode",
      }
    },
  };
</script>

Stock levels

To show live stock levels, pre-orders and restock dates, see Stock display.

Customise product cards

These settings change what customers see on the product card interface, everywhere it appears. Each one is a setting your developer adds to the product card tag.

Show stock status

Shows customers the stock status under the Add button, for example In stock with 100+ available.

<spark-product-card show-stock parent-id="{{ product.id }}"></spark-product-card>

Show the product code (SKU)

Shows customers Product Code with the SKU under the Add button.

<spark-product-card show-sku parent-id="{{ product.id }}"></spark-product-card>

Show the barcode

Shows customers Barcode with the variant's barcode under the Add button.

<spark-product-card show-barcode parent-id="{{ product.id }}"></spark-product-card>

Hide variant drop-downs

Hides the drop-down menu for one or more variant options. For example, if a product's only Size option has one value, you might not want to show customers a Size drop-down. Replace Size, Colour with the option names from your platform:

<spark-product-card hide-dropdown="Size, Colour" parent-id="{{ product.id }}"></spark-product-card>

Hide the price on the Add button

By default, customers see the total price on the product card button, for example Add (US$34.50). The text comes from the product-card.add-to-order.cta-text translation, where {price} is the total.

To show just Add, add a translation override for product-card.add-to-order.cta-text at Storefront,Options,Translation overrides (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab. with the text Add. You don't need code.

translations: {
  en: {
     "product-card.add-to-order.cta-text":"Add ({price})",
 }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
         "product-card.add-to-order.cta-text":"Add ({price})",
     }
    },
  };
</script>

Hide variants or make them unavailable

In the product detail and product card interfaces, you can apply rules to specific variants:

Unavailable also shows, more often, when the customer's price list has no price for the variant. See Why a product shows Unavailable. To hide a product from your theme's collection and product pages as well as SparkLayer's interfaces, see What hides what. To show "Price on application" instead, see Show "price on application".

Both rules use the sparklayer.settings metafield, a JSON field stored against the variant. Product rules per customer group explains all the settings it can hold.

1. Make sure the field exists. On Shopify, go to Integrations,Platform (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Integrations › Platform to do this now, whichever platform you're on. Opens in a new tab. and, in the Metafields card, click Configure next to SparkLayer metafields. On other platforms, see the developer docs.
2. In the form below, enter the customer group's handle (base for all B2B customers) and choose No under Show the product or Can be ordered. It writes the value for you.
3. Click Copy, open the variant in your platform's admin, paste the value into the sparklayer.settings field and save.

Let customers save favourites

B2B customers can save products for later with a heart icon (Add to favourites). It appears next to the Add to cart button in the product detail interface, and on product cards on collection pages. Saved products are listed in a Favourites section in My Account, where customers can add them to the cart. See Favourites.

Favourites are on by default. To turn them off:

1. Go to Storefront,Options (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options to do this now, whichever platform you're on. Opens in a new tab..
2. Open My Account and turn off Favourites lists.
3. Click Save and publish.

Turn on quick buy mode

Quick buy mode shows customers the products on a collection page as table rows. Each row has the product image, name, price, variant drop-downs, a quantity selector and an Add button. Customers can build an order without opening each product page.

How much work this takes depends on how your store is set up. Our team can advise on the approach, but may not be able to make the changes on your store, so we recommend working with a developer.

Your developer adds mode-quick-buy to the product card tag on any collection page:

<spark-product-card mode-quick-buy parent-id="{{ product.id }}"></spark-product-card>

Set up quick buy mode on Shopify

Product customisations

If you sell products that customers personalise, for example with custom text, SparkLayer can capture those details. Customers add their custom text to products in their order, and it's sent to your eCommerce platform with the order. In the cart, a line with customisations shows Customizations active, and hovering over it shows the details.

This is an advanced setup that needs a developer, using SparkLayer's JavaScript SDK. See the JavaScript SDK in the developer docs.

Add 1-click ordering buttons (Spark Buttons)

Spark Buttons let customers add a set of products to their order in one click, instead of one at a time. You can put them anywhere on your store, such as the homepage or a landing page.

Try them on our B2B demo store (opens in a new tab). You'll need to sign in first.

Use Spark Buttons to point B2B customers to a specific range, for example:

• A starter pack for new customers, such as your best-selling products
• A curated range, such as a new season's products
• A bundle, such as the top 10 products from a category

After the products are added, customers can change the order as normal, for example by editing quantities or removing items.

Add a Spark Button

Each button is a short piece of JavaScript that lists the SKUs and quantities to add. Spark Buttons need custom JavaScript, so you may want a Shopify expert to help. Because each setup is custom, our team may not be able to advise on the best approach.

Your developer adds the code wherever you want the buttons to appear.

<!-- Example Spark Button 1 -->
<a href="#" data-add-to-cart="">Add to order</a> 

<script>
// <![CDATA[
    document.querySelector('[data-add-to-cart]').addEventListener('click', function () {
    const products = {
    products: [
        {
            sku: 'SKU-123',
            absoluteQuantity: 5,
        },
        {
            sku: 'SKU-789',
            absoluteQuantity: 5,
        },
    ],
  };
  window.spark.updateCart(products);
});
// ]]>
</script>

<!-- Example Spark Button 2 -->
<a href="#" data-add-to-cart-2="">Add to order</a> 

<script>
// <![CDATA[
    document.querySelector('[data-add-to-cart-2]').addEventListener('click', function () {
    const products = {
    products: [
        {
            sku: 'SKU-ABC',
            absoluteQuantity: 10,
        },
        {
            sku: 'SKU-XYZ',
            absoluteQuantity: 10,
        },
    ],
  };
  window.spark.updateCart(products);
});
// ]]>
</script>

Show products to B2B customers only

If you sell to retail (DTC) and B2B customers from the same store, you may have products that only signed-in B2B customers should see and buy. For example, products sold in large volumes, or B2B exclusives.

Change the "Add to Cart" button text

To change the text customers see on the add buttons in the frontend interfaces, add translation overrides for these keys at Storefront,Options,Translation overrides (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab.. You don't need code. In the text, {price} is replaced with the total price.

translations: {
  en: {
    "product-card.add-to-order.cta-text": "Add ({price})",
    "pdp.add-to-order.cta-text": "Add to Cart ({price})"
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "product-card.add-to-order.cta-text": "Add ({price})",
        "pdp.add-to-order.cta-text": "Add to Cart ({price})"
      }
    },
  };
</script>

FAQs