Manage product variants with Webflow CMS (Advanced)

Overview

By using Foxy and Webflow CMS to manage products and product variants, you'll be able to get around Webflow Ecommerce product variant limitations and add additional power features to your setup.

This approach consists of two CMS collections. One collection for products and another collection for product variants. The two are connected with a multi-reference field.

Features

The following features are supported (more in the works):

• Multiple levels of variant groups

• Select field and radio buttons

• Dynamically styled radio buttons

• Chained variant functionality

• Per variant combination inventory control

• Real-time image change

• Real-time price change

• Real-time sku change

• Multilingual (with Webflow Localization, Weglot, and other services)

• Multi-currency

Objectives

In this article, we'll accomplish the following:

• Create product variants collection in Webflow CMS

• Reference product variants from the products CMS collection

• Set up variant group elements, select fields, and radio buttons in add to cart form

• Configure variant snippet settings

Demo

• Published Link

• Read-only Link

• Cloneable

Create Variants CMS Collection

An additional CMS collection is needed to store product variant data. Once you've created this additional CMS collection and have added data, you should have a CMS item for every possible product variant combination (ie: Awesome Shirt / Blue / Large).

1. 1

   In Webflow, create a new CMS Collection (name the collection as needed).

2. 2

   Add the following CMS fields as needed (name of field can be whatever you want):

   
   Note: The following fields are optional unless you're integrating with Printful. For Printful, SKU, Image, and Price are required.

   Name	Type
   SKU	Plain Text
   Image	Image
   Price	Number
   Weight	Number
   Inventory	Number

3. 3

   For each variant group, add a plain text field (ie: Size, Color, Format).

4. 4

   Save changes.

5. 5

   In the Products CMS Collection, add a new multi-reference field, connected to the new Variants CMS Collection.

6. 6

   Save changes.

Configure Add To Cart Form

You should have already set up add to cart forms following this article. The following modifications are needed for variants functionality:

1. 1

   Select your add to cart Form element (not Form Block) and add a custom attribute with the name foxy-id and value form.

