Variants are unique sets of attributes like size or color that exist for a particular product. For example, a t-shirt that comes in two sizes (S and M) and two colors (yellow and green) has four variants: yellow S, yellow M, green S, green M. Each variant is a unique SKU with its own inventory.

Products with variants that you create in the Retail POS catalog are synced with Lightspeed eCom (E-Series) and appear on your site. You can configure online-specific settings for each variant, such as changing how product attributes appear on your online storefront, sorting attribute choice options, and so on.

Changing product attribute view in eCom

Product attributes such as color or size appear on a product page as options that customers can select. The options can have different appearances on your eCom storefront:

• Drop-Down List is a compact view for selecting one value from multiple choices.
• Color allows you to add swatches to a product page in your online catalog to showcase samples of the colors this item comes in. Customers can select one value from the swatches you create. 
• Radio Buttons allow selecting a value from one or multiple choices like fabric or fit.
• Size allows selecting a value from one or multiple size button choices.

To show the difference between product sizes and provide measurement tips, add size charts to your products. 

For example, if you sell apparel, you can display "Material" as a dropdown and "Color" as swatches with colors.

To change the view of attributes for a product with variants in eCom:

1. In Retail POS, navigate to Online > Overview, scroll down, and click Go to eCom (E-Series)/ Go to Admin Panel.
2. In your eCom admin, navigate to Catalog > Products and select a product with variants.

3. Switch to the Options tab:

   

4. In the Options tab, click the attribute you want to edit, or click the three dots next to it and select Edit.
5. In the Option Type dropdown, select the display option.
6. (for the "Color" display option only) Adjust the color for each of the swatches, if needed.
7. (optional) Click the Value selected automatically dropdown to choose if any value should be preselected. By default, customers need to manually choose an option.
8. (optional) Click the six dots to the left of the option value name to drag and drop and rearrange the values.
9. Click Save.

Optionally, you can update the view of attributes for multiple products with variants at once:

1. In Retail POS, navigate to Online > Overview, scroll down, and click Go to eCom (E-Series)/ Go to Admin Panel.
2. In your eCom admin, navigate to Catalog > Products.

3. Tick all the products you want to update, then click Mass Update > Update Product Details > Update Product Options for Selected:

   

4. In the popup, select the display options for each of the attributes.
5. Click Update.

When mass updating the attribute view type to "Color", respective color swatches will be automatically assigned to your attribute values based on their names. You can adjust the swatch colors for individual products.

Setting preselected attribute values

You can set default attribute values (for example, this dresses’s most popular size) that will be preselected for a faster customer checkout. If a shopper wants to order a product with other options (like other sizes), they need to choose them on the product page instead of the default options.

To select a default attribute value:

1. In Retail POS, navigate to Online > Overview, scroll down, and click Go to eCom (E-Series)/ Go to Admin Panel.
2. In your eCom admin, navigate to Catalog > Products and select a product with variants.
3. Switch to the Options tab and click on an attribute.
4. Scroll down and click on the Value selected automatically dropdown.

5. Select your option:

   

6. Save the changes.

After opening a product page, customers will see default attribute values as highlighted and preselected:

Making attribute value selection required

You can require customers to select an attribute value. This way, no options are selected right after opening a product page, and a customer cannot add the item to the cart without choosing a value.

To make attribute value selection required:

1. In Retail POS, navigate to Online > Overview, scroll down, and click Go to eCom (E-Series)/ Go to Admin Panel.
2. In your eCom admin, navigate to Catalog > Products and select a product with variants.
3. Switch to the Options tab and click on an attribute.
4. Scroll down and click on the Value selected automatically dropdown.

5. Select the None. Require customers to select option:

   

6. Save the changes.

Here is an example of how shoppers are reminded to pick options after clicking the Add to Bag button:

Sorting attributes on the storefront

You can change the order in which attributes and their choices appear on the product pages in your online catalog. For example, if you want sizes to appear at the end of the attribute list, above the size chart.

To rearrange attributes on the product page:

1. In Retail POS, navigate to Online > Overview, scroll down, and click Go to eCom (E-Series)/ Go to Admin Panel.
2. In your eCom admin, navigate to Catalog > Products and select a product with variants.
3. Switch to the Options tab and click on an attribute.

4. To sort attribute types on the storefront, click the three dots icon next to any attribute, then click Change Order to drag and drop attribute types:

   

5. To sort values for a particular attribute on the storefront, click it, then drag and drop the values:

   

6. Save the changes.

Now product attributes and their choices will appear on the product page exactly in the order that you have set.

Setting up color swatches for products

Swatches are samples of color that help your customers instantly see the difference between product variants. You can use the “Color” attribute view to add any number of swatches to product pages in your online catalog. This way, you will showcase samples of the colors this item comes in.

To set up swatches for a product:

1. In Retail POS, navigate to Online > Overview, scroll down, and click Go to eCom (E-Series)/ Go to Admin Panel.
2. In your eCom admin, navigate to Catalog > Products and select a product with variants.
3. Switch to the Options tab and click the attribute you want to edit.
4. In the Option Type dropdown, select the "Color" display option.

5. Click on the swatch icon to set its color in your storefront. You can:

   • Select from the list of popular and recently used colors.
   • Switch to the Set custom color tab to use the color chooser tool or enter an existing color code if you already know it.

   

   • Switch to the Set custom color tab and click Select from image at the bottom of the pop-up. This way, you can use the tool to choose a color from the palette created automatically based on the gallery product images or manually pick a color from any gallery image with an eyedropper:

   

6. Adjust swatch colors for each of the remaining attribute values.
7. Save the changes.

You can also choose to display swatches on the product grid and customize their shape and size.

Adjusting the swatch display on the product grid

By default, color swatches appear only on the product pages in your online catalog. You can also opt to display them on the product grid. This way, customers will immediately see the available swatches when browsing your catalog’s categories.

To adjust the swatch display on the product grid:

1. In Retail POS, navigate to Online > Webstore (or Website) and click Edit Site.
2. In the Page dropdown at the top, select Catalog > Categories & Product Grid > Product card settings.
3. From the Color swatches dropdown, choose Show or Do not show.
4. Publish the changes.

If you're not using the Lightspeed eCom sitebuilder (Instant Site), go to Online > Webstore (or Website) > Design > Product Card details and layout > Color options to adjust the swatch display on the product grid in eCom.

Currently, swatches don’t appear on the product catalog sections you add to your Instant Site.

Customizing swatch shape and size

You can customize  the shape and size of color swatches to fit your store’s style and concept. Circle, Square, and Rounded square options are available for swatch shapes. Small, Medium, and Large options are available for swatch sizes.

The swatch size setting applies only to the product pages in your online catalog. On the product grid, the swatch size is automatically adjusted based on the product image layout.

To customize swatch shape and size:

1. In Retail POS, navigate to Online > Webstore (or Website) and click Edit Site.
2. In the Page dropdown at the top, select Product > Product Details > Color swatches.
3. Choose your options from the Shape‍ and Size dropdowns.
4. Publish the changes.

If you're not using the Lightspeed eCom sitebuilder (Instant Site), go to Online > Webstore (or Website) > Design > Color options to customize swatch shape and size in eCom.