Learn to build a custom product gallery in Wix using a repeater, dataset, and Velo code. The tutorial covers showing product angles on hover, letting customers pick colors, and adding items to cart, with special handling for mobile where hover doesn't work.
Chapters
Today, I'll show you how to use a gallery or repeater to fully customize your online store. Customers will be able to view your products from multiple angles, choose from several colors, and add items to their cart right from your gallery or repeater. Before you begin, make sure code is enabled. Then click My Store on the left to view and manage your products. Choose a product from your store. For this example, we've added a pair of sunglasses that come in different colors. The product images are grouped by color and angle. Next, choose a gallery or repeater to showcase your products. In this example, we'll use a repeater. Keep in mind all images and text in your repeater are placeholders until you connect to your products database. From the Properties panel, change the ID of the repeater to Products Repeater. This will be used later in your code. Now edit the design of your repeater so it looks exactly the way you want. When you're done, select the image. Then, from the Properties panel, change its ID to Image. Next, select the text for your product name. From the Properties panel, change its ID to Product name. Then select the product Price. Change its ID to Product Price. Select the entire product container and change its ID to Product Container. Add a button to let customers add products to their cart directly from the repeater. Change its ID to Cart button. Then add three icon buttons to show your color options. Go to Add Button and scroll down to Icon buttons. Customize the button colors to match your products. Select all the buttons and click Group Elements. Drag this group into your container. Now, when customers select a color, your product image will change. Next, change the ID of each individual button to its red, pink, and yellow. Then change the ID of the group to Group Color Picker. You can hide the color picker and add to Cart button so they only appear when customers hover over a product. Go to the Properties panel and check the box hidden on load. Keep in mind you need to do this for each element. Finally, add a box to the right of your repeater. Customize your box so it's transparent. Then change its ID to right box. When you're done, copy it, drag it to the left and change its ID to left box. When customers hover over these boxes, they'll see different angles of your product. Now your repeater is all set up. Then add a dataset. Go to Add Database and select Dataset. Click Manage Dataset and connect it to your product's collection. Next, connect your repeater to the Stores Products dataset. To start adding functionality to your repeater. Open the code panel at the Bottom of the page, define global variables to match your products with an ID from the color picker. The Products Map variable is a JavaScript object that saves transformations of product data. This simplifies the way your repeater is built and sends the correct item to the Add to Cart function. Next, use the Onitem Ready event so each product loads in your repeater. For each product, a record will be created with a product object and saved to the Global Products map. Now add the Create Product Object function. This function gets a record from the store's products collection and creates an object with specific information like selected color or price to display in a repeater. Then set the main image, price and name from the product object. To add hover functionality to your products, call the initproduct Hover function and initdirection Hover function. Keep in mind you'll add different functionality for mobile since there's no hover with the Init Product Hover function. The color picker and Add to Cart buttons will only appear when customers hover over the product. Otherwise they'll remain hidden. Then use the Init Directions Hover function. This function changes the product images as customers hover over the right and left boxes in your repeater. To add functionality to your color picker, use the INIT Color Picker function. Set the On Click Event to display product images selected by customers. This function will save the customer's color choice to the Global Products map object. Then set the behavior for your Add to Cart button. When customers click on this button, the Product object will be called from the Global Products map by the matching product id. The selected product and color will be added to the cart. Click Preview to see how it works. The repeater displays all your products. When you hover over an image, you can view the item from different angles. Select the color you want and buy it in one click. Now you're ready. This video is always here, so come back and watch it again. For more help. You can also visit our Resources page for tutorials. Article.
