How to display colour swatches for variants of a product on a checkout page?

Ask the community
1

Hi,

I have added product variants along with their images in the Funnelish product settings. However, on the checkout page, only the variant names are displayed and not the corresponding images.

Since this is a cosmetic product, I would like customers to see the product shades along with their names so it’s easier for them to select the correct option.

Is there any way to display color swatches or variant images on the Funnelish checkout page, similar to how Shopify does it?

Please let me know. Thanks!

2

Hey @Shietaal :waving_hand:

Yes, that is possible with custom code :+1:

Right now Funnelish checkout shows the variant names by default, but you can create a more Shopify-style experience using:

  • Custom HTML/CSS

  • Variant images

  • And a bit of JavaScript

For example:

  • Show color circles/swatches

  • Show shade images

  • Change selected variant visually

  • Update the selected product/variant dynamically

A common approach is:

  • Create custom swatch buttons/images

  • Store the variant ID in each swatch

  • On click → trigger/select the corresponding Funnelish variant option

This works really well for:

  • Cosmetics

  • Fashion

  • Shade-based products

  • Supplements with flavors

So yes — definitely achievable, just not native out of the box yet :+1:

Here is an example: Checkout Page

3

Thanks so much @anwerashif for your prompt response. I understand that there is no inbuilt functionality for this. I am not familiar with java-scripts and all.

4

Hey @Shietaal :waving_hand:

No worries :+1:

In that case, I would recommend reaching out to Funnelish live support.
If you are on the Advanced Plan, our tech team can help integrate custom image/color swatches into your funnel for you.

That way you can get:

  • Visual shade selectors

  • Variant images

  • Better mobile UX

  • More Shopify-like variant selection

…without needing to handle the JS/CSS yourself :+1: