Wix Stores: Customizing Your Product Page

Important:

This article applies to the Product page in the Wix Editor, Wix Harmony Editor and the new product page in the Wix Studio Editor. Learn how to customize the previous Wix Studio product page.

The product page is a dynamic page that displays detailed information about each of your products.

The page's design is always the same, but the contents (product images and text) change according to which product is displayed.

Any customizations you make to the product page, such as changing the background color or button text, affect all products.

Show or hide product page elements

Click the Display tab to select which elements you want to show or hide on the product page.

Note that the product page comes with the 'Add to Cart' button enabled by default. You can also enable the wishlist icon (from the Settings tab) as well as the 'Buy Now' button.

You also have the option of replacing the 'Buy Now' button with an express checkout option (e.g. PayPal, Apple Pay, Google Pay).

Learn more about checkout with PayPal or with Apple Pay or Google Pay.

To show or hide product page elements:

Wix Editor

1. Go to your editor.

2. Go to your product page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click Store Pages.

   3. Click Product Page.

3. Click the product page element on your page.

4. Click Settings.

1. Click the Display tab.

2. Select or deselect any of the checkboxes to show or hide elements.

Wix Harmony Editor

1. Go to your editor.

2. Click the Page dropdown at the top left of the page.

3. Select the Product page under Store Pages.

4. Click the product page element in the editor.

5. Click the Display elements

   

   icon on the action bar.

6. Select or deselect any of the checkboxes to show or hide elements.

Tip:

Selecting the checkbox next to Low stock message lets customers know that only a few units are left. When a product's inventory drops to less than 10, a message appears (e.g. 'Only 3 left in stock').

Customize product page settings

Wix Editor

1. Go to your editor.

2. Go to your product page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click Store Pages.

   3. Click Product Page.

3. Click the product page element on your page.

4. Click Settings.

1. Click the Settings tab.

2. Click Add to Cart button:

   1. Click the Make button sticky toggle to enable it.

      Tip: This setting is for mobile. When enabled, the 'Add to Cart' button always remains visible.

   2. Choose what happens when the button is clicked:

      • Show success pop-up: A pop-up notification appears.

        Note: The pop-up doesn't appear on mobile. Customers are directed to the Cart page.

      • Open side cart: Opens on the side of the screen.

      • Go to cart page: Customers are taken directly to the full Cart page.

      • Stay on product page: Customers stay on the product page. The button displays a checkmark to indicate that the product was successfully added.

3. Click Wishlist button and then click the Show "Add to Wishlist" button toggle to enable or disable it.

   Tip: Learn more about adding and setting up a wishlist.

Wix Harmony Editor

1. Go to your editor.

2. Click the Page dropdown at the top left of the page.

3. Select the Product page under Store Pages.

4. Click the product page element in the editor.

5. Click the Settings icon

   

   on the action bar.

6. Click the Settings tab.

7. Click Add to Cart button and choose what happens when the button is clicked:

   • Show success pop-up: A pop-up notification appears.

     Note: The pop-up doesn't appear on mobile. Customers are directed to the Cart page.

   • Open side cart: Opens on the side of the screen.

   • Go to cart page: Customers are taken directly to the full Cart page.

   • Stay on product page: Customers stay on the Product page. The button displays a checkmark to indicate that the product was successfully added.

8. Click Wishlist button and then click the Show "Add to Wishlist" button toggle to enable or disable it.

   Tip: Learn more about adding and setting up a wishlist.

Customizing the layout & image display

Click the Layout tab to select the best product page layout for your shop. Then, customize how images are displayed.

Note:

The image options vary according to the layout you select.

Wix Editor

1. Go to your editor.

2. Go to your product page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click Store Pages.

   3. Click Product Page.

3. Click the product page element on your page.

4. Click Settings.

1. Click the Layout tab.

2. General:

   1. Select a layout for the Product page.

   2. Click the Stretch to full width toggle to enable or disable it.

3. Product images: Learn more about displaying images in your store.

   1. Click the Image ratio drop-down and select a ratio.

   2. Select an option under How's image resized:

      • Crop: Crops all images to the same size.

      • Fit: Maintains the images' aspect ratios.

   3. Click the Zoom on image toggle to enable it (available for some layouts). Note: To preview the zoom, go to your live site.

   4. Select how you want to display image thumbnails under Show thumbnails.

4. Color swatches: Select how you want to display product option and modifier text choices (like 'Size') and customize the option you chose.

Wix Harmony Editor

1. Go to your editor.

2. Click the Page dropdown at the top left of the page.

3. Select the Product page under Store Pages.

4. Click the product page element in the editor.

5. Click the Settings icon

   

   on the action bar.

6. Click the Layout tab.

7. Customize the available options:

   • General:

     1. Customize the column ratio.

     2. Adjust the spacing.

     3. Select a media position.

     4. Click the Make one column sticky toggle.

     5. Click the Stretch to full width toggle to enable it.

   • Product images: Learn more about displaying images in your store.

     1. Select a product images layout.

     2. Click the Image ratio drop-down and select a ratio.

     3. Select an option under How's image resized:

        • Crop: Crops all images to the same size.

        • Fit: Maintains the images' aspect ratios.

     4. Click the Zoom on image toggle to enable it (available for some layouts).

        Note: To preview the zoom, go to your live site.

     5. Select how you want to display image thumbnails under Show thumbnails.

   • Product options: Select how you want to display product option and modifier text choices (like 'Size') and customize the option you chose.

Customizing the product page design

You can customize the colors, fonts, button styles and more to create a look that suits your store's vibe. To get started, click the Design tab.

Tip:

Available customizations may vary depending on the layout and setting options you chose.

Wix Editor

1. Go to your editor.

2. Go to your product page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click Store Pages.

   3. Click Product Page.

3. Click the product page element on your page.

4. Click Settings.

1. Click the Design tab.

2. Customize the design using the available options.

Wix Harmony Editor

1. Go to your editor.

2. Click the Page dropdown at the top left of the page.

3. Select the Product page under Store Pages.

4. Click the product page element in the editor.

5. Click the Settings icon

   

   on the action bar.

6. Click the Design tab.

7. Customize the design using the available options.

Learn more about:

• Price breakdowns

• Info sections

• Product subscriptions

Edit the product page button text

Click the Text tab to edit any of the text options that can appear on the product page buttons.

Tip:

If you disabled the 'Add to Cart' or 'Buy Now' buttons, you won't see some options.

Wix Editor

1. Go to your editor.

2. Go to your product page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click Store Pages.

   3. Click Product Page.

3. Click the product page element on your page.

4. Click Settings.

1. Click the Text tab.

2. Edit any of the available text options.

Wix Harmony Editor

1. Go to your editor.

2. Click the Page dropdown at the top left of the page.

3. Select the Product page under Store Pages.

4. Click the product page element in the editor.

5. Click Edit Text on the action bar.

6. Edit any of the text options.

Learn more about:

• Selling product subscriptions

• Notifying customers when an out-of-stock product becomes available

• Adding a wishlist to your store

• Customer checkout with PayPal

• Customer checkout with Apple Pay or Google Pay

FAQs

How can I make the product page more accessible?

Some site visitors with visual impairments rely on screen readers to read and understand the product page.

To make sure the screen reader can 'read' every part of the product page in a logical order, we recommend using the Spotlight layout.