How to use the Zakeke Product Customizer on PageFly pages

In this article, you’ll learn about the Zakeke Product Customizer and how to use it with PageFly.

In order to use this element, the Zakeke Product Customizer app has to be installed on your Shopify store.

Install Zakeke

Install PageFly

You can watch this video tutorial:

About Zakeke Product Customizer

Zakeke Product Customizer lets your customers personalize any products (clothing, promotional gifts, paper products, shoes, jewelry, watches) and visualize how they’ll look before checking out.

Before using Zakeke on PageFly Product Page, you have to install the Zakeke Product Customizer app and configure all settings in this app.

How to use the Zakeke Product Details Button on PageFly pages

Step 1: Drag and drop the Button element

Before using the Button element, you need to have the Product Details element on your editor.

And then drag and drop the Button element inside the Product Details

You can configure the button as you want. You can read more here about button element.

In this case, we will change the button name to Zakeke Customize Button

Step 2: Add URL bar to the button

1. Look at the General tab, then scroll down to the ACTION parameter
2. In the Click Action option, choose the first icon which is Go to URL and then put this line in the URL bar:
   

   /apps/zakeke?pid={{product.id}}

   Remember that you need to choose the URL column to “/”

3. Hit the Select URL button

Step 3: Update Class and add Javascript code

1. In the General tab, you need to add a Class in the Attributes parameter for the button, the class is zakeke-button
2. And then, open Custom Code editor to add the Javascript code
3. Lastly, hit Publish and see the result on your live page.

When your visitors click on the Zakeke Customize Button, it will take them to the customize page: