What are custom objects?

Imagine that you want to display, inside all your products, a "brand" tab. This brand tab should give a bit of context about the maker of the product: its name, its logo, maybe a bit of history...

Before custom objects, you could simply create those fields into the product definition, maybe inside a "Brand" group to make it easier to organize. Then, you would go over your products, and you would duplicate the same information for all the products that share the same brand. If you have 10 or more products and realize you've made a typo... you're good to start again from zero, by doing the change as many times as you have products for this brand.

Custom objects are an elegant way to solve this issue by allowing you to create your own types, and then creating custom objects for those types. You can then relate those types to a product, article or collection. Now, if you find an error, you just need to edit the text once... and it will update it everywhere. The best is that this feature is entirely based on Shopify metafields infrastructure, so all your content get indexed and served using the super fast Shopify CDN.

Here are some other usage idea for custom objects:

• Create an "author" type, with fields such as name, Twitter URL, Instagram profile, short bio. Then, add a relation to this type within your "Article" resource.
• Create an "instruction" type, with fields such as description, manual PDF, washing temperature... Then, add a relation to this type within your "Product" resource.
• ...

Let me guide you through the exciting world of custom objects.

Step 1: creating your types

The first step is to create our new type. To do that, from the app home page, click on the new "Custom objects" tile in the "Configure metafields" section:

Create a new type. For instance, call it "Brands", and add the field you want, like for a normal definition:

Contrary to normal resource definitions, you cannot display Liquid code here. This is because contrary to normal resources (such as "products", "collections"...) that are already unique, those custom type do not exist in Shopify system. Instead, SuperFields will automatically generate a unique metafield namespace when you create the custom object itself. 

In this short example, I've just created three fields of different type. Please note that, as of today, types cannot have relations to other custom types.

Step 2: adding a relationship into a Shopify resource

Now that we have created a new type, we can add a new field into our Shopify resource. As we're referring to a brand, a common place to display brand information is on product page. Therefore, let's edit the product metafield definition by clicking on the "Products" tile of the "Configure metafields":

Inside the product definitions, create a new field (in the group of your choice, or within a subgroup, or whatever make sense for you). Give it a name, and for the "Field type", choose "Custom object". A new field will appear with all the custom types that you have created so far. In my case, I just need to choose "Brands":

Save the field.

Step 3: editing the Liquid code

Once you have created the relationship between the product and your custom type, while on the product metafields definition, you can click on the green "code icon". This one will reveal automatically all the fields of your custom type (in our case name, history and logo), and the app will give you an example markup to display it in your code.

Use the selector to iterate through all the available properties.

Step 4: creating your custom objects

Let's go back now to the app home page.

On the "Edit metafields" section, you will find a new type, called "Brands (custom type)":

Whenever you create a new type, it will appear here, along the traditional Shopify resources.

Click on the "Brands (custom type)" tile. You will be redirected to a new page where you can see all the custom objects created so far, adding new ones, and editing the metafields. After adding a few brands, here is how it looks:

You can edit the properties by clicking on "Edit metafields". For instance, here is how it looks for the Louis Vuitton example:

Don't forget to save the metafields before leaving!

Step 5: associating the custom object with a Shopify resource

Now that we have defined the values for our custom objects, we can go back to a product metafields. You can now edit the "brand" field we've added to the product, and choose the brand from the ones you have created:

Just save, and you're done!

After a few seconds, assuming that you have properly modified your Liquid code, the information about the brand will display.

The beauty of custom objects is that you can now associate this brand to a lot of different product, without having to repeat all the information about the brand. If you ever need to modify information about the brand, you can simply edit it directly from the custom object metafields once, and all the Shopify objects that had a relationship to this custom object will be automatically updated.