Custom Product Pages on Wix: Part 2 Displaying Product Media Items

Customizing the appearance of media items can enhance the look and feel of your product page. A high-quality product image and aesthetic design can make the product more appealing to customers and capture their interests because what they see can influence what they buy. Integrating interactive functionalities such as sliders, toggle buttons, and zoom-in and zoom-out can also engage customers and enhance their shopping experience, which can drive more sales.

If you want to customize the appearance of media items on your product page, then you've found the right guide.

This article will walk you through the step-by-step process of displaying media items with interactive functionalities on your product page.

• How to Display Images Using a Repeater

• How to Dynamically Change the Main Image on a Product Page

• How to Add a Back and Forward Button to Images on a Product Page

• Conclusion

Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive 'Velo for Beginners' course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.

Need help with your site? The Wix Wiz team is at your side. Schedule a one-on-one consultation or have the entire team onboard with our development and support plans.

To customize our product page, we are implementing the look and feel of this Etsy product page. In our previous article, we explained how to set up the foundation of a custom product page; you can check it out here.

In this article, we will implement all the image functionalities on the Etsy product page. This involves displaying main and smaller images, adding a border background color to indicate selected images, and arrow buttons to toggle between previous and next images on our Wix product page.

Let’s get started

How to Display Images Using a Repeater

A repeater provides a way to display a list of items with the same design and layout but different content. With this, we can display multiple images with the same design and layout.

The first feature we want to implement on our product page is to use a repeater to display smaller side images.

Step 1: Navigate to your dynamic product page.

Step 2: Crop the main image to the dimensions of the Etsy product page.

Now, let’s split the strip into two columns. This is to arrange the images on the right side and the left side for texts and other features.

Step 3: Click the ‘Layout’ icon and select ‘Add column.’

This should appear on your screen.

Since we only want to arrange our images on the left side, then we need to delete the image on the right side.

Step 4: Left-click the image and click the delete button. 

The next thing is to design the main image by giving it a round edge shape just like the design on the template.

Step 5: Click the ‘Design’ button and select an image frame with a round edge shape.

The next step is to display the smaller images using a repeater. Our product will use this to populate the images from our data.

Step 6: Click the ‘Add Element’ button and select the ‘list’ option.

Step 7: Click the ‘Blank repeater ’ button and select an item from the list.

Step 8:  Crop the container to the size of the smaller image we want to add.

Step 9: Readjust the repeater to align each container into a row.

Step 10: Adjust the position of the repeater.

The next step is to add Images to the repeater

Step 11: Click ‘Add Element’ and navigate to the ‘Image’ option.

Step 12: Select a random image from the list. This image will be replaced later with our preferred product image.

Step 13: Crop the image to fit the size of the container in the repeater.

Step 14: Adjust the design to give it a round edge.

Step 15: Replace the image ID with a more unique name. 

Step 16: Drag the image to place it inside the repeater.

Step 17: Replace the repeater ID with a more unique name.

Step 18: Replace the main image ID with a more unique name.

The next step is to connect these elements to the actual media from our product using the Wix code

Recall that in our previous tutorial article, we dynamically added our main image using `("#dynamicDataset").getCurrentItem();` to retrieve all of the product data since this dataset is linked to the product item from the product collection. Then `$w("#mainImage").src = product.mainMedia;` replaces the main image with the image in our product data.

Since we have added our main image, the next step is to populate the repeater with images from our product data. This will automatically replace the current placeholder images in our repeater with actual images from our product data.

To do this, we need to create a function that populates the repeater with images from our product data.

Step 19: Create a function.

Step 20: Use the `map` function to iterate over all the elements in the product data.

The `map()` method iterates over all the data in the `product` array, targeting only the `mediaItems` data. This will only retrieve the image data we want to display in the repeater.

 The `item` parameter represents all the data in the `mediaItems` and the `index` parameter represents the index of each data in the array.

