How can I add custom fields to featured products in Big Commerce? I'm using the 'LifeStyle' theme. I've added the custom fields in the product page (in the admin) but in the Stencil, e.g. on the home page, do not get the option to add it: 
)
I also cannot locate any files that would have any of the markup in. Only in home.html I can see {{{region name="home_below_new_products"}}} which I know to be the code that displays this section (when viewing the home page with dev tools to see the markup). But there doesn't seem to be any accessible files to edit any of this.
__
Also just to add that in trying to create a custom widget (via the APIs - as per suggestions given below), I'm still not yet able to output this to the user. My widget template JSON looks like this:
{
...,
"storefront_api_query": "query ProductSet($productIds: [Int!], $activeCurrencyCode: currencyCode!) {\n site {\n settings {\n storeName\n tax {\n plp\n }\n }\n currency(currencyCode: $activeCurrencyCode) {\n display {\n symbol\n symbolPlacement\n decimalToken\n decimalPlaces\n thousandsToken\n }\n }\n products(entityIds: $productIds) {\n edges {\n node {\n brand {\n name\n }\n name\n entityId\n addToCartUrl\n addToWishlistUrl\n path\n sku\n priceWithTax: prices(includeTax: true, currencyCode: $activeCurrencyCode) {\n price {\n currencyCode\n value\n }\n }\n priceWithoutTax: prices(includeTax: false, currencyCode: $activeCurrencyCode) {\n price {\n currencyCode\n value\n }\n }\n reviewSummary {\n summationOfRatings\n numberOfReviews\n }\n defaultImage {\n url80wide: url(width: 80)\n url160wide: url(width: 160)\n url320wide: url(width: 320)\n url640wide: url(width: 640)\n url960wide: url(width: 960)\n url1280wide: url(width: 1280)\n url1920wide: url(width: 1920)\n }\n customFields {\n edges {\n node {\n name\n value}\n}\n}\n}\n }\n }\n }\n}\n",
"template": "<div id=\"sd-product-set-{{_.id}}\"></div>\n\n{{#each products as |product|}}\n {{#each ../_.data.site.products.edges as |productResource|}}\n {{#if productResource.node.entityId \"==\" product.productId}}\n <script type=\"application/ld+json\">\n {\n \"@context\": \"https://schema.org/\",\n \"@type\": \"Product\",\n \"name\": \"{{productResource.node.name}}\",\n \"image\": \"{{productResource.node.defaultImage.url}}\",\n \"description\": \"{{product.productDescription}}\",\n \"sku\": \"{{productResource.node.sku}}\",\n \"potency\": \"{{#each productResource.node.customFields.edges}}{{#if node.name \"==\" \"potency\"}}{{ node.value }}{{/if}}{{/each}}\",\n \"aggregateRating\": {\n \"@type\": \"AggregateRating\",\n {{#if productResource.node.reviewSummary.summationOfRatings \"==\" 0}}\n \"ratingValue\": \"0\",\n {{else}}\n \"ratingValue\": \"{{divide productResource.node.reviewSummary.summationOfRatings productResource.node.reviewSummary.numberOfReviews}}\",\n {{/if}}\n \"reviewCount\": \"{{productResource.node.reviewSummary.numberOfReviews}}\"\n },\n \"offers\": {\n \"@type\": \"Offer\",\n \"priceCurrency\": \"{{productResource.node.prices.price.currencyCode}}\",\n \"price\": \"{{productResource.node.prices.price.value}}\",\n \"seller\": {\n \"@type\": \"Organization\",\n \"name\": \"{{../../../_.data.site.settings.storeName}}\"\n }\n }\n }\n </script>\n {{/if}}\n {{/each}}\n{{/each}}\n\n<script type=\"text/javascript\">\n (function() {\n var widgetConfiguration = {{{json .}}};\n var dataIsNotPresent = typeof widgetConfiguration._.data === 'undefined' || Object.keys(widgetConfiguration._.data || {}).length === 0;\n var storefrontApiQueryData = widgetConfiguration._.queryData;\n\n function executeStorefrontApiQuery(queryData, callback) {\n // Fetch data from the GraphQL Storefront API\n var storefrontApiRequest = new XMLHttpRequest(); // IE compatible\n storefrontApiRequest.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n callback(JSON.parse(this.response).data);\n }\n };\n\n storefrontApiRequest.open('POST', `/graphql`, true);\n storefrontApiRequest.setRequestHeader('Authorization', `Bearer ${queryData.storefrontApiToken}`);\n storefrontApiRequest.setRequestHeader('Content-type', 'application/json');\n storefrontApiRequest.send(JSON.stringify({ query: queryData.storefrontApiQuery, variables: JSON.parse(queryData.storefrontApiQueryParamsJson) }));\n }\n\n function loadScript(src, onload) {\n const scriptTag = document.createElement('script');\n scriptTag.type = 'text/javascript';\n scriptTag.defer = true;\n scriptTag.src = src;\n if (onload) {\n scriptTag.onload = onload;\n }\n document.head.appendChild(scriptTag);\n }\n\n function executeWidget(configuration, storefrontApiData) {\n if (storefrontApiData) {\n configuration._.data = storefrontApiData;\n }\n {{#if _.context.isEditorMode '===' true}}\n var scriptPath = (build) => `https://microapps.bigcommerce.com/product-set-widget/b5bcd08d0f4673db814c9ad9a35c90873a9f2f58/${build}-bundle.js`;\n if (window.BigCommerce\n && window.BigCommerce.initializeProductSet\n && typeof window.BigCommerce.initializeProductSet === 'function'\n && window.BigCommerce.initializeProductSetPageBuilderComm\n && typeof window.BigCommerce.initializeProductSetPageBuilderComm === 'function') {\n const productSet = window.BigCommerce.initializeProductSet(configuration);\n window.BigCommerce.initializeProductSetPageBuilderComm(productSet);\n } else {\n loadScript(scriptPath('storefront'), () => {\n const productSet = window.BigCommerce.initializeProductSet(configuration);\n loadScript(scriptPath('pageBuilder'), () => {\n window.BigCommerce.initializeProductSetPageBuilderComm(productSet);\n });\n });\n }\n {{else}}\n var storefrontScriptPath = \"https://microapps.bigcommerce.com/product-set-widget/b5bcd08d0f4673db814c9ad9a35c90873a9f2f58/storefront-bundle.js\";\n if (window.BigCommerce && window.BigCommerce.initializeProductSet && typeof window.BigCommerce.initializeProductSet === 'function') {\n window.BigCommerce.initializeProductSet(configuration).setup();\n } else {\n loadScript(storefrontScriptPath, () => window.BigCommerce.initializeProductSet(configuration).setup());\n }\n {{/if}}\n }\n\n if (dataIsNotPresent && storefrontApiQueryData) {\n executeStorefrontApiQuery(storefrontApiQueryData, function(storefrontApiData) { executeWidget(widgetConfiguration, storefrontApiData) });\n } else {\n executeWidget(widgetConfiguration);\n }\n })();\n</script>\n",
...
}
The custom_fields are present on the home, category, brand and product pages if they are the standard Stencil based pages.
When present, a product object will contain a custom_fields property, which is an array of {id, name, value} objects.
Where you find them varies.
The home page has product arrays in:
products.featured products.new products.top_sellers
For the category pages, they are in category.products.
For brand pages, it's brand.products.
And for product pages, it's just the one object in product.
More on the Stencil objects:
https://developer.bigcommerce.com/docs/storefront/stencil/themes/context/object-reference/schemas