header-logo
Getting started with WixBuild your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.
Creating a websiteRead how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.
Account & billingReview your account settings, manage your subscriptions and plans and understand your invoices.
Using the Wix mobile appsUse our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch.
Connecting a domainFollow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.
Managing your businessGet tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.
Promoting your siteLearn to make your site more visible promoting it on search engines, sending emails and running paid ads. Improve your online presence with practical tips.
Studio, Partners & EnterpriseGet the most out of your Studio or Enterprise account with advanced features that'll help you work more efficiently.
Need more help?Find solutions for site performance and technical issues, learn about issues we’re working to fix or contact us for help.
placeholder-preview-image
Wix LearnImprove your skills with our courses and tutorials.
Wix BlogGet tips for web design, marketing and more.
SEO Learning HubLearn to increase organic site traffic from search engines.
Website developmentBuild a custom site using our full-stack platform.
placeholder-preview-image
  1. Managing your business
  2. Business solutions & apps
  3. Wix Stores
  4. Designing your store
  5. Wix Stores: Adding and Setting Up the Product Widget

Wix Stores: Adding and Setting Up the Product Widget

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:
Learn more about featuring individual products.

Did this help?

|
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?

|