Accounts with access to the CMS feature include an external CMS collection named "BigCommerce Products." This CMS collection pulls various product properties from the store's catalog and makes them available for use in Custom Elements.
The following properties are available in this CMS collection. The data source on the custom element must be set to "BigCommerce Products" in order for the product data to be displayed.
General Product Details
Basic details about the product include:
body_htmlcreated_athandleidtags(This property leverages the product's Search Keywords from the BigCommerce catalog.)titleupdated_at
Main Product Image Properties
Values for the main image of the product are available in the image nested object.
image.altimage.idimage.product_idimage.srcimage.src_standardimage.src_thumbnailimage.src_tinyimage.src_zoomimage.updated_at
All Product Images
Values for all of the images that have been uploaded for a product are available in the images nested object.
images.altimages.idimages.positionimages.product_idimages.srcimages.src_standardimages.src_thumbnailimages.src_tinyimages.src_zoomimages.updated_at
Product Options
The options of the product are available as a nested object.
options.idoptions.nameoptions.positionoptions.product_idoptions.values
Product Variants
The properties of variants for the product are available as a nested object.
variants.barcodevariants.compare_at_pricevariants.idvariants.image_idvariants.inventory_quantityvariants.inventory_trackingvariants.option_values.idvariants.option_values.labelvariants.option_values.option_idvariants.option_values.option_display_namevariants.pricevariants.product_idvariants.skuvariants.titlevariants.weightvariants.weight_unit
Example: {{product.variants[0].price}} will display the price of the product's first variant. Please note: the currency symbol is not included with the price, so you'll want to add one before the price variable in your custom element code: ${{product.variants[0].price}}
Related Articles