Product Variant Configuration

Create variants in Point of Sale CMS based on any product attribute and sort variant options, such as Material—Leather, Cloth, Satin.

To show a variant in the Product Display Page (PDP) of the Point of Sale (POS) app, set the product’s variants as a product attribute. For instance, if a product doesn't have color as an attribute, even if it is configured in Point of Sale CMS, the color variant won't be shown in the PDP.

Add every product attribute that distinguishes a purchasable variant to the product variant configuration. This requirement includes all variant-defining attributes that you map from your product feed, such as custom strings like CustomString7. If you omit a variant-defining attribute, POS can't resolve the variant that a shopper selects. POS then can't add that variant to the cart, even when inventory is available.

Configuring Variants

  1. Go to Products > Product Variant.
  2. Edit or add a new product attribute by clicking + Add in the upper right. The product attributes will display alphabetically in the POS app regardless of their hierarchy in the CMS configuration.
  3. Under Product Attribute, select an attribute. Right now, the only product fields or attributes that can be set as variants are: Color, Size, CustomString 0 to 12. If you're using custom strings, a first-class variant (for example, Color) must be included.
  4. Under PDP Display Name, enter the name to be displayed in the POS app.
  5. Under Default Display Order, select Set Display Order which will open a popup allowing you to configure the variant options.
    1. Select Add to manually add variant options. It's best to add the options through a CSV file. You can select the down arrow next to it to add the file to replace or combine the different versions.
    2. Select and drag the variant option to set a default display order in the app. For example, you can select to have Small, Medium, and Large in that order.
    3. If a variant has values that the default doesn't set, they'll be displayed in alphabetical order.
    4. Set and save your changes.
  6. Go to Apps > All.
  7. Edit your selected app config and select Save in the upper right. Repeat this step for all app configs you want to have the product variants in and whenever you make a change in the configuration. This allows the latest variants to be injected into the app config.

Customizing PDP

  1. Go to Layouts > Layout Templates > PDP.
  2. Create a new PDP layout or edit an existing one. For more detailed instructions, refer to this article.
  3. You’ll find your previously configured variants visible in the layout.
  4. To make further customizations, double-click on the variant section to open a window. Here, you can customize the display style (for example swatch), swatch type (for example, circle, rectangle), and more.
  5. After you finish customizing, set and publish your changes.
  6. Relaunch your POS app and go to the PDP of any product. You'll see the variants that you've configured along with their display order.

To make a product with only one version easier to see, turn on Hide Single Value Variant in Apps > UI > UI Options. This automatically displays the single variant on the Product Detail Page (PDP) and hides any nonapplicable variants.

Troubleshooting Product Unavailable Messages

The POS app might show Product Unavailable and block you from adding a product to the cart, even though inventory appears available. In this case, the product variant configuration might be missing a variant-defining attribute.

  1. In your product feed, identify every attribute that distinguishes a purchasable variant of the product, including custom string attributes.
  2. Go to Products > Product Variant.
  3. Confirm that each variant-defining attribute from your feed appears in the list. Add any missing attribute. See Configuring Variants.
  4. Save each app config that uses the product variants, and then relaunch the POS app.