Understandable beginner tutorial for colour swatches on product page

Question

I need to implement color swatches as a variant picker on a product page. Is there an easy way to do it or any tutorial/ example project where i can see how to implement it? I use the Liquify starter template as a reference but color variants are only displayed as text names. I just started out using Shopify and Liquify but have quite a bit of experience in working with Webflow and Client First. Thanks in advance

Jan · Answer

Hey @eL_cRiminaL35, here is a preview link of a project that has such a color swatch: https://preview.webflow.com/preview/auf-und-davon-644d27?utm_medium=preview_link&utm_source=designer&utm_content=auf-und-davon-644d27&preview=5be4bf471bc8ba74a5d3f8c6802b026f&pageId=64ad3947567a71fb9ee100fd&workflow=preview

I didn't build the store, but I think it uses a variant metafield that references a metaobject.

Here is the live store as well with an example: https://www.aufunddavon.com/products/vario-ps-ql2-1-26l

Maybe I find some other examples as this might look kinda complex/confusing :)

Welcome to the Liquify Community

Understandable beginner tutorial for colour swatches on product page