How to add custom fields to product pages in Shopify: A simple guide

You can add custom fields to Shopify product pages in three ways:

1. Using an app.
2. Editing the theme code.
3. Using metafields.

In this article, I’ll explain the exact steps you need to follow to add custom fields to product pages in Shopify using all three methods. That way, you can choose the best approach that suits your skills and needs.

I’ll also share reasons to use custom fields, different ways to customize your product page using custom fields and share five app recommendations to help you start.

Make sure you read until the end so you don’t miss out on anything.

Let’s get straight to it.

How to add custom fields to product pages in Shopify using an app

Using apps to add custom fields to Shopify product pages is the most versatile method. You will need to edit some code but you can do a lot more with an app than you can with the default metafields in Shopify.

Let’s look at how to add custom fields to your Shopify product pages using an app.

1. Install the ACF Metafields Custom Fields app

Go to the Shopify app store and log in to your account.

Search for ACF or use the link below to access the app directly.

ACF Metafields Custom Fields

Select Install, and on the installation page, choose Install app.

2. Create a custom field in the app

Open the app in your Shopify admin, go to Custom Fields, and in the Configuration tab, scroll to Advanced Custom Fields and select Products.

Drag and drop the Selection field into the Product Fields section and configure the following details:

1. Namespace: Enter a value to create a group for the field. This is optional.
2. Key: Enter a unique key for the custom field.
3. Label: Add a label to display for the custom field.
4. Instruction: Add help text describing the purpose of the custom field.
5. Field applies to: Select which products the field should apply to.
6. Add values for selection: Enter one or more values for the custom field.
7. Allow selection of multiple values: Check this box to show multiple values for the custom field.

Here’s how I’ve configured the values to create a custom metafield that displays the shipping time on the product page.

Once you configure all settings, select Done to create the custom field.

To save the custom field, click Save on the top-right corner of the screen.

The custom field will now appear in the Product Fields section. From there, select Code and use Copy to copy the Metafield Code for the custom field.

3. Add the custom field to your products

Now, it’s time to add the custom field to your products.

To do that, open the Products tab inside the ACF app.

Choose any product to open its configuration settings. You’ll see the Shipping time selection field there.

Use the dropdown menu to select an applicable value and choose Save when you’re done.

Repeat the process for all products where you want to display the custom field.

4. Add the custom field to your product page template code

Now, the product has the data for your custom field. But we still need to add the custom field to your theme’s product page template file. Let’s see how to do that.

Go to Online Store > Themes in the Shopify admin, select the ellipsis (…), aka the three dots icon, next to your store theme, and choose Edit code.

Open the main-product.liquid file in the Sections folder and use Ctrl + F or Cmd + F to search for “{%- when ‘inventory’ -%}“. In my template file for Dawn theme version 11.0, it’s located on line 128.

Add a new line before it and paste the following code over there:

{% if product.metafields.Shipping.shipping_time != blank %}
<div class="shipping-policy">
<h3>Shipping Time</h3>
<p>This item takes {{product.metafields.Shipping.shipping_time}} to ship.</p>
</div>
{% endif %}

The above code contains the “{{product.metafields.Shipping.shipping_time}}” placeholder we copied from the custom field app.

Optionally, you can also edit the text inside the paragraph “<p>” tags if you like.

Once you paste the code, choose Save to update the template file.

5. Verify the custom field on the product page

Head to your store’s front end and open any products to which you’ve assigned the custom field values.

The custom field value should display below the product price as follows:

How to add custom fields to product pages in Shopify using metafields

If you’re using a Shopify 2.0 theme, like Dawn, you can add product page custom fields using metafields. The best part is, you won’t need to mess with any code with this approach.

Here’s how to add custom fields to Shopify product pages using metafields.

1. Create a metafield definition

Log in to the Shopify admin, go to Settings > Custom data, and select Products.

On the Product metafield definitions page, choose Add definition.

Configure the following metafield definition values:

• Name: Enter a name to identify the metafield definition.
• Namespace and key: Proceed with the default value or add a custom value for your metafield.
• Description: Describe the purpose of your metafield.
• Select type: Choose how the metafield will be represented, such as text or integer.

2. Add values to the metafield

Once you select the metafield type, you may see a new Validations section.

I said ‘may’ because it doesn’t appear for certain metafield types like Rich text or True or false.

Assuming you’ve chosen a different type like Single line text or Integer, you need to configure the values for the metafield.

The value itself can be a single value or a list of values. For example, select One value to create a custom field for warranty or the country of manufacture.

After that, configure the minimum and maximum values for your selected metafield type.

3. Configure the metafield access options

Shopify recently introduced a new feature that allows you to control which parts of your store can use your custom data.

For example, you can use the metafiled exclusively for the backend or display it on the front end of your store.

Check the Storefronts checkbox in the Access section to give your storefront read-only access to the custom product page metafield.

Optionally, check the Use in automated collections option in the Features section to create automatic product collections using that metafield.

