> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Wix Stores: Product Page

## Article: Wix Stores: Product Page

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/supported-wix-app-pages/wix-stores/wix-stores-product-page.md

## Article Content:

# Wix Stores: Product Page

The following slots and APIs are available when building a [site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md) for the Product page.

<blockquote class="important">

**Important:**
The slots and APIs are different depending on [which version of Wix Stores](https://support.wix.com/en/article/wix-stores-customizing-your-product-page) a user has on their site. Your app should include placements for both versions. To check which version of Wix Stores is installed on a specific site, call the [Get App Instance](https://dev.wix.com/docs/rest/app-management/app-instance/get-app-instance.md) method and inspect the `installedWixApps` field.

</blockquote>

## Slots

The following images show the slots available in the Product page, into which users can add plugins. The locations of slots differ slightly depending on which version of Wix Stores and which page layout a site is using.

### New product page

  > **Note:**
  > If using the `product-page-media-1` slot, it may overlap with the thumbnail images on the left hand side in a desktop view. In this case, we recommend offering settings in your app to control the left padding.

<details>
<summary><strong>Mobile</strong></summary>
<img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/6ac6eb05b49091b336a3b09f9fd2d0c4.png"/>
</details>

<details>
<summary><strong>Desktop</strong></summary>
<img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/de7d729817f78de5f3b624ec79c76690.png"/>
</details>

### Old product page

<details>
<summary><strong>Mobile</strong></summary>
<img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/e704b24fa427694df0a2a236b788de6b.png"/>
</details>

<details>
<summary><strong>Classic</strong></summary>
<img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/3a9f02c764595721a7ea1656733523d4.png"/>
</details>

<details>
<summary><strong>Simple</strong></summary>
<img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/36b2dd54108bd3e2361519413f20bfc5.png"/>
</details>

<details>
<summary><strong>Sleek</strong></summary>
<img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/1b450f603449a2824bc646177216941d.png"/>
</details>

<details>
<summary><strong>Spotlight</strong></summary>
<img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/7bba4a3f8898dbdf3def2fe90ef74616.png"/>
</details>

<details>
<summary><strong>Stunning</strong></summary>
<img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/ac1f4c26e0aaa672c3865e6f18bc7538.png"/>
</details>

The slots are represented by the following `placement` objects:

```json
[
  {
    "appDefinitionId": "<NEW_WIX_STORES_APP_ID>",
    "widgetId": "<NEW_PRODUCT_PAGE_ID>",
    "slotId": "<SELECTED_SLOT_ID>"
  },
  {
    "appDefinitionId": "<OLD_WIX_STORES_APP_ID>",
    "widgetId": "<OLD_PRODUCT_PAGE_ID>",
    "slotId": "<SELECTED_SLOT_ID>"    
  }
]
```

Provide the following values for each property:

**New product page**

| Key                | Value |
| ------------------ | ------- |
| `appDefinitionId`  | "a0c68605-c2e7-4c8d-9ea1-767f9770e087" |
| `widgetId`         | "6a25b678-53ec-4b37-a190-65fcd1ca1a63" |
| `slotId`           | ID of the slot you want [as displayed in the image above](#new-product-page). |

**Old product page**

| Key                | Value |
| ------------------ | ------- |
| `appDefinitionId`  | "1380b703-ce81-ff05-f115-39571d94dfcd" |
| `widgetId`         | "13a94f09-2766-3c40-4a32-8edb5acdd8bc" |
| `slotId`           | ID of the slot you want [as displayed in the image above](#old-product-page). |

For example:

```json
{
  "appDefinitionId": "a0c68605-c2e7-4c8d-9ea1-767f9770e087",
  "widgetId": "6a25b678-53ec-4b37-a190-65fcd1ca1a63",
  "slotId": "product-page-details-2"
}
```

## Product plugin API

Use the Product Plugin API to integrate with the [plugin's host](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md#terminology), which in this case is the product page.

The API provides data about the current event.

| Property            | Type      | Description |
|---------------------|-----------|-------------|
| `productId`         | string    | The ID of the product on the product page. |
| `selectedVariantId` | string    | The ID of the selected product variant. This ID is only available after the site visitor picks all required product choices. For example selecting the color and size of the product. Until all required choices are selected, this ID is `undefined`. |
| `selectedChoices`   | object    | An object containing all the choices the site visitor picks from the options on the product page. Each key is an option name and each value is the selected option. For example, `{ color: "green", size: "large" }`. |
| `quantity`          | number    | The number of product items the site visitor wants to buy. The site visitor can increase or decrease this value on the product page. |
| `customText`        | string[]  | An array of text values entered by the site visitor in custom text fields on the product page. For example, this can be used for personalization, such as adding names to a shirt. Multiple text fields are supported, so each entry in the array corresponds to a different custom text field on the product page. |

## Related Wix APIs

In your site plugin or in your app's server code, you may want to perform actions or implement logic that's dependent on the current product or related data.

You can do this using the Wix Stores APIs ([Velo](https://dev.wix.com/docs/velo/apis/wix-stores-v2/products/introduction.md), [REST](https://dev.wix.com/docs/rest/business-solutions/stores/about-wix-stores.md), [JavaScript SDK](https://dev.wix.com/docs/api-reference/business-solutions/stores/catalog-v1/catalog/introduction.md)).