YOUR PROFESSIONAL WEBSITE FOR $100

How to Add Custom Fields to Your Shopify Product Pages (A Liquid Code Tutorial)

Your products have a story. They have unique materials, special care instructions, or technical specifications that your customers need to know. But when you're setting up your store, you run into a common frustration: Shopify's standard product page only gives you a title, description, and variants. So, how do you add extra fields to a Shopify product page?

Many store owners think they are stuck, but there is a powerful, built-in solution that can completely transform your product pages: Shopify Metafields.

This step-by-step Shopify product metafields tutorial will show you exactly how to add, manage, and display custom data on your products. Even if you've never touched a line of code, this guide will walk you through the process for any modern Shopify OS 2.0 theme.

First, What Are Metafields? (And Why Variants Aren't the Answer)

It's important to understand the difference. Variants are for options a customer can choose, like Size (Small, Medium, Large) or Color (Red, Blue, Green). Metafields are for information you need to display, like "Material: 100% Organic Cotton" or "Shipping: Ships in 2-3 business days." Using metafields is the correct way to handle Shopify custom data on products.

The Modern Way: Using Shopify's Built-in Custom Data Feature

Older tutorials involve expensive apps or complex code. Thankfully, with Online Store 2.0 themes, the process is much simpler. We'll break it down into three clear steps.

Step 1: Create Your Metafield Definition in the Shopify Admin

Before you can add data, you need to tell Shopify what kind of data you want to store. Think of this as creating the empty box that you will later fill with information for each product.

From your Shopify Admin, go to Settings in the bottom-left corner.
In the side menu, click on Custom data.
Under "Metafields," select Products.
Click the Add definition button in the top-right corner.
Now, you'll fill out four fields. Let's use "Care Instructions" as our example:
- Name: Care Instructions (This is the human-friendly name you'll see).
- Namespace and key: Shopify will automatically create custom.care_instructions. This is the unique ID for your metafield. Leave it as is.
- Description: (Optional) Add a note for yourself, like "Washing and care instructions for this garment."
- Select content type: Click this and choose the type of data you'll be storing. For our example, Single line text is perfect. Click Select.
Click Save.

You have now successfully created the template for your custom field across all your products!

Step 2: Add the Custom Information to Your Products

Now that the field exists, you need to fill it in for each product.

Go to Products in your main Shopify Admin menu and select a product you want to edit.
Scroll all the way down to the bottom of the product page. You will now see a new section called Metafields.
You will see your "Care Instructions" field. Click on the empty field and type in the information for that specific product (e.g., "Machine wash cold, tumble dry low").
Click Save.

You have now successfully saved your first piece of custom data. Repeat this for any other products that need it.

Step 3: Display the Metafield on Your Product Page with Liquid

This is the part that involves a tiny bit of code, but don't worry—it's a simple copy and paste. This is the final step in your Shopify product page customization.

From your Shopify Admin, go to Online Store > Themes.
Find your current theme, click the three-dots icon, and select Edit code.
In the file list on the left, find the "Sections" folder and click to open it. Find the file named main-product.liquid. Click to open it.
Now, you need to decide where you want your custom information to appear. A common place is right below the product description or near the "Add to Cart" button. Scroll through the code until you find a logical spot.
Copy the code snippet below:

{% if product.metafields.custom.care_instructions != blank %} <p class="product-metafield"> <strong>Care Instructions:</strong> {{ product.metafields.custom.care_instructions }} </p> {% endif %}

Paste this code into the main-product.liquid file where you want it to appear.
Click Save.

What this code does: It checks if your "Care Instructions" field has been filled in. If it has, it will display a line of text that looks like this: Care Instructions: Machine wash cold, tumble dry low.

You've done it! You now know how to display metafields on Shopify.

Conclusion: Unlocking Your Product Pages

Mastering metafields is the key to creating rich, informative product pages that answer customer questions and drive sales. While this guide covers a simple text field, you can use this same process to add files, images, colors, and more.

If this process feels overwhelming, or if you need more advanced Shopify theme customization liquid edits—like creating Shopify product information tabs or complex conditional logic—that's where expert help is invaluable. My business is dedicated to handling the technical side of Shopify so you can focus on selling.

For a free, no-pressure consultation and a quote on your project, call me directly at (608) 888-3735.