Tier Images

Configure product variant tier images in commercetools. This article explains how to add and reorder a product variant tier images in commercetools.

Website Behavior

Tier images display different quantities of a product depending on the quantity selected in the buy box on the Product Display Page (PDP).

The various tier images must first be created by the design department for the desired quantities of the product. Tier images are not required and can be configured at any point after the product has been created. If the Tier images are not configured, the primary image will be displayed regardless of the quantity selected by the customer in the buybox.

Primary images and Tier images are uploaded in the same spot and appear alongside each other in commercetools. The primary image refers to the main image of a product which will be shown as the default on the PDP and shows up on product tiles in searches and sliders.

Tier Images only appear on the PDP dependent on the quantity selection of the buy box, the tier image with the highest quantity designation will be displayed on all subsequent quantities that exceed the amount of tier images. Extra gallery shots belong in Hygraph. The master variant image (after filters) is what product tiles, search, PLPs, and sliders use. See Create a Product.

Configuration

Configuration of tier images uses the image label in commercetools.

In commercetools navigate to the Variants tab of the product and select the variant you are adding tier to (typically this will be the Master variant, which will be noted with the blue flag). There navigate to the Image tab and in the top right section of the tab click the + Add image button. There are three possible ways to add tier images:

• Drag and drop — from finder or file explorer drag and drop the image
• Browse your device — open finder or file explorer and manually navigate to the file location
• Add image from URL — use a url link of a hosted image.

Once you have selected the Image on the top left section of the screen, click the upload button.

Determining order

Once uploaded, the images will appear in the image tab where it must be given a title with a specific setting parameter that determines which quantity the image will be displayed for. It must begin with the setting parameter [quantity=*value*] followed by the image label text.

E.g.: [quantity=2] Reducose GLP 1 Balance 500 mg It is the parameter in the Image label text that determines which image is displayed on the website depending on the quantity the customer selected in the buy box. This parameter also interacts with the product page URL.

The Reorder button in the image tab of the product variant, only changes order the images as they are displayed in commercetools, it does not affect the order on the website. Remember to save changes and once you are finished making the changes to publish them in order to make the changes visible on the website. The shop reads the image label, not the file name alone. Quantity is taken from [quantity=N] inside brackets, or from a quantity-N token. If neither is present, quantity is 1. You can combine parameters in the same brackets (&-separated), then alt text: [locale=en-150,fr-FR&quantity=2] Reducose English French Other parameters:

• locale= — comma-separated locales that may see the image.
• exclude-locale= — locales that must not see it.
• destination= — if set (for example google-feed), the image is not used on the shop (feeds can still use it).
• Label exactly sibling — stripped everywhere; see Product Siblings.

The buy box picks the shop-visible image whose minQuantity is the highest value still ≤ selected quantity. If every tier is above the selected quantity, it falls back to the smallest configured quantity (usually 1). Larger quantities reuse the highest configured tier. Locale-specific tiers are preferred when the store locale matches.