top of page
Add to Cart Gallery

Add to Cart Gallery

Let customers add products to their cart—right from your product gallery.

Intermediate.png

Advanced

4K

Published:

December 31, 2019

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, we built a custom product gallery that lets a site visitor rotate a product’s image, select a product’s color, and add the selection to their cart.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

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.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Bulk Add to Cart

Bulk Add to Cart

Let customers add multiple items to their cart—all at once.

Intermediate.png

Advanced

Minimum Order Total for Shipping

Minimum Order Total for Shipping

Notify customers when they don’t reach the minimum total for shipping

Intermediate.png

Beginner

Delivery Time

Delivery Time

Let customers choose a custom delivery time

Intermediate.png

Advanced

Anchor 2
bottom of page