# Product specifications

![](https://docs-assets.foxecom.app/documentation/bae9a41c-0c61-4968-921d-d5a0dc7242e8.png)

Display a product's specifications as a clean, zebra-striped list of label-and-value rows.

Use this block on a product page to show each product's own specifications. The specs come from metafield data saved on each product, so set them up once and let the block display them automatically.

## Set up a metafield to show custom data for product specifications

<Stepper>
  <Step title="Create a metaobject">
    1. Go to **Shopify Admin > Settings > Metafields and Metaobjects**&#x20;
    2. In **Metaobject definitions > Add definition**
    3. Enter a **Name.** Such as: Product specifications
    4. Set **Metaobject type** to `spec_row`.
    5. Add two **Single line text** fields:

    * **Label** — the specification name, such as *Material* or *Weight*.
    * **Value** — the specification value, such as *Leather* or *1.2 kg*.<br /><img height="748" width="680" src="https://docs-assets.foxecom.app/documentation/6cbbca7f-21e8-4bbb-b59a-d45cf006d4c7.png" />

    1. Click **Save**
  </Step>

  <Step title="Create a product metafield">
    1. Go to **Settings > Metafields and Metaobjects** > **Products** > Add definition.
    2. Enter Name
    3. Enter **Namespace and key is `foxtheme.specifications`**
    4. Connect the metafield **Type** to **the `spec_row` metaobject you created in the previous step**.![](https://docs-assets.foxecom.app/documentation/d899c092-d9ba-4827-9156-bee618bbb18d.png)
    5. **Save** the metafield definition.
  </Step>

  <Step title="Add specification metaobject entries">
    1. Go to **Content > Metaobjects** > **Select** the **product specifications metaobject** you created > **Add Entry**![](https://docs-assets.foxecom.app/documentation/fa9dc327-bf2c-4b08-8b02-dfe5dc64d8d2.png)
    2. Fill in the **Label** and **Value**. You can add multiple entries, with a **Label** and **Value** for each specification you want to display. Each entry becomes one row in the specifications table.

    For example:

    ![](https://docs-assets.foxecom.app/documentation/ae690f2e-57ae-48ae-bca7-8177271e9425.png)

    ![](https://docs-assets.foxecom.app/documentation/093646c8-c7ba-46d8-9eb0-519e4d5dbb7b.png)

    1. Click **Save**
  </Step>

  <Step title="Connect Product metafield to Metaobject entries">
    1. Go to the product you want to show the specifications for
    2. Scroll to **Product metafields > Product specifications >** **Select the entries** you want to connect![](https://docs-assets.foxecom.app/documentation/91b4faa9-6353-43a9-8013-30b8ce5ec185.png)
    3. Click **Save**.
  </Step>

  <Step title="Show Product specifications in the theme editor">
    1. Go to **Theme editor** > Select the page template - default product
    2. Add a **Custom section > Add block > Product specifications**![](https://docs-assets.foxecom.app/documentation/8a196b7f-a18c-4bf8-b9d5-eb717cab3e0d.png)
    3. Make the necessary changes.
    4. **Save** the settings.

    <Hint type="info">
      A product without saved specifications won't display any rows.
    </Hint>
  </Step>
</Stepper>

## Block settings

### Layout

<Table widths="30%">
  | Settings                         | Description                                                   | Options             |
  | -------------------------------- | ------------------------------------------------------------- | ------------------- |
  | **Width**                        | Controls the block width                                      | Fit, Fill, Custom   |
  | **Width mobile**                 | Controls the block width on phones                            | Fit, Fill, Custom   |
  | **Custom width**                 | Sets the width as a percentage.                               | 0% - 100%           |
  | **Number of columns on desktop** | Displays the specification rows in 1 or 2 columns on desktop. | 1 column - 2 column |
</Table>

<Tabs>
  <Tab title="1 column">
    ![](https://docs-assets.foxecom.app/documentation/75272325-5f6c-4c40-bb0f-8be7b6bd6675.png)
  </Tab>

  <Tab title="2 columns">
    ![](https://docs-assets.foxecom.app/documentation/d6f6f981-4247-48b6-a607-bfdb1da3499c.png)
  </Tab>
</Tabs>

<Hint type="success" title="Tip">
  Use **2 columns** for longer specification lists on desktop. Choose **1 column** for shorter lists or a simpler layout.
</Hint>

### Content

<Table widths="30%">
  | Setting     | Description                                                                                                                      | Option         |
  | ----------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------- |
  | **Product** | Selects the product whose specifications to display. Leave empty to use the product where the block is placed (on product page). | Select product |
</Table>

### Appearance

<Table widths="30%">
  | Setting            | Description                                                        | Option              |
  | ------------------ | ------------------------------------------------------------------ | ------------------- |
  | **Color scheme**   | Sets the block's colors.                                           | Choose color scheme |
  | **Border**         | Adds a solid outline around the block, or removes it with None.    | None/Solid          |
  | **Border width**   | Appears when Border \= Solid. Sets the outline thickness.          | 0px - 10px          |
  | **Border opacity** | Appears when Border \= Solid. Controls how visible the outline is. | 0% - 100%           |
  | **Corner radius**  | Rounds the block's corners.                                        | 0px - 32px          |
</Table>

### Padding

Add space inside the block.

Choose **Devices** (**Desktop** or **Mobile**), then set the **Top**, **Bottom**, **Left**, and **Right** padding for that device.

<Table widths="30%">
  | Setting     | Description                                | Options          |
  | ----------- | ------------------------------------------ | ---------------- |
  | **Devices** | Choose which screen size to edit.          | Desktop / Mobile |
  | **Top**     | Set the space above the content.           | 0px - 100px      |
  | **Bottom**  | Set the space below the content.           | 0px - 100px      |
  | **Left**    | Set the space on the left of the content.  | 0px - 100px      |
  | **Right**   | Set the space on the right of the content. | 0px - 100px      |
</Table>