Manage product variants with Webflow CMS (Advanced)

Overview

By using Foxy and Webstudio with your CMS you can bring ecommerce functionality to your Webstudio site.

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 (Weglot, and other services)

• Multi-currency

Objectives

In this article, we'll accomplish the following:

• Create a product variants data collection in your page

• Reference product variants from your CMS

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

• Configure variant snippet settings

Demo

• Published Link

• Webstudio Read-only Link

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 Webhook Form element (not Form Content), go to Settings and add a custom attribute with the name foxy-id and value form.

2. 2

   Inside your add to cart form, add the following additional hidden inputs (if they don't already exist).

   <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. (Optional)

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 Webstudio, go to the Products Detail 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 HTML 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

   Ensure there is only one default option (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.

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 Settings section, set the Name as what you want shown in the cart (ie: Color).

4. 4

   Enable the Required option.

Add Custom Attributes

The following custom attributes are needed for real-time price, image, and inventory display.

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

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

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

Add Hidden Variants Collection List

A hidden data collection list (with it's source being the current product's variants) is needed to add product related variant options to the page.

1. 1

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

2. 2

   Set the source as your Variants information for that current product

3. 3

   Inside the Collection List item, copy/paste the HTML below:

   <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>

4. 4

   On the div Settings add the dynamic values that match the price, image, weight,etc.

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 (after the rest of the elements), copy/paste the snippet below into an HTML embed:

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


<script defer>
(() => {
  
  const config = {
  	sortBy: "",
  	sortOrder: "",
  	defaultLocale: "en-US",
  	defaultCurrency: "USD",
  	priceDisplay: "low",
  	inventoryDefaultLabel: "Please choose options",
  	selectUnavailableLabel: "Unavailable",
  	inventoryControl: false,
  	multiCurrency: false,
  	multilingual: false,
  	addonsConfig: null,
    forceReinit: true,
	};
  Foxy.variantsAutoInit(config);
})();
</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.