How to set up and customize the product page in Studio Two

4 days ago

3 min read

Updated: 2 days ago

Add Wix Stores from the Add Elements panel in the Studio Two editor. The editor creates the product page and connects it to your product data. Then open Product Page under Store Pages in Site Structure, adjust page-wide settings, and select each element to change its Design and Settings tabs.

Status: Wix is releasing Studio Two features gradually, so some Wix Stores widgets do not yet have the full Studio Two capabilities.

A screenshot of the My Store panel in the Studio Two Editor — Image: Wix Help Center, “Wix Stores: Adding and Setting Up the Studio Two Product Page”

Before you start

A site open in the Studio Two editor
Access to the My Store panel and your dashboard Products page
Products are optional at first, because sample products let you preview the page

Step by step

Add Wix Stores to the site. Open Add Elements in the editor and search for stores. Select Wix Stores and click Add to Site. The editor creates the product page and your other store pages, and connects the product page to your product data.
Finish store setup in My Store. Open the My Store panel on the left side of the editor. Use Add a Product, Connect Payment and Upgrade Now to add products, set up payment methods and start accepting orders.
Open the product page. Go to Site Structure, then the Pages tab. Click Product Page under Store Pages. The same page serves every product, so one design applies to the whole catalog.
Preview other products. Use the Preview Toolbar above the page to switch between products. This shows how your design handles different items.
Set page-wide options. Use the action bar for global settings. Manage Data leads to the Products page in your dashboard. Padding & Behavior sets the page padding. All design options opens the inspector panel.
Connect more elements to data. Right-click an element and choose Connect to Data. Then link it to a data source. Some elements are already connected when the store pages are added.
Select an element and open its settings. Click an element on the page, then open the Settings tab in the inspector panel. Each element also has a Design tab for styling.
Configure media, price and product choices. For the media gallery, set video controls, autoplay, video looping and slider looping. For the price, choose Original Price First and a From Label. For Product Options, choose Buttons or Dropdown for text options, hide or show option types, and set how many options appear.
Configure purchase elements. In Action Buttons, set whether the price shows, how missing selections are handled, and the pre-order and post add to cart actions. In Subscription Plans, set Content Mode and One Time Card Position. For the Quantity Picker, change the plus and minus icons from the action bar.
Configure content elements. Add an accessible name to the breadcrumbs. Style the product name with the action bar. For Ribbons, pick Ribbons, Primary Ribbon or Additional Ribbon in the Design tab. For Product Info Sections, show the description and set the accordion default state and multi-open behavior.

Good to know

Adding Wix Stores also adds a Category page, Cart page, Thank You page and Side Cart. They are in the Pages tab of Site Structure, under Store Pages and Cart & Thank You.
Wix Stores adds sample products, so you can preview the product page before creating your own.
Hidden required product options can stop customers from adding a product to the cart. Show them in another Product Options element.
The product name is a text element connected to product data, so it shows each product's name automatically.

parnii note

Check the page with several sample products in the Preview Toolbar before launch, especially items with options, ribbons or subscriptions. Also confirm that no required option is hidden.