Here you will find information about the product variation tools included in MyCashflow's theme system and examples of different theme implementations.

Although product variation selection is included in the {ProductBuy} tag that prints the purchase form, it is also possible to implement additional variation-related features on the product page.

See also the documentation of Interface tags related to product variations.

To learn more about using product variations, see our user guide.

Implementing variation images on product pages

Images can be attached to variations in two different ways, and there are three tools that make it possible to implement them in a theme:

  • The variation image tool on the product card: on the admin panel's product card, you can select an image for a variation, which calls for using variation images' Interface tags in the theme.
  • The product image caption matched with the variation name: You can also attach a product image to a variation by specifying the variation's name as the product image's caption, in which case the theme must use one of the following JavaScript plugins:
    • images.js (the Barebones theme and other themes based on it)
    • mcf.productimages.js (the Legacy default theme, plugin development discontinued)

Theme support for the product card's variation image tool

If your online store uses variation images attached to variations via the product card's variation image tool, you can implement them on the product page.

Below you can see an example of how variation images have been implemented on the Barebones theme's product page (themes/shop/THEME/product.html) by using variations' Interface tags:

{ProductVariations(
	before: '<div style="display: flex; margin: -5px;">',
	after: '</div>',
	helper: {{
		<a href="{ProductUrl}?variation_id={VariationID}" style="border: 1px solid #e0e0e0; margin: 5px; width: 20%;">
			{VariationImage(link: false)}
			<div style="display: block; padding: 3px;">{VariationName}</div>
		</a>
	}}
)}
{ProductBuy}
  • {ProductVariations} tag. By default, the tag doesn't print anything, but you can define which variation details should be displayed on the page in its helper attribute.
  • For each variation, a link to the product page is created by using the {ProductURL} and {VariationID} tags.

    The final link is in the form /product/2?variation_id=3. The variation_id parameter included in the end part sets the variation selected by the customer as selected on the purchase form and in the product image gallery.

  • Variations are represented by their images and names printed by using the {VariationImage} and {VariationName} tags.
  • The purchase form is added after the list of variations by using the {ProductBuy} tag. The variation selected by the customer from the above variation list is also displayed as selected on the purchase form.

Below you can see an example of variation images implemented in this way on the product page:

The Barebones theme's images.js plugin

The Barebones theme includes the images.js plugin, which allows you to use images attached to variations via captions.

The plugin also makes it possible to implement zoomable product images and a product image gallery in a theme.

You can use the plugin in any theme by adding the plugin's JavaScript file to the theme and initializing it.

If your online store uses images attached to variations via captions, we recommend using the images.js plugin to display them in a theme. The plugin is actively developed and easy to use.

See the Barebones theme's instructions on using the images.js plugin.

The mcf.productimages.js plugin

MyCashflow's Legacy default theme includes the mcf.productimages.js JavaScript plugin, which allows you to use product images attached to variations via captions in a theme.

You can use the plugin in any theme by adding the plugin's JavaScript file to the theme and initializing it.

We recommend using the Barebones theme's images.js plugin for enabling variation images attached to variations via captions. The mcf.productimages.js isn't developed anymore.

Here's how to enable the plugin in a theme:

  1. Download the file containing the mcf.productimages.js plugin.
  2. Place the plugin file in the theme's JavaScript folder.

    For instance, in the Legacy default theme, the JavaScript folder is called js/

  3. Add a plugin call to the theme.

    Script calls are often implemented in the theme file helpers/scripts.html. Make sure that the file includes the line in bold.

    {MinifyJS(
	mode: 'production',
	support_scripts: 'false',
	files: 'js/vendor/jquery-1.7.1.min.js|
		js/vendor/underscore.min.js|
		js/vendor/jquery.serializeobject.js|
		js/vendor/jquery.tinypubsub.min.js|
		js/vendor/jquery.scroll.js|
		js/vendor/jquery.customselect.js|
		js/vendor/jquery.colorbox.js|
		js/vendor/jquery.typewatch.js|
		js/vendor/jquery.viewport.js|
		js/vendor/jquery.ba-deparam.js|
		js/mcf.pubsub.js|
		js/mcf.variationsplitter.js|
		js/mcf.productimages.js|
		js/mcf.packaging.js|
		js/mcf.main.js|
		js/mcf.onepagecheckout.js|
		js/mcf.checkout.js|
		js/mcf.klarnacheckout.js'
)}

Implementing a custom purchase form for product variations

Product variation selection is included in the default purchase form printed by the {ProductBuy} tag, but you can also implement a separate purchase form for product variations in the theme by using variations' Interface tags.

The customized purchase form doesn't support customizable products

The variation purchase form implemented according to the instructions in this section doesn't display on the product page product customizations, which can normally be applied to product variations.

If your products include customization options, implementing a custom purchase form isn't recommended.

Below you can see a sample implementation of the variation purchase form:

{ProductVariations(
	before: '<div style="display: flex; margin: -5px;">',
	after: '</div>',
	helper: {{
		<div style="border: 1px solid #e0e0e0; margin: 5px; width: 20%; text-align: center;">
			<a href="{ProductUrl}?variation_id={VariationID}">
				{VariationImage(link: false)}
				<div style="padding: 3px;">{VariationName}</div>
			</a>
			{ProductAddToCart(
				before: '<div class="CartButton">',
				after: '</div>'
			)}
		</div>
	}},
	or: {ProductBuy(variations: 'radio')}
)}

The image below shows the purchase form on the product page in the Barebones theme: