This document is a guide for developers. If you do not have access to a developer, please refer to Shogun's list of recommended partners and services.
Accounts with access to the CMS feature include an external CMS collection named "Shopify 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 external CMS collection. The following properties are available in this CMS collection. The data source on the custom element must be set to "Shopify Products" in order for the product data to be displayed.
General Product Details
Basic details about the product include:
body_htmlcreated_athandleidproduct_typepublished_atpublished_scopestatustagstemplate_suffixtitleupdated_atvendor
Main Product Image Properties
Values for the main image of the product are available in the image nested object.
image.altimage.heightimage.idimage.product_idimage.srcimage.variant_idsimage.width
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.heightimages.idimages.positionimages.product_idimages.srcimages.variant_idsimages.width
Product Metafields
The custom metafields of the product are available as a nested object.
metafields.keymetafields.value
Example: {{product.metafields[0].value}} will display the value of the product's first metafield.
You can also use a for loop to access a metafield by the name of its key:
{% for field in product.metafields %}
{% if field.key == 'badge' %}
<strong>{{field.key}}:</strong> {{field.value}}
{% endif %}
{% endfor %}
Note: In order to display metafield data, Shogun must have permissions at access the metafields in your Shopify account. If you installed Shogun prior to September 27, 2023, you will need to update your app permissions. If you installed after September 27, 2023, no further action is needed.
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.fulfillment_servicevariants.gramsvariants.idvariants.image_idvariants.inventory_item_idvariants.inventory_managementvariants.inventory_policyvariants.inventory_quantityvariants.positionvariants.pricevariants.product_idvariants.requires_shippingvariants.skuvariants.taxablevariants.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: