> 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: Add a Site Plugin Extension in Studio Two

## Article: Add a Site Plugin Extension in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/site-plugins/add-a-site-plugin-extension-in-studio-two.md

## Article Content:

# Add a Site Plugin Extension in Studio Two

A [site plugin](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/site-plugins/about-site-plugins.md) is a custom element that fills a predefined slot on a Wix business-solution widget.

Follow the instructions below to:

1. Add a site plugin extension to your site project.
2. Customize the plugin.
3. Place the plugin in its slot.
4. Publish your site and check the plugin.

> **Note:** You can also ask **Aria**, Wix's AI assistant, to create and customize the extension.

## Before you begin

Make sure that your site has a page with the slot the plugin fills, and that you can open the page in the editor. For the slots you can use in a Studio Two site, see [About Site Plugins](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/site-plugins/about-site-plugins.md#slots-you-can-use-in-studio-two).

The example in this article adds a plugin to the [Side Cart](https://support.wix.com/en/article/customizing-the-side-cart), a preview of the Cart page that opens on the side of the site's pages.

To follow the example, install Wix Stores, which adds the Side Cart to your site.

## Step 1 | Add a site plugin

The extension form's **What would you like to extend?** dropdown lists slots from several Wix business solutions, regardless of whether they're installed on your site. It also lists slots that you can't fill from the Studio Two editor, such as the slots on the Wix Stores product page and the Checkout page. Each option shows the widget name and the slot ID.

For each widget's slots and where each slot appears, see [About Slots](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/supported-wix-app-pages/about-slots.md). Its screenshots might not match Studio Two.

To add a site plugin:

1. In the Studio Two editor, open the **Code** tab.
2. In the VS Code sidebar, open the **Wix Extension Builder**.

   ![the Wix Extension Builder in the VS Code activity bar](https://wixmp-833713b177cebf373f611808.wixmp.com/images/6bff2816a5bfe47ed855a1859cd89d5a.png)

3. Under **Create an Extension**, choose **Site**, then **Site Plugin**.
4. Fill in the form:
   - **What would you like to extend?**: Choose the slot from the dropdown, for example the **SideCart** option for `side-cart:header:after-1`.
   - **Name**: The plugin name, for example `Side Cart Note`.
5. Click **Generate**.

**Generate** derives the plugin folder from the name, in lowercase with hyphens. For example, `Side Cart Note` becomes `side-cart-note`. A single-word name gets a `-plugin` suffix. For example, `Banner` becomes `banner-plugin`.

You can find the new files under `src/extensions/site/plugins/<plugin-folder>/`, and the plugin's logo in `public/`. The extension is registered in your project's `extensions.ts` and listed under **My Extensions**. For what each file is for, see [Site Plugin Extension Files and Code](https://dev.wix.com/docs/site-extensions/site-plugins/site-plugin-extension-files-and-code.md).

## Step 2 | Customize your site plugin

You can edit the generated files to match the look and behavior you need. Change the code yourself, or ask the AI in the **Code** tab to help. When you're happy with the plugin, move on to the next step.

For example, to update the plugin text:

1. Open `<plugin-folder>.tsx`.
2. In the `render()` method, change the paragraph text to `Hello world!`.
3. Save the file. When the status bar shows **Synced**, the editor has the change.

When the plugin appears in its slot, the paragraph shows **Hello world!**.

## Step 3 | Place the plugin in its slot

Studio Two doesn't place the plugin in its slot when you generate it. You place it in the editor, from the **Plugin Market** of the widget that has the slot.

The **Plugin Market** lists the plugins for the widget's slots, both the plugins in your site project and plugins from other apps.

To place the plugin in its slot:

1. Switch to the **Design** tab.
2. From the page dropdown at the top of the editor, choose the page with the slot, for example **Side Cart**. The page opens for editing.
3. Click the widget that has the slot, for example the Side Cart. The widget's toolbar appears.
4. In the toolbar, click the **Plugins** icon. The **Plugin Market** opens.
5. Find the plugin by its name, for example **Side Cart Note**, hover over it, and click **Add**. The plugin appears in its slot.

If the page dropdown lists **Side Cart** more than once, repeat these steps for each one, so the plugin is in the Side Cart that your live site opens.

## Step 4 | Publish and check the plugin

Site visitors see the plugin after you publish your site.

To publish and check the plugin:

1. In the Studio Two editor, click **Publish**.
2. On your live site, go to the page with the slot. For example, click **Add to Cart** on a product page to open the Side Cart. The plugin appears in its slot.

If **Add to Cart** doesn't open the Side Cart, the button is set to another action, such as going to the Cart page. For the button's settings, see [Customizing the Side Cart](https://support.wix.com/en/article/customizing-the-side-cart).

## See also

- [About Site Plugins](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-frontend/site-plugins/about-site-plugins.md)
- [Site Plugin Extension Files and Code](https://dev.wix.com/docs/site-extensions/site-plugins/site-plugin-extension-files-and-code.md)
- [About Studio Two Extensions](https://dev.wix.com/docs/studio-two/code-your-site/extensions/about-studio-two-extensions.md)
- [Site Plugins](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/site-plugins.md)