Print on Demand

The Collection We Added: customProducts

The customProducts collection has the following fields:

• Title: The name of the product

• Mask: An image that masks the area surrounding a product image

• Product: A field that references the Name field in the Products collection

Customizing the Product

The CustomProducts dynamic page displays the product image, title, description, and price from the Products collection. At the top left of the page is the option to select a product: a phone case or a notebook. The visitor selects which product they want to customize by clicking a button, which is inside a repeater.

For each product, the page displays an image of it and a box with tabs for the background and text customizations. Visitors can customize the product background with a color and/or an uploaded image. The color selections are defined in the Products collection. Each color button is made up of a button and a container. The button implements the hover effect, which displays a black border around it, and the container changes the color. When the visitor clicks a button, the background color of the item is updated to reflect their selection.

We created the preview image of the product by overlapping elements inside a container, in the following order (from top to bottom):

• The image of the product on the CustomProduct page, which comes from the Mask field

• A text element that will display the visitor’s custom text

• An empty image element that will display the visitor’s uploaded photo

The image that comes from the Mask field is a transparent image of the product, surrounded by a background. This background masks the area around the product image, preventing the display of any effects from its underlying elements. Because the image is transparent, any changes made to the underlying elements are only visible in the product part of the image.

Customizing the Background Color

When a visitor selects a background color, the color of the background container changes. This makes the transparent part of the product image appear to have the selected color, while the mask hides the rest of the background container.

Customizing the Background Image 

If the visitor uploads a photo, selecting a file initiates the upload and updates the background image. Here, too, the background surrounding the product image masks the area around it, allowing the underlying uploaded photo to appear only in the transparent part. If the uploaded photo is also transparent, the visitor can add a background color in addition to their custom photo.

Customizing the Text

On the Custom Text tab, the visitor can add custom text to their product. They can either write their own text or click a button to get a random phrase from a predefined set of phrases. The selection is immediately reflected in the product image. They can also select a color for their text. The color buttons are implemented in the same way as the background color.

Clicking Add to Cart adds their customized product 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.