Finally, select Save to add the metafield to your store.

4. Add the metafield to your theme

Return to the Shopify admin homepage, go to Online Store > Themes, and open the theme editor by selecting Customize next to your preferred Shopify theme.

Use the top bar and select Products > Default product.

Then add a new Text block to the product template by selecting Add block inside the Product information section in the left sidebar.

Add a dynamic content source by clicking the Insert dynamic source icon next to the text editor.

Select the metafield you created in the previous step from the available options. Then, add more text before or after the dynamic content as needed.

Use the left sidebar and reposition the text block in the template as needed.

Select Save once you’re done.

5. Verify the metafield on the frontend

Edit a product and add a value to your custom metafield. For instance, I’ve added the metafield to the demo product I created in my how to add products in Shopify guide.

Once you add the metafield to the product and configure a value, you can check it on the frontend using the Preview option.

Here’s how the newly created product warranty field displays on my store:

How to add custom fields to product pages in Shopify by editing the theme code

If you prefer a more hands-on approach, you can add custom fields to your Shopify product pages by editing your theme code.

Let’s look at how that would work with an example where we add payment method icons to the product information section.

1. Generate the liquid code for your UI elements

Open the Shopify UI Elements Generator tool in a browser and choose the Methods of payment tab.

Select the payment methods you want to display on your product page in the Customize column. Choose the Resize option and set the size for the payment method icons.

Use the range slider control to increase or decrease the icon size. You can view the size changes in the Preview column on the right.

Once you’re happy with the size, select COPY TO CLIPBOARD to copy the code.

2. Create a new section and add the custom code to it

Open the Shopify admin, go to Online Store > Themes, select the ellipsis (…), aka the three dots icon, next to your store theme, and choose Edit code.

Expand the Sections folder in the left sidebar and select Add a new section.

Enter a relevant name for your section and choose Done. I’ve named my section file payment-icons.liquid.

Locate the main-product.liquid file in the Sections folder in the sidebar and open it. Copy all its contents into the payment-icons.liquid section file you just created.

Use Ctrl+F or Cmd+F to locate the following line in your payment-icons.liquid file:

{%- render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true -%}

In my section file, it’s located on line 313.

Add the liquid code you generated in the first step just after that line by adding a new line and pasting the code into it.

Doing this ensures that the payments icons only appear when the Add to cart and Buy it now buttons do.

Select Save to update the file.

3. Create a custom product page template

Next, select Add a new template inside the Templates directory.

Use the dropdown to choose the product template, select JSON, and enter a filename for your customer product template. I’ve named it “payment_icons“.

Choose Done to create your template.

In the newly created template file, edit the JSON code on line 4 and update the “type” value from “main-product” to “payment-icons“.

Select Save to update the template file.

4. Assign the new product page template to your products

Go back to the Shopify admin and open the Products page and choose a product to edit.

On the product edit page, find the Online Store section and use the Theme template dropdown to assign the custom product template.

Select Save to update the product.

5. Verify the custom field displays correctly on the product page

Open your product on the front end and verify the payment icons show up exactly where they’re supposed to.

If you’ve followed the steps correctly, they will show up just under the buy button, as shown in the image below:

3 reasons to add custom fields to Shopify product pages

Adding custom fields to Shopify product pages is a powerful way to provide additional information to customers while improving searchability.

Let’s look at three ways custom fields can help you increase customer satisfaction and sales.

1. Provide additional information to customers

Custom fields allow you to add information that isn’t typically found in the standard product description. For instance, if you sell clothing, you might add custom fields for sizing or material composition, which can help customers make informed buying decisions.

Informed customers are more likely to feel confident in their purchases which can result in fewer returns. It also increases customer satisfaction and loyalty, which are important for the long-term success of your online store.

2. Improve product personalization

Adding custom fields to Shopify product pages can also help with product personalization.

For example, if you sell jewelry, you might add a custom field for engraving options. This lets customers add a personal touch to their jewelry, making it more special and unique.

You can also use custom fields to offer more options for sizing or color choices. For instance, if you sell clothing, you might add custom fields for choosing a color or a specific size that isn’t listed in the standard options.

Offering more personalization options helps you increase the perceived value of your products, which can lead to higher sales and customer loyalty. It also lets you differentiate your products from competitors and ultimately drives more sales for your online store.

3. Make products searchable on and off your website

Another benefit of adding extra information to your product pages is that it helps customers find what they want faster. Here’s how.

Let’s say you sell shoes on your website and add custom fields for attributes like ankle support or sole material. Customers searching for high-top shoes or shoes with rubber soles will be able to use filters to find them in minutes instead of scrolling through each product.

And besides making products more searchable on your website, custom fields also help you make your product pages more search engine friendly.

For example, you can add custom fields for product metadata like author, publisher, and genre if you sell books. Search engines will use those fields to categorize and index your products, making them more visible to potential customers.

Better searchability across search engines and your own website will help customers find the products they need quickly and increase sales for your store.

