Bulk Add to Cart

Choosing the Bracelet and Charms

On the Charm Bracelet page, containers hold the elements that let visitors select a bracelet’s material and charms. These containers collapse or expand as visitors progress through the steps. Visitors can click on the heading text for any step to expand that step and collapse the others. Above these containers is the bracelet’s description, which is connected to the Description field in the Products collection.

After a visitor selects a bracelet material, the preview image on the left displays the color of that material. When the visitor clicks Next, the Choose charms container expands. A repeater in the container displays the available charms from the Products collection. When a visitor selects a charm, a black border appears around it and the charm is added to the preview image. After five charms are selected, an overlay covers the remaining charms so they can’t be selected.

If a visitor clicks on a charm they previously selected, the border disappears and the charm is removed from the preview image. If five charms were selected, then clicking one removes the overlay from the remaining charms, enabling their selection.

When a visitor clicks Finish, the Review custom bracelet section expands, displaying the selected material for the bracelet, the selected charms, and the total price.

Clicking Add to Cart adds the selected bracelet and charms to the shopping 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.