Custom Colour Swatches

Add custom colour swatches for your product options.

Some stores render product variants as colour swatches instead of dropdowns. Since there is no standardised way to set this up in Shopify, this customisation needs to be adjusted to your specific setup.

☝

Requires coding This customisation requires some light coding. If you are not a developer, please have us do this for you.

Update app settings

First we need to adjust the app settings so that product variants are rendered as swatches.

Open the theme editor and find the Wishlist Page embed. Update the product options setting to: Swatches. You can then further style the input settings in the main App Settings embed.

You should now see product options on the wishlist page rendered as swatches with text values.

Setup a custom colour map

With Code Access we modify the Custom Product Cards to understand how an option name is mapped to a colour or image. The sample below assumes that you have uploaded png files in Shopify, which have the same name as your production option values. How exactly an option value is mapped to a colour or image will vary from store to store.

class WishlistProductCard extends WishlistElement {
  // Only replace the function below, not the entire file
  getColorMap(option) {
    if (option.name === "Color") {
      return option.values.reduce((colorMap, value) => {
        const handle = this.app.utils.url.handlelize(value);
        const color = handle.split("_").pop();
        const image = this.app.utils.url.getFileUrl(`${handle}.png`);

        return {
          ...colorMap,
          [handle]: { image, color },
        }
      }, {}); 
    }
  }
}

Custom Product Cards

On this page