> 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: Tutorial | Create a Site Plugin for the Wix Stores Product Page
## Article: Tutorial | Create a Site Plugin for the Wix Stores Product Page
## Article Link: https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-create-a-site-plugin-for-the-wix-stores-product-page.md
## Article Content:
# Tutorial | Create a Site Plugin for the Wix Stores Product Page
In this tutorial, we demonstrate how to create the **Digital Sale Banner** [site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md) for the Wix Stores product page. This plugin displays a small banner on digital products to let customers know this product is included in the current digital sale promotion. It is meant to be embedded in a Wix Stores [product page slot](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#plugin-slots).
The end result will look something like this:
We'll use the following steps to build the Digital Sale Banner site plugin:
1. Create an app.
2. Design your plugin in Wix Blocks.
3. Code your plugin in Wix Blocks.
> **Note:** Slots differ slightly 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. This tutorial works for both versions. Learn more about building [product page site plugins](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).
## Step 1 | Open the Wix Studio workspace and create an app
You can access Wix Blocks through the Wix Studio workspace.
1. Open the [Wix Studio workspace](https://manage.wix.com/studio/).
2. Click **Custom Apps** in the left menu.
3. Click **Create New App** and then select **Build from scratch**.
4. When prompted to choose a framework, select **Wix Blocks**.
Your newly-created app opens in Wix Blocks.
## Step 2 | Design your plugin’s UI
Now design your plugin in Wix Blocks:
1. Open the **Widgets and Design** panel, click , and select **Add Plugin**.
2. In the **Add a plugin panel**, set up the plugin as follows:
* **Plugin name**: `Digital Sale Banner Plugin`
* **Which Wix app does it extend?**: `Wix Stores`
* **Slots this plugin can be added to**: `product-page-details-2 (New Product Page)` and `product-page-details-2 (Old Product Page)`
> **Note**: Check [Wix Stores: Product Page](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) to see the available slots.
This example uses the slots for both the new version of Wix Stores product page and the old version. This ensures a user can add your app to their site with whichever version they have.
3. Click **Create**.
4. Add an image element to the plugin.
Click **Add Elements**  on the left side of the editor, and then click **Image**.
5. Upload the image that you want to appear on the relevant product pages.
Click **Change Image**. Select the image you want to use and click **Update**.
6. If you find your image is cut off, then reset the image.
Select the image and click on . Click .
7. Next, let's make sure that when the plugin is added to a site, the image stretches across the entire width of the Wix Product page slot.
Select the image element. In the Inspector panel on the right, click the **Layout** tab, and set the element's width to **100%**.
See how it looks
## Step 3 | Code your plugin
We now write the code for our plugin. The code checks if the product is digital and, if so, updates the slot on the page to display the digital sale image.
1. Before coding our plugin, we need to connect our plugin to the host widget (in our case, the Wix Stores product page) by implementing the [`Product plugin API`](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#plugininterface-and-productid).
To do so, add the `productId` property to your plugin's public API.
In the code panel, click the **Widget Public API**  icon, and then click **Add New Property**.
See how it looks
2. In the **New Property** panel, name the property `productId`, and then click **Create**.
3. In the code editor, add the following import statement at the beginning of your code to use Wix Stores APIs:
`import { products } from 'wix-stores.v2';`
4. Make the `$widget.onPropsChanged()` function asynchronous by adding the `async` keyword:
`$widget.onPropsChanged(async (oldProps, newProps) => {`
5. Inside the `$widget.onPropsChanged()` code block, add the following line to get the current product ID from the host widget:
`const currentProductId = newProps.productId;`
This ID identifies the product for which the type will be checked.
6. Use the Wix Stores [`getProduct()`](https://www.wix.com/velo/reference/wix-stores-v2/products/getproduct) function to query the type of product:
```javascript
const currentProduct = await products.getProduct(currentProductId);
const currentType = currentProduct.product.productType;
```
7. Check if the product type is digital and, if so, display the digital sale banner:
```javascript
if(currentType === 'digital') {
$w('#imageX1').show()
} else {
$w('#imageX1').hide()
}
```
Here's the complete code:
```javascript
import { products } from 'wix-stores.v2';
$widget.onPropsChanged(async (oldProps, newProps) => {
const currentProductId = newProps.productId;
const currentProduct = await products.getProduct(currentProductId);
const currentType = currentProduct.product.productType;
if(currentType === 'digital') {
$w('#imageX1').show()
} else {
$w('#imageX1').hide()
}
});
```
8. In the top-right corner, click **Build**. When prompted to provide an app name, enter "Digital Sale Banner" and then click **Save & Continue**.
9. When prompted to select the type of version to build, select **Test version**.
Your plugin is now ready for use. In the next step, you'll add your plugin to a site to see it in action.
## Step 4 | See your plugin in action
Plugins that you develop are immediately available for installation on your own sites, using the Plugin Explorer in the editors.
Go ahead and create a new site, and then install Wix Stores. Alternatively, use a [site template which already has Wix Stores installed](https://www.wix.com/website/templates/html/online-store).
1. Open your editor. In the left sidebar, click **Pages** , then **Store Pages**, and go to the **Product Page**.
2. On the Product page, click the page's widget, and then click the plugins  icon.
See how it looks
Your plugin should appear in the Plugin Explorer.
3. Hover over your plugin, and then click **Add**.
When prompted for consent, select the checkbox and click **Agree & Add**.
Once you install your plugin on a site, you can preview or publish the site to test the plugin's functionality and make sure it's working properly.