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.

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:

MyCashflow's default theme includes a ready-made support for both of the aforementioned methods.

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.

The example below illustrates how to implement variation images on the product page (themes/shop/THEME/product.html) by using variations' Interface tags:

{ProductVariations(
	before: '<div>',
	after: '</div>',
	helper: {{
		<a href="{ProductUrl}?variation_id={VariationID}">
			{VariationImage(link: false)}
			<div>{VariationName}</div>
		</a>
	}}
)}
{ProductBuy}
  • {ProductVariations} tag. By default, the tag doesn't print anything, but by using its helper attribute you can define which variation details should be displayed on the page.
  • 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.

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',
	after: '</div>',
	helper: {{
		<div>
			<a href="{ProductUrl}?variation_id={VariationID}">
				{VariationImage(link: false)}
				<div>{VariationName}</div>
			</a>
			{ProductAddToCart(
				before: '<div>',
				after: '</div>'
			)}
		</div>
	}},
	or: {ProductBuy(variations: 'radio')}
)}

The example below illustrates how the purchase form can be implemented on the product page: