How do you add enhanced content to PDPs via Shopify Metafields?

Create metafields in Shopify, then enable them in Maker Nav, to show richer product details on desktop and mobile PDPs.

This guide outlines a 2-step process for adding enhanced content to product detail pages (PDPs):

How do you add enhanced content to PDPs via Shopify Metafields — a walkthrough in the Nav editor

1- Creating metafields in Shopify 2- Enabling them in Maker Nav

By following these steps, you can create and customize metafields for desktop and mobile versions of your products, improving presentation and functionality. Enhanced product details can increase customer engagement, satisfaction, and sales by providing a richer shopping experience.

1

You need to first add the metafields in Shopify and to do that sign into your Shopify admin account and click ion Click "Settings"

2

Click "Custom data"

3

Click on Products

4

Click "Add definition" to add the new metafield

5

Click the "Name" field and give the metafield a name. You will need to create a metafield for desktop and repeat the same for mobile.

6

Scroll down and click "Select type"

7

Click on "file"

8

Check to ensure both these file types are selected

9

Click "Save"

10

Repeat this process again to add the metafiled for mobile

11

The screenshot below shows "Desktop asset 1" and "Mobile asset 1" as the new metafields created in Shopify

12

Click "Products"

13

Pick a product that you will be adding enhanced content via the new metafields created

14

Click on the metafield.

15

Click "Select file" to upload the asset

16

Select the asset or upload one from your computer

17

Repeat the process for the mobile asset.

18

Click "Save"

19

Next- Go to Account Settings in Maker Nav

20

Click "Advanced"

21

Click "Enhanced Product Details"

22

Click "Add New Section"

23

Give this section a name

24

Click "Image"

25

Click "Metafield" as image source

26

Click the "namespace::key" field and add the name of the metafield created in Shopify

27

Click "custom::desktop_asset_1"

28

Click "Mobile" to add the mobile image

29

Select the metafield created for mobile

30

Click "Save"