Getting started with SuperFields

IMPORTANT DISCLAIMER: SuperFields requires you to modify the code of your theme to work. As a consequence, if you do not feel comfortable with coding or if you have zero knowledge, we highly recommend you to let an experienced developer do the initial configuration for you. Please refer to this article if you want to contact a developer.

SuperFields is an application that allow you to attach additional information to your products, collections, blog articles... by using an easy to use interface. Those additional information are called "metafields" in Shopify.

Metafields can be used for a lot of different cases and depend on your specific needs. Here are some common cases for metafields:

A list of product instructions that are unique to each product.
Tabs that are unique to each product.
Hand-picked related products.
An alternative collection image (for instance, you could use the default collection image that Shopify offers for home page image, and then using a horizontal collection banner for collection page through a metafield).
A different author name for your article (useful for guest blogging!).
A featured image for your pages.
...

In other words, metafields can be used to save additional data, beyond what Shopify offers you by default. Metafields are most useful when you need specific data that is different for all products / blog articles...

In this guide, we are going to go through the process of adding a custom data to our product. Hopefully this will give you enough information about the process.

First, let me explain what we will achieve. Here is my product page:

This looks pretty good isn't it? I have my picture, my product's title, a short description... All of those information are directly from the standard product page.

But I want my store to feel unique, and I'd like to add a small catchy phrase below my product title, and being able to choose a different color per product that would pop up:

This definitely added a nice, little touch! Of course, I could directly modify the Liquid template to add this small catchy phrase, along with the blue color. But as we've told, I'd like to be able to set a different phrase + color per product.

Unfortunately, there is no "funny little catchy phrase" in the Shopify product edition... But hopefully... metafields to the rescue!

1) Backing-up the theme

First of all, let's create a back-up of the theme. This way, all changes will be done on an unpublished version of the theme, and if you break the theme, your customers won't be affected.

To do that, open the Themes section of your Shopify admin. Click on the three dots icon (...) for your active theme, and choose Duplicate:

This will create a new copy of your theme. You can rename it to something more meaningful like "Theme Backup":

Make sure that you do not publish this theme yet, as from now on, all our changes will be done in this unpublished theme.

2) Configuring the app

Now, let's have some fun.

Open the SuperFields app. Here is what you will see:

As you can see, the app is separated in two section: metafields edition and metafields configuration:

Metafields configuration will be done only once (or when you need to add new fields). This is what the developer will do (or you if you feel confident enough!). Basically, the configuration is saying which fields you want to be able to edit for all your products, collections, blog articles... For instance, in our case, this means "I want to add the fields catchy product sentence and catchy product sentence color").
Metafields edition, on the other hand, will happen whenever you need to edit the values for your products (much more often). For instance, in our case, this means "I want to set Run faster than light! catchy phrase and a blue color for the product Air Max 1).

As a consequence, you will only likely spend a bit of time initially on the metafields configuration, but once it's properly configured, you will likely do not need to go to this section anymore.

Now that you understand the distinction between those two categories, let's start to configure the metafields so that we can add our two new fields.

Because we want to create fields for products, let's click on the "Products" button in the "Configure metafields" section:

If this is the first time you are using the app, you will face this screen:

NOTE: some theme can offers native integration with SuperFields and speed up the configuration process. But, most likely, your theme will not have any direct integration with the app, so "Your theme does not have any integration with SuperFields" will likely appear.

SuperFields allow you to organize your fields by "Groups" so that they are easier to edit in the future. For instance, if you end up creating ten or more fields, you will likely want them to be organized by section, instead of having them completely unorganized.

But, for now, let's click on "Create your first group". In the modal that appears, fill it this way:

