Using Metafields to Add Unique Content To Products

Hey everybody. Yesterday we did a little bit of touch on Metafields when we talked about keywords and how to add them to your shop by product pages.  

Today we're going to learn:

How to use metafields to add custom content to products

Today we're going to show how you can use Metafields to add specific content to each product page.

If you have a product that has a specific piece of information that is required on a particular product and you don't want to have it show up on every single product page, Metafields is what you're going to use to do that.

I'm going to start by giving you a quick demo on adding Metafield expandability to your site. I'm going to be using ShopifyFD to access my Metafields.

Let's have a look at our product page. We've got a double flap, lambskin leather shoulder bag and I want to change the shipping information for this product specifically.

Because there may eventually be other products that I might want to offer free shipping on in the future, I'm going to change the shipping inside Metafields instead of just changing this product description.

Online Store > Themes > Active Theme > Actions > Edit Code > Snippet > product.liquid

We'll have a look for our shipping items by using cmd+f or ctrl+f and typing “shipping”. The two shipping items that we have right now are

1) If a product tag contains "supplier", show us one type of shipping,

2) If a product tag does not contain "supplier", display a different type of shipping.

We need to create a Metafield to display on this product page.

In a new tab, let’s go-to Shopify > Products and select the product you are working on and load ShopifyFD here. Here we can create a new Metafield.

This is going to be a global Metafield because we want it available everywhere. We want to create a new key called shipping. The value is "free two-day shipping". This is what we want to show up on our product page underneath shipping for this specific product. Once saved, we can see we now have a global Metafield for shipping.

Now we need to display this information on the product page.

So for here [Online Store > Themes > Active Theme > Actions > Edit Code > Snippet > product.liquid] we have our previous: if contains shows this snippet, if/else contains this snippet.^[a]

<div class=”product_shipping”>
<h3>Shipping</h3>
{% if product.tags contains ‘supplier’ %}
<p>{{ section.settings.shipping_text_supplier }}</p>
{% else%}
<p>{{ section.settings.shipping_text }}</p>
{% endif %}
</div>

We're going to add more code beneath the existing code.^[b]

{% if product.metafields.global.shipping &}
{{ product.metafields.global.shipping }}
{% endif %}
<br />

We can style it a little bit with some HTML, so let's put a <p> paragraph tag </p> around it and  save it. Go over to the product page and refresh to see the two-day free shipping offer.

Next, we need to populate all the Metafields for all of our products. It’s very time consuming to manually update each product.

To simplify the process, we’re going to install an app called Metafields 2. Metafields2 allows you to modify all of the Metafields in your entire store with a really simple interface. Metafields2 is a paid application so you'll need to have billing information set up to install paid apps. First, Metafields2 will start pulling in all of your products and looking at all of the Metafields inside them.               

Within the app you can go into specific products and expand the product to see which Metafields are filled out. For the first product, we can see I've filled in free shipping. If I wanted to change it for another product, I could add free U.S. shipping. As you can see, the Metafields have different values set up that display accordingly on our website.

The app makes it very easy for us to go through and quickly change each product in a table-like format.

Metafields2 also allows you to add additional Metafields. So you don't even have to use the ShopifyFD to add the Metafield. You can go straight into configure, you can go to your products, and when you configure your products, you can add the namespace, the key, the type, whether it's a string or an integer, and you can give a description so that people know what it is.

That is essentially how you use Metafields to manage all of your additional data that you want to put inside of Shopify.

Metafields makes it easy to expand your product pages beyond what Shopify originally just gives you.