Add a Site Plugin Extension in Studio Two

A site plugin 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.

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.

The example in this article adds a plugin to 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. 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.

   

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.

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.

See also

• About Site Plugins
• Site Plugin Extension Files and Code
• About Studio Two Extensions
• Site Plugins