Help Center
  1. Help Center
  2. Managing your business
  3. Business solutions & apps
  4. Wix Stores
  5. Designing your store
  6. Wix Stores: Adding and Setting Up the Product Widget

Wix Stores: Adding and Setting Up the Product Widget

5 min read
In this article
  • Step 1 | Add a Product Widget
  • Step 2 | Connect the widget to a product
  • Step 3 | Set the widget behavior
  • Step 4 | Customize the widget layout
  • Step 5 | Design the widget
The Product Widget allows you to display a single product anywhere on your site. You decide what happens when clicked; the Product Page can open or the product can be added to the cart.
Note:
The Product Widget is not currently available in Wix Studio editor. You can, however, feature products in other ways, for example with a landing page. Learn more about featuring products.

Step 1 | Add a Product Widget

The Product Widget comes in two styles - a compact style and an expanded style. Choose the style that best suits your needs.

To add a product widget:

  1. Go to the page to which you want to add the Product Widget.
  2. Click Add  on the left side of the Editor. 
  3. Click Store.
  4. Click Product Widget.
  5. Drag the Product Widget onto your page.

Step 2 | Connect the widget to a product

The Product Widget allows you to showcase one of your products and makes it easy to purchase. To set it up, choose the product you want to promote.

To connect a product to the widget:

  1. Click the Product Widget on your page in the Editor.
  2. Click Settings.
  3. Click the Arrow icon .

  4. Select a product.

Step 3 | Set the widget behavior

Now you can choose whether you want to display a button in the widget. If you display it, you can choose where your customer is directed when they click it - to the Product Page or to the Quick View pop-up.

To set the widget behavior:

  1. Click the Product Widget on your page in the Editor.
  2. Click Settings.
  3. Click the Settings tab.
  4. Choose when to display the widget button:
    • All the time: The button is always visible.
    • On hover only: The button is visible when a mouse hovers over it (the button does not appear on mobile devices).
    • Never: No button is displayed. 
  5. Choose what happens when the button is clicked:
    • Go to Product Page: Customers are directed to the Product Page of the product. 
    • Add Product to Cart: Customers are directed to the product's Quick View where they can add the product to the cart. 
  6. Edit the default button text.
  7. Edit the "Out of Stock" message that appears automatically when inventory is zero.

Step 4 | Customize the widget layout

Each of the two Product Widget styles has a variety of layout options. Click the Layout tab to choose and customize the layout. 

To customize the layout:

  1. Click the Product Widget on your page in the Editor.
  2. Click Settings.
  3. Click the Layout tab.
  4. Choose the style you want to customize:

Step 5 | Design the widget

Select the perfect colors, borders, fonts and more for your product widget.

To update the widget design:

  1. Click the Product Widget on your page in the Editor.
  2. Click Settings.
  3. Click the Design tab.
  4. Update the design using any of the available options.
Tip:

Did this help?

|
Didn’t find what you’re looking for? Try one of these articles.
Wix Stores: Notifying Customers when Products Are Back in Stock
Wix Stores: Customizing Your Product Page

Didn’t find what you’re looking for? Try one of these articles.

Wix Stores: Notifying Customers when Products Are Back in Stock
Wix Stores: Customizing Your Product Page
Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.
Start Now
In this article
  • Step 1 | Add a Product Widget
  • Step 2 | Connect the widget to a product
  • Step 3 | Set the widget behavior
  • Step 4 | Customize the widget layout
  • Step 5 | Design the widget

Did this help?

|