Getting Started
Getting StartedTheme Extensions
App SettingsCollection ButtonsFloating Wishlist LinkProduct Page ButtonsWishlist PageCustomisations
Code AccessCustom Wishlist PageInstant Header LinkCustom Colour SwatchesSave for Later in CartWishlist NotificationsIntegrations
KlaviyoGoogle AnalyticsMeta PixelMaestraCustom 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.
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 },
}
}, {});
}
}
}