Tutorial | Create a Site Plugin for the Wix Stores Product Page with the CLI

In this tutorial, you'll create a digital sale banner site plugin for the Wix Stores product page using the CLI. This plugin displays a small banner on digital products to let customers know this product is part of the digital sale promotion. The plugin appears in a Wix Stores product page slot.

Follow these steps to build the product page site plugin:

1. Create an app with the CLI.
2. Add a site plugin extension.
3. Code your plugin.
4. Test your plugin.
5. Build and deploy your app.

Step 1 | Create an app with the CLI

Create a new app project using the CLI. For detailed instructions, see Quick Start an App.

Step 2 | Add a site plugin extension

Add a site plugin extension to your app that renders on a Wix Stores product page.

To add a site plugin extension, follow these steps:

1. Run the following command:

   Copy

2. When prompted, make sure to select the following:

   • Site Plugin as the extension.
   • Wix Stores as the Wix app.
   • product-page-details-2 as the slot under New product page.

3. Open your plugin's extension.ts file and add support for the old product page slot so your plugin works with both versions of Wix Stores. The old product page uses the same slotId but has different appDefinitionId and widgetId values. Add the following placement to the placements array:

   Copy

Step 3 | Code your plugin

Add code to check if a product is digital and then display a sale banner on digital products. If it's not a digital product, don't display any banner.

To code your plugin:

1. Open src/site/plugins/custom-elements/digital-sale-banner/plugin.tsx.

2. Delete the existing code in the file.

3. Paste the following import statements at the beginning of your file:

4. Create the custom element class. Define the class that extends HTMLElement and set up the observed attributes:

   Copy

5. Add the method that checks if the product is digital. This method tries both the Products V1 API and Products V3 API and uses whichever one works:

   Copy

6. Add the render method that displays the banner on the site:

   Copy

7. Export the class as the default export:

   Copy

Complete example code

Step 4 | Test your plugin

When you finish developing your plugin, test it in the development environment. To test your app, use the following steps:

1. Start the development server:

   Copy

2. Select Editor to open an editor in a local development environment.

3. Navigate to Store Pages > Product Page in the editor. Your plugin should appear in the product-page-details-2 slot.

Step 5 | Build and deploy your app

Build and deploy your app. For detailed instructions, see Build and Deploy a Project.

See also

• Add a Site Plugin Extension in the CLI
• Site Plugin Extension Files and Code
• Wix Stores: Product Page