Shopify Metafields allow merchants to extend product data by attaching custom, structured fields to products, variants, collections, and other Shopify resources. These fields are commonly used to store additional information such as product specifications (e.g., wheel size for a bicycle) or metadata (e.g., publication date for a book).
Shopyflow provides a streamlined mechanism for rendering these metafields within Webflow. By leveraging Shopyflow’s sf-* attribute system, you can bind Webflow elements to specific Shopify metafield values. The metafields you create in your Shopify store can be displayed both in the Buy Module and in the Cart Item components. Follow the below guide to learn how to create and display metafields in your storefront.
Shopyflow currently supports the following product metafields:
Metafield displayer is made of 2 components. An outer wrapper called --Metafield Wrapper and the --Metafield component itself.
Metafield Wrapper is the outer wrapper element that takes the sf-metafield-wrapper attribute with no value needed. It groups the label with the the metafield displayer element and hides them both if the current product doesn’t have the metafield value.
There are below two types of metafields available in Shopyflow
Product Metafields are assigned to the products in Shopify and they can be displayed using the sf-show-metafield attribute with the {Metafield Key} assigned as the value.
Product Metafields are assigned to the products in Shopify and they can be displayed using the sf-show-variant-metafield attribute with the {Metafield Key} assigned as the value.
Shopify uses namespace and key pairs to identify your metafields.
Metafield Key is the unique identifier for your metafield that is set when adding the metafield definition.
Namespace is the identifier that groups the metafields. In Shopify the default namespace is custom and Shopyflow also by default assumes your namespace to be custom. If you for some reason use a different namespace you can declare your custom namespace by using the sf-change-namespace attribute in your metafield component