Inside the callback function, `...item` spreads all the data in the `mediaItems` array, and `_id: index.toString()` is used to manually add a string ID with an underscore to each data. This is because the ID of a repeater must be a string with an underscore.

Then this data is stored in the `mediaData` variable.

Step 21: Populate the repeater with the product data.

The repeater is automatically populated by targeting its ID of `mediaRepeater` and using the `.data` property to set the repeater data to the data in the `mediaData` variable.

Step 22: Create an `onReady` function to tell the repeater how to display the images once the data is populated.

The `onItemReady` function is added to the `mediaRepeater ID` to execute an action once a new repeated item is created. 

In the callback function, `$item("#media")` tells it that inside of the repeater, each item will act differently based on the data of that specific item. Then the `src` attribute is used to set the location of the image to the image in our item data. I.e.,  the image in our product data will automatically be displayed in the repeater.

Step 23: Invoke the `populateRepeater` function to execute the code.

Your code should look like this:

Step 24: Click the ‘Preview’ button to view the live changes.

Notice that other images have been populated in the repeater!

The next thing is to add more functionality to the images.

In the Etsy product page we want to implement, clicking any of the smaller images will dynamically change the main image and a border background also appears around the image to indicate it has been selected.

How to Dynamically Change the Main Image on a Wix Product Page

The functionality we want to implement is to dynamically change the main image once the smaller image is clicked and add a black background color to indicate that the image has been selected.

Step 1: Navigate back to the editor.

Step 2: Add an `onClick` event listener to dynamically change the main image once any of the smaller images are clicked.

The `onClick()` function is attached to the image. Once the image is clicked, it triggers an action to dynamically change the main image by targeting its ID and then using the `src` attribute to change the image location to `itemData.src`, which represents the location of the image clicked.

This will dynamically change the main image.

The next functionality we want to implement is to indicate that the image has been selected by adding a border background around the image.

To achieve this, we need to change the container background in the repeater.

Step 3: Click the container in the repeater.

Step 4: Click the ‘Design’ icon and select the ‘Border’ option to make the container completely transparent.

The next step is to add a new container box inside the repeater. This is the box we will add a background color to any time an image is clicked.

Step 5: Click the ‘Add Element’ icon and navigate to the ‘Box’ option.

Step 6: Click the ‘Container Box’ option and select a round-edge box.

The next step is to change the container box background color to white.

Step 7: Click the ‘Change Design’ button to change the background color of the container box.

Step 8: Click the ‘Customize Design’ button and navigate to the ‘Fill Color & Opacity’ option.

Step 9: Click the small box container beside the 100% button.

Step 10: Change the color to white.

Now that we have a container box, the next step is to place it inside the repeater.

Step 11: Place the image outside the repeater.

We need to add a round edge to each container in the repeater to make it look exactly like the implementation we want.

Step 12: Select the container in the repeater, click the ‘Design’ icon, and select the ‘Corners’ option.

Step 13: Add a radius value to the border.

Now that we have adjusted our container, the next thing is to place the container box inside it.

You should also give the container a round edge so that it can fit the size of the container.

Step 14: Place the container box inside the repeater.

Step 15: Place the image back inside the repeater.

Now, we can add a background border to the container box using Wix code.

Step 16: Give the container box a unique ID.

Step 17: Add a white background color to the container box.

A white background color is added to the container box using its ID of `containerBackground` and applying a white background color to it. 

Step 18: Add a black background to a selected image.

The `$item` selects the specific item clicked,  gets its ID of `containerBackground`, and adds a background color of black to it.

This will automatically add a background to any image clicked, while other images will have a white background.

Your full code should look like this:

Step 19: Preview to view the changes.

Notice the main image is dynamically replaced once any of the smaller images is clicked and the selected image also has a black background color to indicate it has been selected.

One more functionality we want to implement is to select one of the images by default with a black background color when you just visit the page.

To implement this, we need to set a conditional statement and add a background border color to the first image.

Step 20: Navigate to the editor.

Step 21: Add an index parameter to the `onItemReady` callback function in the media repeater.

