CODEWITHSUNDEEP
javascripthtmlcssshopifyliquid
Alexander H
Alexander H

Reputation: 173

display name of color variant in Shopify

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 %}

Upvotes: 0

Views: 1869

Answers (1)

Steph Sharp
Steph Sharp

Reputation: 11682

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.

Upvotes: 1

Related Questions