How to display Product Variant Option prices in Big Commerce

Question

I'm trying to display the prices or product variant options on the frontend in Big Commerce, but it seems as though the data is editable in the UI, the data doesn't pass to the frontend for use? When looking at the data returned from context, price plus other option specific data is

Example data from context below:

"options": [
{
"condition": true,
"display_name": "Singular Item",
"id": 113,
"partial": "set-select",
"required": true,
"state": "variant_option",
"type": "Configurable_PickList_Set",
"values": [
{
"data": "Singular Item",
"id": 98,
"label": "Singular Item",
"selected": false
},
{
"data": "10",
"id": 103,
"label": "10",
"selected": false
}
]
},

If anyone knows how to pass this data to the frontend, it would be appreciated if you let me know :)

Answer 1

There are several ways to get the variant prices on the frontend, but the simplest way to do this now is using Front Matter GraphQL queries. This is explained pretty well here: https://developer.bigcommerce.com/stencil-docs/ZG9jOjIyMDcxNg-front-matter-reference#graphql-attributes

You can use the GraphQL Explorer to see how to format your query.