On some Shopify themes, even when you select a different variant while adding the item to wishlist, only single variant gets added to the Wishlist. This causes confusion to customers as wrong variant (color, size) gets added to their wishlist and subsequently to the Cart. This issue is observed mostly on individual product pages.
Why this happens?
The happens because the variant parameter in the URL doesn’t get updated every time the variant is changed on product pages (either by selecting the dropdown or clicking the options). The App solely depends on variant id parameter in the URL to determine the changed (selected) variant.
Majority of themes on Shopify Theme Store support this feature by default, however on few themes where this feature is not enabled, this has to be done manually.
How to Fix this issue?
To fix this, you need to update the OptionSelectors JavaScript function in your theme.
The JavaScript for OptionSelectors is typically found in the product.liquid or theme.liquid template. It may also be inside a separate JavaScript file in theme’s Theme Assets. Look for where OptionSelectors is initialized, and add enableHistoryState: true to its parameter. It should be something like
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true });More about it can be found here.