18 min read • Updated a month ago
Manage product variants that chain together with Webflow CMS
Integrate FoxyCart with Webflow CMS by linking Products and Variants Collections to manage product variants that chain together. Use custom attributes and scripts for dynamic cart features like multi-currency, multilingual support, and real-time updates for price, inventory, and images.
Instructions for CMS Pages
CMS Collections
Products CMS Template
Create a Form Block.
Select your add to cart Form (not Form Block) and add a Custom Attribute with name: foxy-id and value =form.
In your Form Settings, set the Action as https://change.foxycart.com/cart and the Method as POST. (replace CHANGE with your Foxy store subdomain)
Right inside your Form, add an HTML Embed element.
Copy/paste the snippet from here: https://pastebin.com/raw/fc5qnVMu into the HTML Embed element.
Replace each CHANGE value with the corresponding CMS Field, like this:
Inside of the add to cart form, add a div for each variant group and apply the specified data attribute for each variant group, in the format: foxy-variant-group={{Color}}, e.g:
Inside the variant group Div you can add and design your select or input fields as needed.
Add a hidden Collection List anywhere on the page using the referenced Product Variants CMS collection as the source. On the Collection Item include an HTML Embed element.
Copy/paste the snippet from here: https://pastebin.com/raw/gq6EBCGD into the HTML Embed element.
The snippet includes a custom attribute:
foxy-id="variant-item", and the corresponding data attributes for each needed regular variant attribute (ie: name, price, inventory, sku etc.).Replace all CHANGE instances with the right Product Variants CMS Field, and add as many attributes for the Variant Options you need with the following format, e.g: foxy-variant-color=”Color field”, foxy-variant-size=”Size field”
In your Product Page Settings, copy/paste the snippet from here: https://pastebin.com/raw/DguyJxLh into the <head> tag section.
Modify the configuration options at the top of the snippet as needed.
Initialize the script in your Product Page Settings, by adding this initialization script before the closing </body> tag
<script>
(() => {
const variants = Foxy.setVariantConfig(config);
variants.init();
})();
</script>Dynamically Add Styles Per Variant Option
If you want to dynamically control the styling of a specific option. You can achieve that by attaching to the HTML Embed inside the Collection List Item, another foxy-variant attribute with the name of the variant group plus the CSS style and the value being the right CSS value. E.g:
Variant Group Options Label Sorting
If you need to set a specific and explicit order for the variant values of a variant group, add a custom attribute to the Variant group div in the format:
Sizes being a field on the Product CMS that has a comma separated list of values, e.g: "Small,Medium,Large"
Real Time Image Change
For image change functionality on variant selection the main product image needs to have the custom attribute:
foxy-id="image"
Real Time Price Change
For real time price change on variant selection the price element must have the custom attribute:
foxy-id="price"
Real Time Inventory Display Change
For live inventory display change on variant selection functionality, the inventory display element needs to have the custom attribute:
foxy-id="inventory"
Instructions for Product List Pages
If you want to add a product list with add to carts that handle variant options you can do that with the Variant script.To set it up you need to:
Create a Collection List using the Products CMS as source. And set on the Collection Item a custom property with foxy-id=container:
Follow the steps outlined above on the Products CMS Template, but just consider that instead of doing them on a page, you will do them inside the Product Collection List created above, and that the Variants CMS collection list needs to be nested on that one.
On step 14 of the instructions above instead of adding the initialization script on the text area to add code before the closing </body> tag. You need to add it right after the Variants CMS collection list element so that the info has loaded before the script initializes.
Multi-Currency Add-on
If you want to handle different currencies on your website and your FoxyCart, you can enable this feature in the configuration settings of the script. For Multi-Currency to work besides enabling it you need to:
foxy-variant-price-usd="DYNAMIC_WEBFLOW_FIELD"foxy-variant-price-eur="DYNAMIC_WEBFLOW_FIELD"
Multilingual Add-on (Localization)
Foxy handles Cart, Checkout and Receipts languages and localization with the use of template sets. But how do you handle different languages on your website to make them work for your variants and Foxy?
First Steps
If you want to handle different languages on your website and on your FoxyCart you can enable this feature in the configuration settings of the script.
Set the extra languages you will be using in the addonsConfig setting part of the Addon Setting.
Besides that you need to pick an option for handling the translations of your website.
There are a few automatic options:
Webflow Localization or Linguana
You can find more information here: https://university.webflow.com/lesson/localization-overview?topics=localizationhttps://www.linguana.io/
This type of localization works by having different translations of your site on different subdirectories or subdomains that start with the ISO code for the language you pick, so e.g: /es/your-page-url/en/your-page-url
Our script will check based on your defined languages on the config script, if the subdirectory or subdomain matches any of them and load the correct translated strings and currencies.
WeGlot
You can translate your site automatically by using Weglot. It supports two ways of handling site translations: a subdomain approach, which is the standard , and a switcher approach that translates your website in real time but is not the best for SEO. When to use each? If you have purchased a domain that you can use for your Webflow project then you can safely integrate it with the standard approach. But if you only have the webflow.io staging domain then you can integrate it using the switcher Javascript approach in the meantime. Here are instructions for integration with the Webflow subdomain approach and with the Switcher Javascript approach.
Translating Dynamic Content with the Switcher ApproachOur script creates dynamic content based on your variants information, to make Weglot translate these elements when they are available you need to do the following.
Change currencies and/or language with a switcher
If you want add a language/currency switcher where customers can select what currency/language to see the product information, you just need to:
Script Configurations
Inside the script there is a configuration object for handling or enabling some key functionalities.
Sorting Settings Documentation
sortBy
Type: string
Description:
Sorts the values for the variant options by "label" or "price". Leave as an empty string for default sorting.
Default: The order in which the variant options were added in CMS.
Allowed Values:
"label" — Sorts by the variant's label.
"price" — Sorts by the variant's price.
"" — Default sorting.
sortOrder
Type: string
Description:
Sorts the values for the variant options by "ascending" or "descending". Leave as an empty string for default sorting.
Default: The order in which the variant options were added in CMS.
Allowed Values:
"ascending" — Sorts in ascending order.
"descending" — Sorts in descending order.
"" — Default sorting.
Pricing Settings Documentation
defaultLocale
Type: string
Description:
The language used and the regional preference of the user (e.g., "en-US").
This will be the default locale for handling prices and languages when enabling multi-currency and multilingual.
Allowed Values:
Any valid BCP 47 language tag (e.g., "en-US", "fr-FR").
defaultCurrency
Type: string
Description:
The currency used for price elements on the page (e.g., "USD").
This will be the default currency for handling prices when enabling multi-currency.
Allowed Values:
Any valid three-letter ISO 4217 currency code (e.g., "USD", "EUR", "GBP").
priceDisplay
Type: string
Description:
The way the price element shows when there are variants that affect the price.
Default: A range of "low-high".
Allowed Values:
"low" — Only the lowest price is displayed.
"high" — Only the highest price is displayed.
"" — Default (range "low-high").
Inventory Settings Documentation
inventoryControl
Type: boolean (true or false)
Description:
Enables or disables inventory control for variant options.
If enabled, variant options that don't have inventory will be disabled or marked as "Unavailable".
Allowed Values:
true — Inventory control enabled.
false — Inventory control disabled.
inventoryDefaultLabel
Type: string
Description:
The text to display when a product has variants, before variant selection is completed.
Leave blank for default.
Default: "Please choose options".
selectUnavailableLabel
Type: string
Description:
The label to display next to a variant option's value if it is not available for a combination.
You can set any custom text.
Default: "Unavailable".
Addon Settings
multiCurrency
Type: boolean (true or false)
Description:
Enables or disables multi-currency support for the add-on.
When set to true, the logic will expect variant prices to include a currency code on the custom property for it.Check Multi-Currency Add-on for instructions.
Allowed Values:
true — Multi-currency support enabled.
false — Multi-currency support disabled.
multilingual
Type: boolean (true or false)
Description:
Enables or disables multilingual support for the add-on.
When set to true, different translations and locales can be configured for different languages.
Allowed Values:
true — Multilingual support enabled.
false — Multilingual support disabled.
addonsConfig
Type: object
Description: This object holds the configurations for template sets, translations, and template change triggers.
Properties:
- templateSets
Type: object
Description: Defines currency-locale pairs for different templates. The key value needs to be template set code as defined in the foxy admin for the template set.
Structure:
{
[templateSetCode]: { currency: "currencyCode", locale: "localeCode" }
}
Allowed Values:
templateSetCode — A unique identifier key for each template set (e.g., es for Spanish, gb for Great Britain).
currency — The three-letter ISO 4217 currency code (e.g., "eur", "usd", "gbp").
locale — The BCP 47 language tag, which includes both language and regional code (e.g., "es-ES", "en-GB").
Example:
{
"es": { "currency": "eur", "locale": "es-ES" },
"gb": { "currency": "gbp", "locale": "en-GB" }
}
- translations
Type: object
Description: Defines translations for labels and messages specific to each template set.
Structure:
{
[templateSetCode]: {
[labelKey]: "translation"
}
}
Allowed Values:
templateSetCode — A unique identifier for each language's template set (e.g., es for Spanish).
labelKey — The key representing the label that needs translation (e.g., "inventoryDefaultLabel", "selectUnavailableLabel").
translation — The translated text for the corresponding label.
Example:
{
"es": {
"inventoryDefaultLabel": "Por favor, elige opciones",
"selectUnavailableLabel": "No disponible"
}
}
- templateChangeTrigger
Type: string
Description: Defines the trigger mechanism for changing templates.
Allowed Values:
“country” — Trigger based on the country the user is in based on their IP address.
"subdirectory" — Trigger based on URL subdirectories (e.g., /es/ for Spanish).
“subdomain” — Trigger based on URL subdomains (e.g., es.example.com for Spanish).
"weglotjs" — Use Weglot.js
Example:
templateChangeTrigger: subdirectory"
How to Add Configurations
1. Define the templateSets: Determine the extra languages and currencies you want to support. For each language, create an entry with a unique code, and specify its corresponding currency and locale.
2. Add translations: For each language's template set, define the translated text for all necessary labels and messages.
3. Set the templateChangeTrigger: Choose the trigger method based on how you want to switch between templates. Use a direct string value like "subdirectory" or "weglotjs".Full Example:
addonsConfig: {
// Add template sets for new currencies/languages with their currency-locale pairs as needed
templateSets: {
es: { currency: "eur", locale: "es-ES" },
gb: { currency: "gbp", locale: "en-GB" },
},
translations: {
// Add translations for each template set code.
es: {
inventoryDefaultLabel: "Por favor, elige opciones",
selectUnavailableLabel: "No disponible",
},
},
templateChangeTrigger:"subdirectory",
},