Best Shopify apps to customize your product pages

If you plan to use an app to add custom fields to your Shopify product pages, read on to learn the top four apps you can use.

1. ACF: Metafields Custom Fields

ACF: Metafields Custom Fields is one of the most popular Shopify apps for adding custom fields in Shopify. With a respectable customer rating of 4.4, ACF is one of the only apps offering a free plan for adding custom fields to products and other store pages.

ACF key features:

• Supports all types of metafields.
• Easy to bulk edit, import, and export data in various formats.
• Supports retrieving liquid syntax.

ACF pricing: Free to install with limited features. Paid plans start from $4.99 per month.

2. Bonify Custom Fields

Bonify Custom Fields is a powerful app that integrates seamlessly with the Shopify theme editor. It supports all Shopify metafield data types and adds exclusive field types to help you build complex field groups with nested fields.

Bonify Custom Fields key features:

• Supports default Shopify metafield data types and includes exclusive field types.
• 10+ one-click widgets.
• Developer-friendly and easy to customize.

Bonify Custom Fields pricing: 14-day free trial, $14 per month after that for Shopify stores, and $19 per month for Shopify Plus stores.

3. Accentuate Custom Fields

Accentuate Custom Fields lets you define custom field types for any part of your Shopify store. With support for 50+ field types with content in multiple languages, it’s the perfect custom fields app for Shopify merchants selling globally.

Accentuate Custom Fields key features:

• Supports 50+ field types.
• Allows building cross-references between different Shopify objects.
• Free integration with TwicPics for easy image edits in Liquid.

Accentuate Custom Fields pricing: Free plan only for development and trial stores. 30-day free trial with paid plans starting from $20 per month.

4. Metafields Custom Field Master

Metafields Custom Field Master lets you build custom fields that blend seamlessly with your existing store branding. One of the best features of this app is its ability to import Metafields in bulk easily. It saves you time and makes it easy to manage multiple custom fields.

Metafields Custom Field Master key features:

• Fully customizable metafields.
• Dynamic logic for personalization.
• Easy one-click import and export.

Metafields Custom Field Master pricing: 5-day free trial. Paid plans start from $9.90 per month.

10 real-world examples of custom Shopify product pages

Need some inspiration for your product page design? Here are ten Shopify stores that use custom fields on their product pages.

1. Gymshark

Link to product page

Gymshark’s product page displays helpful product features below the product title, includes a size guide next to the size selection, and displays returns and delivery information right below the buy buttons.

2. Allbirds

Link to product page

The Allbirds product page includes a small-size disclaimer, free shipping and returns information, and a dedicated section highlighting the product USPs.

3. Hiut Denim

Link to product page

Hiut Denim’s product page contains extra accordion tabs for product-related details like sizing, measurement instructions, shipping & returns, and their free repairs policy.

4. Kith

Link to product page

Kith’s product page includes a link to a size guide for the product. When clicked, it launches a new modal container with the sizing information for the product and a short disclaimer.

5. Chubbies

Link to product page

The Chubbies product page has a few different custom fields. The most prominent field is the delivery time estimate. But my favorite is the Fabric & Fit tab which describes the fabric, fit, and feel of the product with some eye-catching icons.

6. Luxy

Link to product page

Luxy’s product page has multiple custom fields. They create a sense of urgency with the shipping countdown timer encouraging you to place your order and build trust with the free shipping, generous 60-day returns, and 100% package insurance icons below the buy button.

7. Bombas

Link to product page

Ethical clothing brand Bombas keeps its product page simple with a basic above-the-fold design. They include a quick link to their Product & Materials details modal which provides all the information customers need before they buy their products.

8. Beardbrand

Link to product page

Beardbrand’s product page contains a dedicated accordion tab detailing the ingredients for each product. It also includes a dedicated section detailing fragrance notes unique to each product.

9. Taylor Stitch

Link to product page

Clothing brand Taylor Stitch has a unique product page design with fabrics for color swatches and icons linked to modals for product details. Choosing icons below the buy button triggers a modal with information about the product you’re viewing.

10. Kylie Cosmetics

Link to product page

Skincare brand Kylie Cosmetics uses custom fields on its product page in a few different ways. There’s a dedicated ingredients accordion that details ingredients specific to the product. There’s also a row of icons highlighting the product USPs and tons of helpful information below the fold.

Adding custom fields to product pages in Shopify: Next steps

There you have it. I’ve explained how to add custom fields to product pages in Shopify in three different ways, explained three benefits of using custom fields, and even shared 10 real-world examples of famous brands using them.

If you do add custom fields to your Shopify site, remember that you may need to recreate them if you install a new Shopify theme on your store.

Custom theme code edits don’t carry over so feel free to come back to this guide anytime you want to add more custom fields or recreate existing ones.

Now, it’s your turn to act. Follow the instructions described above and customize your product page however you like. If you have any questions, feel free to comment below, and I’ll do my best to help you.

Frequently asked questions about product page custom fields