Adding custom fields to featured products in Big Commerce

Question

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",
   ...
}

Answer 1

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

Answer 2

That is a Page builder widget. It is functionally separate from the Stencil context. The default Page Builder widgets are not very flexible. That is the default Product Set Page Builder widget, and it appears there is no way to access the custom fields on it.

If you want to get custom fields on a Page Builder widget, you will need to create a custom widget template that calls for the custom_fields in the GraphQL request.

Here is the API reference for creating custom Page Builder Widget Templates: https://developer.bigcommerce.com/docs/rest-content/widgets/widget-template#create-a-widget-template

There may also be an app you can install that adds custom widgets with more product support. Check https://www.bigcommerce.com/apps/categories/?query=widgets