top of page
Print on Demand

Print on Demand

Change the color, add text or upload images to personalize products.

Intermediate.png

Advanced

9K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, a site visitor can customize the background and text of a product in the store.​

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

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.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

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!

Gift Quiz

Gift Quiz

Help customers find the perfect gift with a quiz and product recommendations.

Intermediate.png

Intermediate

Custom Product Price

Custom Product Price

Let customers choose a price

Intermediate.png

Intermediate

Delivery Time

Delivery Time

Let customers choose a custom delivery time

Intermediate.png

Advanced

Anchor 2
bottom of page