Listing

This document outlines the steps and best practices for creating metaobjects listings in Webflow using Smootify.

Learn how to fetch metaobjects data from your Shopify store and display it in visually appealing grids and lists on your Webflow site.

You can create metaobjects listings using only one method

Custom Elements

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;

Load metaobjects directly from Shopify

Specific project requirements might necessitate loading metaobjects created in Shopify, rather than using Webflow's CMS collections lists. For example when you need to let your customer modify small things directly from Shopify and you don't want to let him mess up with your Webflow project. Or when you for example want to use our Add-on Metaobject Creator to create complex interactions with your end site visitors

Key Concepts:

Metaobject Template:
- You design a single 'Metaobject Template', and Smootify, leveraging the Shopify Storefront API, automatically replicates that template for each metaobject you have in Shopify.
- Dynamic data from the metaobject fields is then populated into each Metaobject Template.
Dynamic Data Binding:
- Custom attributes and Custom Elements within the 'Metaobject Template' dictate where dynamic Shopify data will be injected into the static elements by Smootify.

How to create a Metaobject Listing

Copy our Component

Metaobject Listing

List of Metaobjects fetched from Shopify

Copy Element

Customize the Attributes

On the Custom Element smootify-metaobjects 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

Product Metafield

You can load list of metaobjects with attributes explained inside the relative doc, but those are limited to max 10 references per field. If you need to show more references or even use pagination you have to use Metaobject Listing. Starting from Smootify v1.0.5 you can use select metaobjects by a product metafield. To do that you need a specific data-type attribute:

Name

data-type

Value

metafield.namespace.key

Where naturally you have to change namespace.key with the actual namespace and key of the metafield. Note that the metafield type must be a list of Metaobjects!

Additionally you have to add the attribute:

Name

data-product-id

Value

product id

So if you are in the Product Template page you can bind the value to the CMS:

Name

data-product-id

Value

Shopify ID

Limit

You can modify the number of metaobjects loaded by modifying the attribute

Name

data-limit

Value

number

By default it's set as 10. Avoid adding more than 100 as limit

Style the Grid Element

Inside the component you will find a Grid Element that will contain all loaded metaobjects, style it according to your needs

Style the Pagination Elements

Inside the component you will find 3 pagination buttons, with respectively the attributes:

Name

data-action

Value

next

Name

data-action

Value

prev

and

Name

data-action

Value

load-more

You can style them according to your needs, do not keep all 4 buttons at the same time, or you use previous/next or you use the load more

Design the Metaobject Template item

In the component you will find a Custom Element with tag smootify-metaobject. Add inside it all Webflow elements you do require to style properly your Metaobject Template Item.

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 Type	Webflow Elements	Info
`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:

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;
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

Metaobject Listing

On this page