Metaobjects

Single Metaobject

Metaobjects / Single Item

Load a specific metaobject directly from Shopify

Loading a single Metaobject from Shopify offers several advantages, especially when you need specific, structured data for a particular context.

How to configure [Shopify]

Create the metaobject definition

Create the metaobject definition from Shopify panel > Settings > Custom Data > Metaobjects. You can create it in whatever way you like, just be sure to enable the options:

  • Active-draft status;

  • Storefronts API access;

How to fetch a Metaobject from Shopify

Copy our Component

Metaobject

Metaobject loaded from Shopify

Copy Element

Customize the Attributes

On the Custom Element smootify-metaobject there are 2 Custom Attributes that you have to modify:

Type

Name
data-type
Value
metaobject_type_to_load

For example if you created a Metaobject definition with type "testimonials" use the attribute

Name
data-type
Value
testimonials

Handle

You must modify the attribute

Name
data-handle
Value
metaobject_handle

With the handle of the specific metaobject you want to load

CMS

You can naturally also think about binding the value to a CMS value

Add the metaobject attributes

On any Webflow static element you added inside the smootify-metaobject custom element, you can add the attribute:

Name
metaobject
Value
metaobject_field_key

to bind that static element to the corresponding field defined for the metaobject

Supported Fields

Shopify TypeWebflow ElementsInfo
Single Line Text
Any text element
Will output the text of the field
Multi Line Text
Any text element
Will output the text of the field
Integer Number
Any text element
Will output the number of the field
Double Number
Any text element
Will output the number of the field, the number of digits to output can be customized with the attribute
Name
data-digits
Value
2
URL
Any link element
Will output the selected link
File / Generic File
Any link element
If you select generic file you can output the link of it
File / Image File
Any link, image and div element
If you use it on a link element the link to the image will be rendered, while on all other elements you will see the image or the background image
File / Video File
Any div element
Will output a video player of the file
Date / Date Time
Any text element
Will output the date / date time in the current browser format
Dimension / Volume / Weight
Any text element
Will output the selected value
Money
Any text element
Will output the money using the shopify currency format
True or False
Any element
Will hide/show the element based on that value
List of Single Line Text
Any text element
Will show all texts concatenated by a comma.
You can change the separator by using the attribute
Name
separator
Value
,
If you use the attribute
Name
separator
Value
repeat
the element itself will be repeated
List of File / Generic File
Any link element
The link element will be duplicated once for each file, the text content of the link will be the "alt" of the file and the link will be connected to the file link
List of File / Image File
Any image element
The image element will be duplicated once for each file

Only for fields of type Single Line Text you can use an additional attribute:

Name
data-attr
Value
attribute-to-modify

This will ask Smootify to output the value inside the attribute explained in the attribute instead of setting the value as the text of the element.

E.g:

Name
data-attr
Value
data-id

Will set the value of the field in the attribute data-id of the element.

Fields Visibility

Learn how to show or hide elements based on whether a fields exists and what its value is.

To control visibility of an element you have principally 2 custom attributes to use:

Name
if-metaobject
Value
field_key

This attribute will show the element if the field exists with 2 exceptions:

  1. In the case you used a field of type True / False it will be shown if the field is set and is set as True;

  2. In the case of fields of type Integer Number, the element will be shown if the metafield is set and the value is higher than 0;

The second custom attribute is:

Name
unless-metaobject
Value
field_key

This attribute will act in the opposite way of the first one, so the element will show only if the metafield doesn't exists.

Check for Value

By default metafields visibility attributes will just check for the existence of the metafield. If you wish instead to check for the value that is inside the metafield add also the attribute:

Name
data-check-value
Value
Desired Value

For example if you created a field of type Single Line Text with key my_option and you want to show an element only when the metafield value is for example Option 1.

You have to use the custom attributes:

Name
if-metaobject
Value
my_option
Name
data-check-value
Value
Option 1

Here are some examples illustrating why you'd choose this approach

Example cases

Ehnance the Vendor Page

For example you would like to load a single metaobject of type brand on the Webflow Vendor template page, in this way you can add different fields controlled directly from Shopify without tampering with the Webflow CMS

For example you could create a CTA section in Webflow with dynamic content loaded directly from Shopify, to allow the store owner to dynamically change a promo section without going into Webflow

Product-specific example cases

There are many other cases where you want to load metaobjects associated to products, like: Size Charts, List of ingredients, faqs, etc.

For all those cases, you are on the wrong doc 😅

Follow Product metafields doc!

Previous

Listing

Next

Metaobject Creator

On this page