Cart Threshold Bar
This article explains how to configure a Cart Threshold Bar. A Cart Threshold Bar refers to the bar displayed in a customer’s cart with various thresholds. The bar progresses with the value of the products contained in the customer’s cart. The thresholds can trigger free shipping, gifts or discounts. These are all configured as Cart Discounts in commercetools starting with threshold- in the key field.
It is possible to configure a single Cart Discount or multiple. Here is an example of a Cart Threshold Bar with only one Cart Discount configured.
See Create a Cart Discount and Discounts.
Naming Conventions
The discounts that are to be used in a Cart Threshold Bar must use a strict naming convention, they must all start with: threshold- A free shipping discount could thus look like this threshold-shipping-012026
The shop treats a cart discount as a threshold when its key starts with threshold (not the Name field). That prefix check also matches keys such as thresholdGift. Prefer the hyphenated convention used in this article (threshold-shipping-012026, threshold-gift-…) so keys stay readable and consistent. Misspelt keys such as treshold-… never appear on the bar. Several discounts with the same cart-total threshold are grouped (for example multiple gifts at €40).
The way a discount is configured that is used in a Cart Threshold can be quite flexible, see the Cart Discount documentation for more information on configuring the individual discounts: Create a Cart Discount.
Configuration
Things to keep in mind when configuring discounts that will be used in a Cart Threshold:
Store
If your tenant is shared between multiple storefronts it is crucial to configure the Store field, if you do not do this, then the discounts will be applied throughout the whole tenant and thus affect all its storefronts. In each individual Discount you must select each store where it will be active in. This in turn enables you to set store specific thresholds.
Rank
Carefully consider how the discounts interact with each other, by entering a value in the Rank (sortOrder) field, as well as indicating if further discounts can be applied afterwards. Keeping in mind how the discount combines with other discounts, determine if any conditions should be configured. See Discounts.
Effects
You can configure any number of effects, for instance, excluding specific items.
Conditions
Each Discount used in a Cart Threshold Bar must contain a Cart Total condition, in each currency that is in use on the storefront.
It is a good idea to thoroughly test the Cart Threshold in combination with all currently active Cart discounts, discount codes or any other special offers or product configurations. The shop reads >= / > (and a cartTotal form) to place the tick on the bar.
Gift
A Gift for the Cart Threshold Bar functionality is created in commercetools as a Cart discount. You must select the Gift line item option.
Naming Conventions
A gift that is to be used in a Cart Threshold Bar must also use a strict naming convention, it must start with: threshold- A gift could thus look like this threshold-gift-omega3-160426
Effects
There are two required and two optional fields for a Gift cart discount effect configuration.
Product ID
This refers to the ID in the URL in commercetools. Not to be confused with the product key field of a product.
Variant ID
This refers to the Variant ID of the product variant that you want to target as the gift.
Supply & Distribution Channel
You do not need to configure these fields as they are already configured on Variant level of the product in commercetools. The shop resolves the gift from product id + variant id and uses the variant’s shop image and price.
Conditions
Just like any Discount used in a Cart Threshold Bar, a Gift must also contain a Cart Total condition, for each currency that is in use on the storefront. For Gifts specifically there must also always be the following condition configured: That is, a condition must exist with the Custom field set to Discount Offer Keys that references the key of itself (the discount you are currently editing).
This is required to be able to differentiate between the two discounts in the cart, otherwise both discounts will be added, without a prompt. When multiple gifts are configured, and the threshold is reached in the cart, a bar is displayed, prompting the user to make a selection. Clicking this prompt will open a side pane, where a choice can be made of the configured gifts.
That is how the shop sets requiresSelection. Without it, commercetools can add every matching gift at once. With it, the cart shows a prompt and a side sheet / slider to pick one gift. The bar also appears in the cart drawer gift slider when the gift threshold is met, and in checkout when gift selection is enabled. Relative stops show “n% discount”, shipping shows free shipping, gifts show free gift, absolute shows an amount.