How to display Shopify metafields in Webflow

‍

Using metafields you can customize your Shopify store by displaying additional information that's otherwise not included in the Shopify. You can for example show the size of the wheel of a bike you are selling or you can display the publication date of the book you are showcasing. Shopyflow offers a simple way to show your Shopify metafields in Webflow.

‍

Shopyflow currently supports the following product metafields:

• Single line text
• Multi-line text
• Rich text
• Image (using File metafield)
• Integer
• Decimal
• Date
• Date and time
• Dimension (also as list)
• Volume
• Weight
• True or false
• Color
• URL (also as list)
• Money
• Link (also as list)

You can check out this Shopify guide to find out about how you can use metafields in your own store.

You can learn more about Shopyflow metafield attributes here.

‍

① Displaying product metafields in Webflow

Shopyflow displays your product metafields by using the sf-show-metafield="METAFIELD KEY" attribute. Give this attribute to a text element inside a product container.

① In your product settings in Shopify, click on the metafield name to see its definition.

② In the page that opens, note down the namespace and the key values of your metafield. You will use these values to build your Shopyflow attribute which will display the metafield in Webflow. Shopyflow assumes your metafield's namespace is "custom". If you are using any other namespace, make sure to checkout the next sections in this guide.

③ We can display the Wheel size metafield using sf-show-metafield="wheel_size" attribute. When building your Shopyflow attribute, make sure to to use the key of the metafield (wheel_size). Do not use its name (Wheel size). Please refer to the previous image if necessary.

④ When using metafields (especially in product CMS template page), it's advised to wrap your metafield and its label with a div that has sf-metafield-wrapper="1" attribute. This will hide the content of the metafield wrapper when the product on the page doesn't have that metafield.

‍

② Displaying variant metafields in Webflow

Shopyflow displays your variant metafields by using the sf-show-variant-metafield="[METAFIELD KEY]" attribute. Give this attribute to a text element inside a product container.

‍

③ Using a metafield namespace other than "custom"

If you are using a namespace other than "custom", you will also need to add sf-change-metafield-namespace="[NAMESPACE]" attribute to your metafield displayer element in Webflow.

As seen in the image below, if the namespace of your metafield is "my_namespace" you will need to add sf-change-metafield-namespace="my_namespace" attribute to the same metafield displayer element.

④ Creating a new product metafield

1. In your product settings in Shopify, scroll down to the metafields section and click on View All.
2. Click on View Definition > Add Definition using the buttons on the top right.
3. Namespace is by default set to "custom". Shopyflow also assumes you are using "custom" as the namespace. If you are using another namespace make sure to check out the previous section in this guide.
4. Give your metafield a name and see how it automatically creates a key for you. You will use this key for the Shopyflow attribute in Webflow.
5. Add a description.
6. Select a metafield type. Make sure to pick a metafield that's supported by Shopyflow. See the list above for supported metafields.
7. Click save.
8. Go back to your product settings page in Shopify and assign a value to the newly created metafield and save your product.

‍

⑤ Displaying metafields in the cart

You can display product or variant metafields inside your Cart Line Item by using the same metafield displayers.