2. 2

   In the HTML Embed element inside your add to cart form, add the following additional hidden inputs (if they don't already exist).
   
   Note: The Quantity Max input is only needed if you're managing inventory for products/variants. This is not required for Printful integration.

   Copy Copied

   <input type="hidden" name="code" value="CODE" />
   <input type="hidden" name="quantity_max" value="QUANTIYY_MAX" />

3. 3

   Replace the all caps CODE value with the corresponding CMS code/sku field.

4. 4

   Replace the all caps QUANTITY_MAX value with the corresponding inventory CMS field.

Add Variant Fields

Our variant functionality supports select fields and radio buttons (default and custom). All variant groups can use the same field type, or you can mix them as needed (ie: Color uses radio buttons, Size uses select field).

1. 1

   In Webflow, go to the Products CMS Collection page.

2. 2

   Inside the add to cart form element (where you want the first variant field to show) add a div element.

3. 3

   Give the element a custom attribute. Set the Name as foxy-variant-group and the Value as the variant group name (lowercase, no special characters, replace spaces with hyphens). For example: color or pocket-color.

4. 4

   Inside the div element, add a select field or radio button using the instructions below. These placeholder elements will be automatically populated and styled with variant CMS data.

5. 5

   Repeat steps for each additional variant group.

Select Field

Select fields are recommended for variant groups with many options and/or that don't need option specific styling.

1. 1

   Inside the div element, add a select field.

2. 2

   Click on the select field and under the Select Field settings section, set the Name as what you want shown in the cart (ie: Size).

3. 3

   For Choices, ensure there is only one default choice (ie: Select Size) with an empty value. This will require customers to select an option for this variant group before adding product to cart.

4. 4

   Enable the Required option.

Radio Button

Radio buttons are recommended for variant groups that require options specific styling and/or that don't have many options.

1. 1

   Inside the div element, add a radio button. If needed, wrap the radio button with another div for additional styling and design control (ie: flex styling for radio buttons).

2. 2

   A label element is not required, but can be added and will be dynamically populated with variant option label.

3. 3

   Click on the radio button and under the Form Settings section, set the Name as what you want shown in the cart (ie: Color).

4. 4

   With the radio button still selected, under the Radio Button Field settings section, set the Group Name as the same value as the Name (ie: Color).

5. 5

   Enable the Required option.

Add Custom Attributes

The following custom attributes are needed for real-time price, image, and inventory display. More info on how to add custom attributes in Webflow here.

• Price - Select your price display element and add a custom attribute with the name foxy-id and value price.

• Image - Select your product image element and add a custom attribute with the name foxy-id and value image.

• Inventory - Select your inventory display element and add a custom attribute with the name foxy-id and value inventory.

Add Hidden Variants Collection List

A hidden collection list (with the multi-reference Variants field as the source) is needed to add product related variant options to the page.

1. 1

   Anywhere in your product detail page, add a Collection List element.

2. 2

   Set the source as your Variants multi-reference field.

3. 3

   Inside the Collection List item, add a HTML Embed element.

4. 4

   Inside the HTML Embed element, copy/paste the HTML below:

   Copy Copied

   <div 
   	foxy-id="variant-item"
   	foxy-variant-price="PRICE"
   	foxy-variant-image="IMAGE"
   	foxy-variant-weight="weight"
   	foxy-variant-sku="SKU"
   	foxy-variant-inventory="INVENTORY"
   	foxy-variant-NAME="VALUE"
   >
   </div>

5. 5

   Hide the Collection List element with style or visibility settings (this element does not need to be visible).

Required Attributes

foxy-id="variant-item"
Required for each variant item. No changes needed to attribute name or value.

foxy-variant-NAME=""
For each variant group (ie: Size, Color, etc.), this attribute is needed. Replace NAME with variant group name (same format as the custom attribute used earlier) (ie: foxy-variant-color ). Set value as corresponding CMS field. Repeat for each variant group.

Optional Attributes

foxy-variant-price=""
This is the price that will be displayed on page and passed to the cart if variant combination is chosen. Replace PRICE value with corresponding CMS field.

foxy-variant-image=""
This is the image that will be displayed on page and passed to the cart if variant combination is chosen. Replace IMAGE value with corresponding CMS field.

foxy-variant-weight=""
This is the weight that will be passed to the cart if variant combination is chosen. Weight is used for shipping calculations (if needed). Replace WEIGHT value with corresponding CMS field.

foxy-variant-sku=""
This is the SKU that will be assed to the cart if variant combination is chosen. Replace SKU value with corresponding CMS field.

foxy-variant-inventory=""
When inventory control is enabled, this value will determine if the variant combination is available and allowed quantity that can be added to cart. Replace INVENTORY value with corresponding CMS field.

Style Attributes

It's possible to dynamically style radio buttons using CMS data and any CSS property. For example, each color option can have a different background color, border color, and icon.

Style attribute names consist of three parts, each joined with a hyphen:

• Required prefix: foxy-variant

• Variant group name: color

• CSS property: background-color

The above would look like this: foxy-variant-color-background-color="" Set the value to corresponding CMS field. This would set the background color of this specific radio button to whatever color is set in CMS.

Custom Attributes

It's possible to pass custom variant specific values to the cart as well. Custom attribute names consist of two parts, each joined with a hyphen:

• Required prefix: foxy-variant

• Attribute name: ie: description

The above would look like this: foxy-variant-description="" Set the value to corresponding CMS field. In your add to cart form HTML Embed element, be sure to add a corresponding hidden input with the same name.

Add Variants Snippet

The variants snippet handles all the needed logic to make the variants functionality work. In your product detail page settings, specifically in the closing </body> section, copy/paste the snippet below (after any existing code):

<!-- FOXY VARIANTS -->
<script src="https://cdn-js.foxy.io/website-helpers@1/foxy-variants.js"></script>

<script>
(() => {
	const config = {
		sortBy: "",
		sortOrder: "",
		priceDisplay: "low-high",
		pricePrecision: "2",
		defaultLocale: "en-US",
		defaultCurrency: "USD",
		inventoryControl: false,
		inventoryDefaultLabel: "Please choose options",
		selectUnavailableLabel: "Unavailable",
		multiCurrency: false,
		multilingual: false,
		addonsConfig: null,
	};
	const variants = Foxy.setVariantConfig(config);
	variants.init();
})();
</script>

Configure Variants Snippet

The default snippet configuration will work for most, but each option can be modified as needed. Please refer to the chart below for info on what each option does and supported values:

sortBy
Controls what options for each variant group should be sorted by.

• "" (default) - Sorts by order items were added in CMS multi-reference field

• "label" - Sorts by option label

• "price" - Sorts by option price

sortOrder
Controls order options for each variant group should be listed in.

• "" (default) - Sorts by order items were added in CMS multi-reference field

• "ascending" - Ascending order

• "descending" - Descending order

priceDisplay
Controls how pricing is displayed for your price display element on page load (when no variants have been chosen yet).

• "low-high" (default) - Displays a low to high price range

• "low" - Displays lowest price

• "high" - Displays highest price

pricePrecision
Controls the number of decimal places.

• Defaults to "2". Supports any integer number value.

defaultLocale
Controls language and regional preference.

• Supports any standard language code (ie: en-US)

defaultCurrency
Controls currency used on page.

• Supports any valid three-letter ISO 4217 currency code (ie: "USD", "EUR", "GBP")

inventoryControl
Controls whether variant inventory count should be considered.

• "true" - Only in-stock variant combinations can be added to cart and purchased

• "false" - Inventory count will be ignored and all variant combinations can be added to cart and purchased

inventoryDefaultLabel

When inventory control is enabled and an element is used to display available inventory, this is the text that will be displayed on page load (before customer configures variant options).

selectUnavailableLabel
When a specific option is unavailable, this is the text that will be displayed next to the option label in select fields.

multiCurrency
If you need multi-currency, please contact us for more info. Functionality is available, but documentation is coming soon.

multilingual
If you need multilingual, please contact us for more info. Functionality is available, but documentation is coming soon.

addonsConfig
This setting is related to multi-currency and multilingual.