Wix's fully-customizable Product page lets you bring your design vision to life. Start by shaping the page at a global level, then drill into each piece individually until the page matches your vision.
Step 1 | Customize the global settings
Start with the settings that apply to the entire page, such as its padding, design and the data it connects to.
To customize the global settings:
- Go to your editor.
- Click the Site Structure icon
.
- Click the Pages tab.
- Click Product Page under Store Pages.
- Choose what you want to customize from the action bar:
Click the Padding & Behavior icon 
.
Enter the padding you want for the page.
Step 2 | Customize individual elements
Select an element on the page to set it up. Each element has its own Design and Settings tabs in the inspector panel.
To customize an element:
- Go to your editor.
- Click the Site Structure icon .
- Click the Pages tab.
- Click Product Page under Store Pages.
- Click the element you want to customize.
- Click the Settings tab in the inspector panel.
- Set up the element:
- Select the media gallery on the page.
- Set up the gallery in the Video and Slider sections:
- Show video controls: Enable the toggle to show playback controls on videos.
- Autoplay videos: Enable the toggle to play videos automatically.
- Loop videos: Enable the toggle to replay videos continuously.
- Loop items: Enable the toggle to return to the first item after the last one in the slider.
- (Optional) Click the Design tab and select Gallery item, Next Button or Previous Button under Choose what to design to style that part.
- Select the breadcrumbs on the page.
- Enter a description for screen readers in the Accessible name field.
The product name is a text element connected to your product data, so it shows each product's name automatically.
- Select the product name on the page.
- Use the action bar to style the text, such as the font and size.
- Select the price on the page.
- Choose how to display the price in the Properties section:
- Original Price First: Enable the toggle to show the price before the sale first.
- From Label: Enter the text that appears before the price when a product's price varies.
- Select the ribbons on the page.
- Click the Design tab in the inspector panel.
- Select the part you want to style under Choose what to design:
- Ribbons: Style all the ribbons together.
- Primary Ribbon: Style the main ribbon.
- Additional Ribbon: Style any other ribbons.
Select the product options on the page.
Choose how the options display:
Text options appear as: Select Buttons or Dropdown to choose how text options display.
Color options, Text options and Modifiers: Under Option types visibility, enable or disable each toggle to show or hide that type of option.
Options to show: Drag the slider to choose how many options appear, from 1 to All.
Note: Hidden required options can block customers from adding a product to their cart. Show hidden options in another Product Options element.
- Select the subscription plans on the page.
- Choose how the plans display:
- Content Mode: Select One Time And Subscription or All Cards.
- One Time Card Position: Select where the one-time purchase card appears, such as First.
- (Optional) Select Frequency dropdown at the top of the panel to set its accessibility options, such as the HTML tag and Accessible name.
- Select the quantity picker on the page.
- Click Customize Plus Icon or Customize Minus Icon on the action bar to change an icon.
- (Optional) Click the Design tab and select Minus Button or Plus Button under Choose what to design to style that button.
Action Buttons combine the Add to Cart and Buy Now buttons.
Select the buttons on the page.
Choose how the buttons behave in the Properties section:
Show price on buttons: Enable the toggle to show the price on the buttons.
Ask to select options on click: Enable the toggle to prompt users to select product options after clicking.
Missing selections button text: Enter the text that appears on the button when a customer hasn't selected all options.
Pre-order button click action: Select what happens when a customer clicks the pre-order button, such as Add to cart.
Post add to cart action: Select what happens after a customer adds a product to the cart, such as Open side cart.
- Select the info sections on the page.
- Enable the Show product description toggle in the Product Info Sections tab to show the product description.
- Click the Accordion tab and choose how the sections open:
- Choose the default state: Select All items closed, First item opened or All items opened.
- Allow multiple open items: Enable the toggle to let customers open more than one section at a time.
.