Step 22: Use the `if` statement to set the condition.

This checks for the first item and adds a black background color.

Step 23: Click the preview button to view the changes.

How to Add a Back and Forward Button to Images on a Product Page

The next functionality we want to implement is to add a back and forward button to the product page. Clicking the forward button should display the next image, while clicking the back button should display the previous image.

To achieve this, follow these steps: 

Step 1: Navigate to the editor.

Step 2: Add an arrow button to the page.

Step 3: Change the background color of the button to white.

Step 4: Click the icon button to change the arrow's color. 

Step 5: Change the color to black to make it visible on the white background.

Step 6: Navigate to the ‘Shadow’ option and select ‘Blur.’

Step 7: Click the ‘Add shadow’ icon and add a blur effect.

Your arrow button should look like this.

Step 8: Left-click the arrow button to duplicate it. Then, place the second icon on the right side.

Step 9:  Click the arrow button and click the small ‘Rotate’ icon to rotate the position of the arrow button.

Step 10: Rotate both arrow icons.

Now that we have set up our button, the next step is to add an `onClick` event listener to each button to trigger an action once the button is clicked.

Before doing this, let’s create a global variable representing the product. This is to avoid any confusion because when using the WIX API, we often need to use the word product.

Step 11: Create a global variable. This variable will store all the information about our product.

Step 12: Replace all variables representing the product with the new variable you just created. This is to prevent the code from breaking.

Step 13: Give the arrow buttons a unique ID.

Step 14: Create another global variable and set its value to 0. This is to keep track of the media we are currently clicking.

Step 15: Add an `onClick` event listener to each button.

Step 16: Increase the media item count by 1 once the next button is clicked. This will change the current main image to the next image

Inside the event listener, the code first checks if the `currentMedia` index is at the last item in the `mediaItems` array. If it is, the function exits without doing anything. Else, it increases the `currentMedia` index by one and updates the `src` property of the `#mainImag` element to display the next media item.

Step 17: Decrease the media item count by 1 once the next button is clicked. This will change the current main image to the previous image.

Inside the event listener, the code first checks if the `currentMedia` index is at the first item (i.e., index 0) of the mediaItems array. If it is, the function exits without making any changes. Else, it decreases the `currentMedia` index by one and updates the src of the `#mainImag` element to display the previous media item.

Step 18: Click the preview button to see the code in action.

The buttons are working as expected; the next button displays the next image, while the previous button displays the previous image.

The last functionality we want to add is to ensure that the black border appears on the selected image each time the button is clicked, just like it is on the Etsy product page.

Step 19: Create a function that targets the selected image and adds a black background color to indicate it has been selected.

In the `mediaItemHandlerButtons` function, the `forEachItem()` function iterates over all the data in the repeater using its ID `mediaRepeater`, and then the `if` statement checks if the index of the image that is currently displayed is equal to the index of the image the user selected.

If this condition is true:

• The main image is updated to the currently selected image (itemData.src).

• The background color of all images is set to white().

• The background color of the selected image is set to black.

Then, if this condition is not met, nothing changes.

Step 20: Invoke the function inside the `onClick` event listener of each arrow button.

Step 21: Click the preview button to view the changes.

Notice that a black background color is added to each selected image once the arrow button is clicked!

We have successfully implemented all the image functionalities on the Etsy product page.

Conclusion 

The way media items are displayed on your product page impacts sales because this is where users get to see the pictorial representation of what they want to purchase. Using aesthetic designs, high-quality images, and interactive functionalities can compel them to buy such items. 

In this tutorial article, we customized the media items on our product page by implementing several functionalities, such as displaying main images and smaller images, a border background color to indicate selected images, and the arrow buttons to toggle between previous and next images on our Wix product page.

But there’s more! In our next article, we will explain how to display product information on our Wix product page.

Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive Velo for Beginners course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.

Need help with your site? The Wix Wiz team is at your side. Schedule a one-on-one consultation or have the entire team onboard with our development and support plans.