Add to Cart Gallery

We added three different pairs of sunglasses to our store’s Products. Each pair of sunglasses has three images: one facing forward, one facing right, and one facing left. The order of these images is important because the code that controls the image rotation requires that order.

Each pair of sunglasses also has three color options: red, pink, and yellow.

Creating the Custom Gallery

We added a Sunglasses page and created a custom gallery using a repeater connected to the Products collection. This collection is in the Stores section of the Database.

To create the image rotation effect, we placed a product image in the repeater with one transparent container box over its right side and one over its left side. These containers are then set to change the product image so that it displays either the right or left image of the product when a user hovers over it. The front-facing image is displayed when the visitor is no longer hovering on either container.

The repeater also contains elements that display the product’s name and price, as well as color selectors and an Add to Cart button. All these elements are in another transparent container that also overlaps the product image. These elements are set to be hidden on load, and are displayed only when a visitor hovers anywhere on their container.

The color selectors are set to change the product’s display color, as well as to set the current item to the selected color. So when a visitor clicks Add to Cart, the selected color for that product is added to their cart.

Next Steps

1. Open this example in the Editor to work with the template.

2. Publish the site and refresh your browser so the Stores collections appear in the Database.

3. Learn how to work with examples in Velo.