We use color swatches on our Shopify project. We are looking for a solution, to display only the name of the selected color variant. Is it possible to implement this with liquid or do we need a JavaScript solution?
Take a look where that should take place: printnil.com
{% for variant in product.variants %}
<span>{{ variant.title }}</span>
{% endfor %}
If you want to change what you are displaying based on the user's selection, you'll need to use JavaScript. Take a look at this tutorial in the Shopify docs that explains how to create a callback that is called whenever the user changes their selection (you may already have this in your theme):
var selectCallback = function(variant, selector) {
<your code goes here>
}
You can access the variant's options within this callback. E.g. If Colour is the first option, use variant.option1 to get the currently selected colour.