As we have very few fields, I have decided to call our group "General" (I don't have much imagination !). The namespace should automatically be generated for you, and you should not change it (the namespace is used to be able to retrieve the fields in the code itself).

The description is entirely optional, and it can be used to provide some help when editing the data for each products. If you have multiple person working with you on the store, you could have added a short description like "Those information will appear below the product's title".

Then, save!

If everything goes well, here is what you should see:

Cool, we have created our first group!

But we still do not have any fields created... Let's do that now!

Click on "Add a field" button, and you should see a new modal appearing, and make sure to fill it this way:

As for the group, the "Key" will automatically be filled as soon as you type the field name.

The "User hint" is used to give some indication about the field, similarly to the group's description. Here I have entered a short instruction, so if other people who work with me edit the product metafields, they can know directly what is the best format for this catchy little phrase.

For the field type, I have chosen the default type (Simple text).

Save.

Then, let's click again on "Add a field", and in the new modal that appears, fill it like this:

Once again, I have given the field a name, I have entered a user hint (this is optional), and for the field type I have chosen "Color" instead of "Simple text".

Save.

Here is what you should see now:

Pretty nice isn't it?!

Notice the green button next to each field (the one with the "</>" icon). This icon allows you to get the code needed to display the data in your Liquid template.

3) Modify your template data

We have configured the app but, at this stage, your theme is still not configured to display the data that we have created in the app.

Let's now edit the theme to do that!

Go back to the list of themes, and find the back up that we have created in the first step (remember, by working on an unpublished theme rather than the live theme, we make sure that, in case of errors, we do not break the access to your theme for your customers).

In the theme, click on the three dots icon and then on "Edit HTML/CSS":

We will now need to edit the template where you want the data to appear (once again, this requires basic knowledge of HTML and Liquid ; if you're not confident at all with this, pay a developer to do it!).

In my case, because I want to add information on product pages, I need to open the "product-template.liquid" file in the sections folder. Once I have located where I want the information to appear, I can now copy paste the code from the app.

Important note: the instructions can greatly vary depending on your theme. For older themes with an empty "sections" folder, you may need to edit the "product.liquid" in the template folder instead. For a lot of premium themes that have a more complex structure, the code may also be in other places. If you're unsure about how to do it, we would recommend you to reach a third-party service such as TaskHusky to do the work for you.

To get this code, go back to SuperFields app, and click on the small green icon:

By clicking on the first one, here is what appears:

NOTE: clicking on "Copy code" button will automatically copy the whole Liquid code to your clipboard.

After some work on the template, here is what it looks:

Because I wanted this catchy phrase to appear below the product's title, I have located first where the product title appeared in the template. Then, I have just copy pasted the code from the SuperFields app into my template (I have just slightly renamed the variable to make it a bit easier to understand).

Finally, make sure to save the template!

Let's click on the "Preview" button at the top in the code editor. This will allow us to preview the unpublished theme (and hence seeing our changes) without having to publish the theme first.

Let's navigate to my product... and here is what I see:

As you can see, nothing has changed... yet!

This is perfectly expected: we have configured the metafields in SuperFields, we have modified our theme to display this data... but we have not set the data for this particular product yet!

4) Edit the metafields

There are two ways to edit a product's metafield: either by searching the product directly through the app, or by accessing the metafields through the product page in Shopify.

Let me show you the second way as it is easier.

First, you need to open your product in the Shopify administration (where you edit the price, description...):

As you can see, no new fields have appeared here.

Unfortunately, this is expected: Shopify does not allow apps to add new information here. However, at the top, you will find a button called "Apps". When clicking on it, you should see a line that reads "Edit product metafields" (along our little monkey!):

Click on this button. You will automatically be redirected to the SuperFields app and... wow! Our metafields that we have configured earlier will now appear:

As you can see, everything is empty yet. Let's enter some interesting data for this product:

Make sure to click on Save so that metafields are saved on Shopify servers.

You can now reload the product page, and here is the magic (note: it may take up to 30 seconds before the changes appears in your page):

If you open another product page, you will realize that only this product has this new piece of data, which indeed shows that metafields allow you to set different information per product.

5) Publish the theme

Remember: at this stage, we have applied our Liquid modifications to an unpublished theme, so your customers will not see your change yet. Make sure to play a bit with your store to make sure that nothing has break.

Once you can confirm it's working, go back to the themes page, and publish the name. We recommend you to keep the old theme for a few days/weeks, so you can ever go back to this one if you detect some errors.

Conclusion

As you can see, SuperFields allowed us to easily create new fields that can be edited directly in the SuperFields application through an easy to use interface that mimics the Shopify interface.

As of today, SuperFields allow you to add metafields to products, collections, blog articles and pages (we hope to be able to add support for variants soon). In addition of the "Simple text" and "Color" field types that we've experimented together, the app also comes with more advanced field types like date, price... or even field that allows you to pick products, collections...