# Setup product specifications on product page

### Follow the below steps:

To display content in this section, please ensure that the Product Specifications metaobject is added first.

1. Go to **Shopify admin** → **Settings** → **Custom data** → Under **Metaobject definitions** click the **Add definition** button.\ <br>

   <figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FNhGE4wsFe5Ha3fM5AIqX%2Fimage.png?alt=media&#x26;token=49246433-2954-4070-89cc-0d9692c63b04" alt=""><figcaption></figcaption></figure>
2. Create a **metaobject** called **Product specifications** with the following fields:<br>

   <figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FB2lKH1LK5ocufu1qrS5F%2Fimage.png?alt=media&#x26;token=b26b0028-f1a0-426f-b591-840bd43d60d3" alt=""><figcaption></figcaption></figure>

Create **file** type field for the **main image** of the product feature ,as shown below:<br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FSgUeMe9N7IeWkIcqLHI8%2Fimage.png?alt=media&#x26;token=8315986f-0193-41cb-a7eb-07ec82ae340a" alt=""><figcaption></figcaption></figure>

Select the **highlighted options** and add **image** as Main image, as shown below:

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FjbT7rukhIpBH8KhlqLnS%2Fimage.png?alt=media&#x26;token=5b8db0a6-c104-46f3-9652-6d207b5fa08a" alt=""><figcaption></figcaption></figure>

Add **single line text** field named **#1 Key Feature Title** for the product feature title, as shown below:<br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2Femzox09Oif36cGZh4WSh%2Fimage.png?alt=media&#x26;token=8632db4f-9801-4501-a3e3-f8b2ce472ee0" alt=""><figcaption></figcaption></figure>

Add **file** field named **#1 Key Feature Image**  for the product feature image, as shown below:\ <br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FQawNlhEp3b2JZ9PTU61S%2Fimage.png?alt=media&#x26;token=cea5b9d1-20a2-4192-a2c2-e3c3f1a5f8c5" alt=""><figcaption></figcaption></figure>

Add **single line text** field named **#2 Key Feature Title**  for the second feature title of the product, as shown below:<br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2F4Vpr4O6xeJ784P2j4GJY%2Fimage.png?alt=media&#x26;token=6faafa70-8602-454c-93b9-0521ad0846b8" alt=""><figcaption></figcaption></figure>

Add **multi line text** field named **#2 Key Feature Description** for the second feature title of the product, as shown below:<br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FnzpcF9JSSWrvVW8yCSeN%2Fimage.png?alt=media&#x26;token=fbaf663a-67a5-4d36-b258-4a0bc280bd0e" alt=""><figcaption></figcaption></figure>

Save this metaobject, as shown below:<br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2F6bzX6c4oET670reVTlli%2Fimage.png?alt=media&#x26;token=0edde2a9-6745-403e-bc6b-8ff23e4bf044" alt=""><figcaption></figcaption></figure>

2. Now link this metaobject with the product.&#x20;

Go to **Shopify admin** → **Settings** → **Custom data** and click the **Products** tab.<br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2Fk55gKjqsMbjrVY5QiYe3%2Fimage.png?alt=media&#x26;token=61657cf9-e50d-4c82-8da9-abe592dcc517" alt=""><figcaption></figcaption></figure>

Add **definition** named **Specifications.** Choose typ&#x65;**- Metaobject** and choose the created metaobject reference- **Product specifications,** as shown below:<br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2Fb55jHqxA2JpTWNVfLTwc%2Fimage.png?alt=media&#x26;token=2d4a9fcb-8ab1-4c1b-8262-7168d6128b96" alt=""><figcaption></figcaption></figure>

3. Now go to the **product** and add **entries** in each product, for the product features.\
   Repeat this step to add multiple entries in the product.

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FSwME42ngn6aOcQzN6Ybr%2Fimage.png?alt=media&#x26;token=987a221a-f259-4940-8850-3bd7ecca7c32" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FsqQHvX2fu6QMTjLbMB3f%2Fimage.png?alt=media&#x26;token=30e26479-185b-477a-b021-d47818a244be" alt=""><figcaption></figcaption></figure>

4. To link this **metaobject** entries in the **product template**, go to the **product template** from **theme editor** and link the **metaobject dynamic source** in **product specifications block**, as shown below:\ <br>

   <figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2F5WYa1iY8a5dDZnoXbDBX%2Fimage.png?alt=media&#x26;token=894a9349-4dbc-41f2-85bf-36af46e38320" alt=""><figcaption></figcaption></figure>

### Final result (Storefront):

<br>

<figure><img src="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FkL41GrHuM7Ul5liIVQrH%2Fimage.png?alt=media&#x26;token=bc34b20c-759c-4a6f-813c-b7227e6805f3" alt=""><figcaption></figcaption></figure>
