A tool included in the Barebones theme for displaying different properties of a product variation in the form of drop-down menus.

You can use the variation splitter to display different properties for a product variation in the form of drop-down menus on your online store's product pages. You may want to use the variation splitter with product variations that have multiple properties requiring selection (e.g. size and color). In such a case, the customer will be able to select the desired variation based on its properties displayed in drop-down menus.

For more information about variation splitter, see our user guide.

Enablement

The variation splitter is supported by default in the built-in default themes (Barebones and Legacy default theme) and is ready to use in store versions where these themes are enabled.

Enabling the variation splitter is only possible if:

  • Purchase tools have been added to the product page by using the {ProductBuy} tag.
  • The theme has jQuery enabled.

    The default theme includes jQuery by default. To add jQuery to a page, use the {SupportScripts} tag.

  • The variations.js plugin has been added to the theme.

Note: The variation splitter doesn't support product bundles.

The plugin can be enabled in the theme by initializing it in a JavaScript file. In the Barebones theme, the initialization is done in the scripts/custom.js file:

MCF.Variations.init({
    selectText: MCF.Locales.get('choose')
});

After the plugin has been initialized, it creates <select> menus out of variations with names in the following format: Property: Value | Property 2: Value.

A separate plugin mcf.variationsplitter.js is available for other themes that aren't based on the Barebones theme (see instructions on using the plugin).