> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/maker-nav/settings/how-do-you-add-enhanced-content-to-pdps-via-shopify-metafields.md).

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

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

{% embed url="<https://vimeo.com/1217032957>" %}
How do you add enhanced content to PDPs via Shopify Metafields — a walkthrough in the Nav editor
{% endembed %}

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.

{% stepper %}
{% step %}

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

<figure><img src="/files/Jf6ddlLFLfxC2ToUpMit" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 1"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Custom data"

<figure><img src="/files/fTVhvONMzroRsMMeEHLj" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 2"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click on Products

<figure><img src="/files/nA7kVNe9m2Smq0UhaSD7" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 3"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Add definition" to add the new metafield

<figure><img src="/files/aeDfOk7YrF4V2dWMr8hA" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 4"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### 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.

<figure><img src="/files/Tij85Su0aNgp5vu2m2cl" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 5"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Scroll down and click "Select type"

<figure><img src="/files/jp412NEYqylmyiqcgfIc" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 6"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click on "file"

<figure><img src="/files/APrWrJLrwZJ09PSREvle" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 7"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Check to ensure both these file types are selected

<figure><img src="/files/LtVNpMNYqorwbTh2yROt" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 8"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Save"

<figure><img src="/files/2lRe64Rhb2pWQKdCZS6C" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 9"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Repeat this process again to add the metafiled for mobile

<figure><img src="/files/FNcdDSlfVA8YkQNnTkCc" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 10"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

<figure><img src="/files/Hx4sKAsEvuxTJvdkZjvF" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 11"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Products"

<figure><img src="/files/4rvS7UnlyoqO1cXip0xE" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 12"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

<figure><img src="/files/JN5m1icLw4i8HDpkQrju" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 13"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click on the metafield.

<figure><img src="/files/ukTTfJQ66jFpVDUj5ZYs" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 14"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Select file" to upload the asset

<figure><img src="/files/21kLVh3PLa74npXan5wI" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 15"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Select the asset or upload one from your computer

<figure><img src="/files/yhwcGKCBh0glolvGqAxM" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 16"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Repeat the process for the mobile asset.

<figure><img src="/files/6sXQJFPe60tWG28e6iSt" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 17"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Save"

<figure><img src="/files/XZzZfBQxrVIIYHpHfurQ" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 18"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Next- Go to Account Settings in Maker Nav

<figure><img src="/files/XslA3WBh00ceHNUf5fGj" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 19"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Advanced"

<figure><img src="/files/qDP3IF9Whh6b4n8PjOxT" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 20"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Enhanced Product Details"

<figure><img src="/files/4QufnfXXod7WBn5I24SB" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 21"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Add New Section"

<figure><img src="/files/su6ZAnLRmwZSI6uiqcWF" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 22"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Give this section a name

<figure><img src="/files/aIqZos4OmFeEGK8wXvYq" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 23"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Image"

<figure><img src="/files/olOze4YRyqZT7jJSaG7Q" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 24"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Metafield" as image source

<figure><img src="/files/DTa2vWQKjxw8fBGoHSAE" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 25"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

<figure><img src="/files/WMSGxYMaYvlnjwWE9hMb" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 26"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "custom::desktop\_asset\_1"

<figure><img src="/files/OJxsr1GJqA5pGGxha3cv" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 27"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Mobile" to add the mobile image

<figure><img src="/files/UrjNp5ZLG7tUZpX2bDH3" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 28"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Select the metafield created for mobile

<figure><img src="/files/sfDIwb84Rk2G4T2rnKn9" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 29"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Click "Save"

<figure><img src="/files/f8LGvWik9iHQtsqbFHO2" alt="How do you add enhanced content to PDPs via Shopify Metafields? — step 30"><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.maker.co/maker-nav/settings/how-do-you-add-enhanced-content-to-pdps-via-shopify-metafields.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.