Color Selection Panel

Add a color selection panel for different elements directly on your product page.

In Shopify, the new Theme 2.0 system allows easy and deep integration of the Fancy Product Designer into the Product Page. This article with show how to set up the color selection panel like this:

Check out a live example of this setup in our demo store.

The color Selection Panel is a great way to offer color customization for products. Select an element in the Product Builder and activate the "Show in Color Selection" option to set this up.

Now you can add the Fancy Color Selection Panel to your product page. Next, open the "customize" view of your theme in Shopify and create a new Product Template. If you are unfamiliar with the Shopify Theme customize, you can find more information here, but always feel free to contact us for help.

In the new Product Template, you can add a Fancy App Block called "Fancy Color Selection." 

You must assign the new product template to the products you want to use it with. You can edit a Product in Shopify and change the product template in the bottom right corner. 

Now you should see the color selection panel on your product page. You can do one last step to create a similar appearance as in the example at the beginning of the article. You can define the color editing options for the element in the product builder. If you enter multiple colors or select a color list here, you will see a list of color options on the storefront.

To learn about an element's color options, look here.

If you have trouble setting up the color selection panel, please don't hesitate to contact our support.