Metaobject Creator

This document introduces the "Metaobject Creator" add-on, a powerful tool that bridges the gap between Webflow's intuitive form building capabilities and Shopify's robust data management through Metaobjects. With this add-on, you can empower your users to create and populate Shopify Metaobjects directly from your Webflow website, eliminating the need to manually enter data in the Shopify admin.

What is the Metaobject Creator Add-on?

This add-on allows you to build custom forms in Webflow that directly interact with your Shopify Metaobjects. Imagine creating a form for:

• Customer Reviews: Allow customers to submit detailed reviews with ratings, comments, and images, which are automatically stored as Metaobject entries.
• Product Submissions: Enable vendors or creators to submit new product information, including specifications, images, and pricing, directly through your Webflow site.
• Event Registrations: Collect detailed information for event registrations and store it as structured data in Shopify Metaobjects.
• Custom Data Collection: Build any form to gather and organize specific data related to your business, such as feedback, surveys, or applications, and store it directly into your shopify metaobjects.

Why Use Webflow Metaobject Forms?

• Simplified Data Entry: Eliminate the need for manual data entry in the Shopify admin, saving time and reducing errors.
• Enhanced User Experience: Provide a seamless and intuitive way for users to interact with your Shopify data through Webflow forms.
• Customizable Forms: Leverage Webflow's powerful form builder to create visually appealing and user-friendly forms that match your brand.
• Direct Shopify Integration: Capture data directly into Shopify Metaobjects, ensuring data consistency and accessibility.
• Automated Workflows: Automate data collection and processing, streamlining your business operations by also leveraging new Shopify Flows triggers!

How to configure [Shopify]

How to configure [Webflow]

Copy our Component

Metaobject Creator

Metaobject creator form

Copy Element

The component is just a Custom Element with tag metaobject-creator that inside has a normal Webflow Form!

Change the attribute

On the Custom Element metaobject-creator there is a Custom Attribute that you have to modify:

Type

Name

data-type

Value

metaobject_type_to_create

For example if you created a Metaobject definition with type "testimonials" and you want to connect the form to that metaobject type use the attribute:

Name

data-type

Value

testimonials

Configure the inputs

Inside the form you have to add the input fields that are necessary for the metaobject creation.

Check the Input Names

The Input Names you create in Webflow must match exactly the keys of the fields you created in the Shopify metaobject definition.

The key is usually the snake_case version of the label

E.g: My title -> my_title

Configure the Active/Draft Status

By default the metaobjects are created with Active status, if you want to create them instead with Draft status, add the attribute:

Name

data-draft

Value

true

on the metaobject-creator Custom Element.

[Optional] Create Flows

If you want to further automatize your processes, you can use the Shopify Flow app to automatically react to any time a Metaobject get's created

[Optional] Use Customer Accounts Visibility

You can use customer accounts and flows in order to enable or disable the metaobject creator form only for certain users.

E.g you can use customer tags, or a customer metafield to enable disable the creation of metaobjects based on your conditions.

For example you can allow to create max a tot of metaobjects per customer, so you would set a flow that on product purchase set a certain amount of credits to the customer and another flow that on each metaobject creation decreases the tokens. (Just fantasizing, but you have really unlimited possibilities)

File Uploader Input

Inside the metaobject creator you can also use the File Uploader

File Input

Allow file upload for the metaobject creator

Copy Element

The file will be uploaded directly on Shopify so the limits are imposed by Shopify:

• Maximum file size is 20MB;
• Maximum resolution is (4300 x 4300);
• Allowed formats: png, jpg, web, csv, pdf and json.

If you need different limits we suggest you using UploadCare or create a solution with Cloudflare R2 that is the cheapest file hosting on the market.

In that case you will use a different upload solution be sure to set the field on Shopify as url, Shopify File field will not accept files not uploaded on Shopify.

Options

The component can be customized with the Custom Attributes explained in the section below:

Input Name

By default the Input will be created with name File, if you need to customize the name just use the attribute:

name

name of the field

Multiple Files

If you need to allow multiple files uploading you can use the attribute:

data-multiple

number of max files

Min File Size

If you need to customize the minimuum file size required you can use the attribute:

min-file-size

size string

for example

min-file-size

2MB

Will set the minimuum allowed file size to 2MB

Min Resolution

If you need to customize the minimuum file image resolution required you can use the attribute:

min-resolution

min resolution number

Show Image Preview

If you want to see the preview image of the file just uploaded in the file input, you can use the attribute:

data-preview

1

Accept only images

By default the file uploader will accept all file types accepted by Shopify, if you want to accept only images you can add the attribute:

data-only-images

1

Ignore Inputs

If you need to include inputs that are not explicitly defined within the Metaobject's structure, prefix the input name with an underscore (_). This convention allows you to add extra inputs that will not be sent to the Metaobject.

Example:

_accepted