# How products are shown

URL: https://docs.sparklayer.io/help/storefront/product-display

Change how B2B customers see products: table and variant views, SKUs and barcodes, hidden variants, quick buy mode, favourites and 1-click ordering buttons.

> **Quick summary**
>
> - You can change how B2B customers see products in the [product detail](https://docs.sparklayer.io/help/storefront/interfaces/product-detail.md) and [product card](https://docs.sparklayer.io/help/storefront/interfaces/product-card.md) interfaces: layout, variant views, SKUs, barcodes, stock and button text.
> - Most options are a small change to your theme's code or [custom CSS](https://docs.sparklayer.io/help/storefront/customising-design.md), usually made by your developer or agency. Hiding variants uses a product [metafield](https://docs.sparklayer.io/help/glossary.md#metafields).
> - Text changes, such as button labels, and turning off favourites need no code: you make them at **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app.
> - Every option is available on every plan. Quick buy mode, product customisations and 1-click ordering buttons need a developer.

## 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:

| Method | What you change | Where |
| --- | --- | --- |
| Tag setting (attribute) | Layout and what's shown, for example `mode-table-only` or `show-sku` | Your theme's code, inside the `<spark-pdp>` or `<spark-product-card>` tag |
| CSS variable | Hide elements, for example the image or SKU | Your [custom CSS](https://docs.sparklayer.io/help/storefront/customising-design.md) |
| Text (translation) | Labels and button text | The [Core Script](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting), or a translation override at **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app (see [Languages and international](https://docs.sparklayer.io/help/storefront/languages-and-international.md)) |
| Metafield | Hide or block specific variants | Your eCommerce platform's product data |

If someone else looks after your theme, use [Options at a glance](#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

| What you want | Interface | How |
| --- | --- | --- |
| Show every product as a table, even with one variant | Product detail | `mode-table-only` |
| Show all variants in one table | Product detail | `mode-all-variants` |
| Show variants in a matrix | Product matrix | `<spark-product-matrix>` |
| Hide the variant image in the table | Product detail | `--spark-pdp-image: none;` |
| Hide the SKU | Product detail | `--spark-pdp-sku: none;` |
| Show the barcode | Product detail, product card | `show-barcode` |
| Show stock status | Product card | `show-stock` |
| Show the SKU | Product card | `show-sku` |
| Hide variant drop-downs | Product card | `hide-dropdown="Size, Colour"` |
| Hide the price on the **Add** button | Product card | Translation `product-card.add-to-order.cta-text` (no code, at **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app) |
| Show products as table rows on collection pages | Product card | `mode-quick-buy` |
| Hide a variant or make it unavailable | Product detail, product card | `sparklayer.settings` metafield |

## 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:

```html
<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:

```html
<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`:

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

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

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

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

See [Product matrix](https://docs.sparklayer.io/help/storefront/interfaces/product-matrix.md) 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](https://docs.sparklayer.io/help/storefront/customising-design.md):

```html
<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](https://docs.sparklayer.io/help/storefront/customising-design.md):

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

**For developers: set the label in the Core Script**

Set it in your Core Script instead (see [Languages and international](https://docs.sparklayer.io/help/storefront/languages-and-international.md)):

```javascript title="Core Script"
translations: {
  en: {
    "pdp.product-code": "Product Code",
  }
},
```

### 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](#show-the-barcode)).

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

**For developers: set the label in the Core Script**

```javascript title="Core Script"
translations: {
  en: {
    "global.product.barcode": "Barcode",
  }
},
```

### Stock levels

To show live stock levels, pre-orders and restock dates, see [Stock display](https://docs.sparklayer.io/help/storefront/stock-display.md).

## Customise product cards

These settings change what customers see on the [product card interface](https://docs.sparklayer.io/help/storefront/interfaces/product-card.md), 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**.

```html
<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.

```html
<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.

```html
<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:

```html
<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** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app with the text `Add`. You don't need code.

**For developers: change it in the Core Script**

Remove `({price})` from the text in your Core Script:

```javascript title="Core Script"
translations: {
  en: {
     "product-card.add-to-order.cta-text":"Add ({price})",
 }
},
```

## Hide variants or make them unavailable

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

| Rule | What customers see |
| --- | --- |
| **Hide specific variants** | The variant doesn't appear in SparkLayer's interfaces. You can hide it from all B2B customers or from specific customer groups. |
| **Make specific variants un-sellable** | The variant appears, but shows **Unavailable** instead of a quantity selector, so it can't be added to an order. |

**Unavailable** also shows, more often, when the customer's price list has no price for the variant. See [Why a product shows Unavailable](https://docs.sparklayer.io/help/pricing/managing-pricing.md#unavailable). To hide a product from your theme's collection and product pages as well as SparkLayer's interfaces, see [What hides what](https://docs.sparklayer.io/help/storefront/product-settings.md#what-hides-what). To show "Price on application" instead, see [Show "price on application"](https://docs.sparklayer.io/help/pricing/managing-pricing.md#price-on-application).

Both rules use the `sparklayer.settings` metafield, a JSON field stored against the variant. [Product rules per customer group](https://docs.sparklayer.io/help/storefront/product-settings.md) explains all the settings it can hold.

1. Make sure the field exists. On Shopify, go to **Integrations > Platform** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/integrations/platform)), or **SparkLayer Wholesale > Integrations > Platform** in the Shopify app and, in the **Metafields** card, click **Configure** next to **SparkLayer metafields**. On other platforms, see the [developer docs](https://docs.sparklayer.io/developers.md).
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.

**Lots of products? Fill them in one table (Shopify):** in your Shopify admin, go to **Products**, tick the products and click **Edit products**. Click **Columns**, tick the SparkLayer field under **Metafields**, type the values and click **Save**. See [Shopify's guide](https://help.shopify.com/en/manual/custom-data/metafields/bulk-edit-metafields).

**Field details, if you add the field by hand**

| Field | Value |
| --- | --- |
| **Custom data type** | Variants (on Shopify, **Settings > Custom data > Variants** ([open in the Shopify admin](https://admin.shopify.com/settings/custom_data/productvariant/metafields))) |
| **Metafield type** | `JSON` |
| **Namespace** | `sparklayer` |
| **Key** | `settings` |
| **Value to hide a variant** | `[{"customer_group":"base","display":false}]` |
| **Value to make a variant un-sellable** | `[{"customer_group":"base","sell":false}]` |

## 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](https://docs.sparklayer.io/help/ordering/favourites.md).

Favourites are on by default. To turn them off:

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.
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:

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

```

### Set up quick buy mode on Shopify

**Shopify only:**

The [Shopify B2B Dawn theme](https://docs.sparklayer.io/help/platforms/shopify/dawn-theme.md) has quick buy mode turned on by default. Your developer can add it to most other Shopify themes:

1. In your theme code, in `/templates/`, duplicate your default collection template.
2. In `/sections/`, duplicate your default collection section.
3. In `/snippets/`, create a new file with [the quick buy snippet code](https://gist.github.com/cm-sl/3f417dbbd944998671ed44fce348c655).
4. Change the new collection section so it renders the new snippet, which has quick buy mode turned on.
5. Add [the quick buy CSS](https://gist.github.com/cm-sl/29f2adf01ec0e522479a55fe59fc3fad) to your theme.
6. In the Shopify admin, go to **Products > Collections** ([open in the Shopify admin](https://admin.shopify.com/collections)) and open the collection you want to change.
7. Under **Theme template**, choose the quick buy template and click **Save**.

Quick buy mode also applies to customers who aren't signed in. To change that, we recommend working with a Shopify expert.

## 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](https://docs.sparklayer.io/developers.md).

## 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](https://b2b-demo-store-usd.myshopify.com/pages/b2b-bundles). 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 code for your developer**

This example has 2 buttons, each adding different SKUs and quantities:

```html
<!-- 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>
```

| Item | Details |
| --- | --- |
| **Several buttons on one page** | Give each button a unique selector. The example above uses `data-add-to-cart` and `data-add-to-cart-2`. |
| **Product SKUs** | Each SKU must exist in your store. |
| **Quantities** | Set the quantity with `absoluteQuantity`. If the SKU has a pack size, the quantity is rounded up to fit it. |

## 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.

**Shopify only:**

On Shopify, use the free [B2B Catalogs](https://docs.sparklayer.io/help/storefront/b2b-catalogs.md) app to mark products as B2B-only or B2C-only. For other ways to do this, see [Shopify customisations](https://docs.sparklayer.io/help/platforms/shopify/customisations.md).

## Change the "Add to Cart" button text

To change the text customers see on the add buttons in the [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md), add translation overrides for these keys at **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app. You don't need code. In the text, `{price}` is replaced with the total price.

**For developers: set the text in the Core Script**

```javascript title="Core Script"
translations: {
  en: {
    "product-card.add-to-order.cta-text": "Add ({price})",
    "pdp.add-to-order.cta-text": "Add to Cart ({price})"
  }
},
```

## FAQs

**Where do I add the tag settings?**

In your theme's code, where the `<spark-pdp>`, `<spark-product-card>` or `<spark-product-matrix>` tag appears. If you're not sure where that is, see the setup guide for each interface under [Storefront widgets](https://docs.sparklayer.io/help/storefront/interfaces.md), or ask your developer.

**Why doesn't the product ID variable work on my platform?**

`{{ product.id }}` is Shopify's variable. On other platforms, replace it with the variable your platform's templates use for the product ID.

**Can I change the text without editing the Core Script?**

Yes. Go to **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app and add a translation override for the text key, such as `pdp.product-code`. See [Storefront options](https://docs.sparklayer.io/help/storefront/storefront-options.md).