Welcome to the Liquify Community

Updated 5 months ago

Variant metafields

At a glance

The community member is trying to set up elements that update and change visibility per variant using metafields in Liquify, but is having trouble getting it to work. Another community member provides an example from a different project that demonstrates how to display information from variant metafields by iterating over each variant and checking if the selected variant matches the variant ID. The example also shows how to get the variant image that matches the selected option. While the provided example didn't directly solve the issue, it helped the original community member get on the right track.

Useful resources
One of the biggest benefits of Liquify for us is custom styling for custom features. I'm trying to set up elements that update and change visibility per variant using metafields, and can't get it to work. What am I missing here? https://preview.webflow.com/preview/bibliotesta?utm_medium=preview_link&utm_source=designer&utm_content=bibliotesta&preview=2e903db79948c9938579805d4b825151&pageId=66e8c783a5ab8a332fa08fd2&locale=en&workflow=preview
Attachment
variant_metafields.png
j
S
5 comments
  1. to display information from variant metafields you need to itterate over every variant (li-for="product.variants") and the use li-js-if="selected_or_first_available_variant.id == {{ variant.id }}" to check if the selected variant is equal to the variant id.
  1. in the example there is also a way on how to get the variant image which fits to the option.
x-bind:src="variants.find(variant => variant.options.includes(variantName))?.featured_image.src"
Thanks, that didn't directly work but helped me get on the right track.
Allright πŸ™‚ let me know if you need more help!
Add a reply
Sign up and join the conversation on Discord