Show product variant swatch in theme front

Question

I can't show my product variant swatch in bicommerce theme front. I checked the code in API Playground & Its working. Also when I declaring in product.html the values are coming without any error. But may be I'm using wrong method to call them in product-view.html. Here's my product.html query through which I'm calling swatch codes: product.html

And this the way I'm calling it in product-view.html

          {{#each gql.data.site.product.variants.edges}} <div>
           {{#each node.productOptions.edges}}
            <dd class="productView-info-value">
                {{#each node.onMultipleChoiceOption.values.edges}}
                    <div>
                        {{node.onSwatchOptionValue.hexColors}}
                    </div>
                {{/each}}
            </dd>
            {{/each}}</div>{{/each}}

I am sure that I'm calling it incorrectly. Seeking help that how can I call it correctly.

Answer 1

I've checked your question and I would like to tell you that we can't show the Swatch Label or its Hex color. As you know that other sku or upc values are under only 1 edge or {{each}} however the Swatch color number or label is coming from triple edge or {{each}}. Yeah, Its possible to show the swatch color or label inside the API background but in Stencil theme its impossible to show it. I hope you find my answer helpful!