LogoLogo
Back to PageFly.ioVideo Tutorials
English 🇺🇸
English 🇺🇸
  • PageFly Help Center
  • Getting Started
    • Overview
    • Quick start
      • How to Install PageFly
      • How To Use PageFly | Get started in 5 mins
      • How to Create a New Page from PageFly Templates
      • How can I access the PageFly LiveChat?
      • How PageFly work with your Shopify theme?
    • Pricing and billing
      • PageFly pricing plan
      • How PageFly billing work?
      • What happens if I uninstall PageFly?
      • PageFly refund policy
  • Pages & Sections Creation
    • Overview
    • General
      • Setting up PageFly Pages
      • What type of pages that PageFly support?
      • How to use PageFly pages and sections?
      • How to export and import PageFly pages and sections
    • Pages
      • How to create a Homepage with PageFly?
      • How to create a Product page with PageFly
      • How to create a Collection page with PageFly
      • How to create a Blog post page with PageFly
      • How to create a Password page with PageFly
      • How to create a FAQs page with PageFly?
      • How to create a Coming soon page with PageFly
      • How to create an About us page with PageFly
      • How to create a Contact Us page with PageFly
      • How to create a Landing Page with PageFly?
      • How to create A/B testing page with PageFly
    • Sections
      • How to use premade section and saved section to build page?
      • How to create a basic section with image and text
      • How to use parallax effect in a PageFly section?
      • How to create a full-width section in PageFly
      • How to make a sticky section without code in PageFly
  • Page Structure & Elements
    • Overview
    • Editor
      • User interface
        • How to work with PageFly editor?
        • How to work with PageFly on mobile?
        • Page Editor – Element Inspector
        • Page Editor - General Tab
        • Page Editor - Styling Tab
        • How to use Page outline to organize page layout?
        • How to make impressive mobile responsive page?
        • How to use autosave and version history ?
      • Extra Functions
        • How to manage custom option swatches for product variants?
        • How to use Global Styles to customize styles to use for all PageFly pages
        • How to use trash to manage deleted pages, sections, and media files?
        • How to Add Custom Font in PageFly
        • How to manage image and video in PageFly?
    • PageFly Elements
      • Universal Elements
      • Containers
        • Layout
        • Slideshow
        • Tabs
        • Accordion
        • Content List
      • Basic
        • Heading
        • Paragraph
        • Button
        • List
        • Icon
        • Divider
        • HTML/Liquid
      • Media
        • Image
        • Youtube video
        • Vimeo video
        • HTML video
        • Soundcloud
      • Social
        • Instagram feed
        • Facebook like & share
        • Facebook feed
        • Twitter feed
      • Advanced
        • QR code
        • Table
        • Countdown
        • Google map
        • Progress
        • Mailchimp form
    • Shopify elements
      • Custom Content
        • App blocks
      • Product
        • Product Variant Metafield
        • Product list
        • Product details
        • Product media
        • Product title
        • Product vendor
        • Product price
        • Product description
        • Product variant
        • Product quantity
        • Product Add to cart
        • Product view details
        • Product Metafield
        • Dynamic checkout button
      • Collection
        • Collection title
        • Collection image
        • Collection list
        • Collection view details
        • Collection details
        • Collection description
      • Form
        • Customer form
        • Customer form field
        • Customer form button
        • Contact form
        • Contact form field
        • Contact form button
        • Search form
      • Blog posts
        • Blog post list
        • Blog post details
        • Blog post image
        • Blog post title
        • Blog post content
        • Blog post meta
    • Optimization
      • How to use custom code editor to customize your page?
      • Page Analytics
      • How to speed up your Shopify store?
      • How to set up Facebook Pixel to understand the actions people take on website?
      • How to publish PageFly page to Shopify menu navigation?
      • How to use the Zakeke Product Customizer on PageFly pages?
      • How to use Langify to translate my page?
      • How to use Weglot to translate my pages?
      • How to use T Lab to translate PageFly’s page?
      • JSON Template with PageFly
      • How to Optimize Images with TinyIMG in the PageFly editor?
      • How to use Shoplift A/B Testing with PageFly?
      • How to use SEOAnt:AI SEO & Image Optimizer with PageFly?
      • Black Friday Sale Ideas
      • Optimize Pages for CRO with PageFly Elements
      • Optimize Sale On Valentines Day
      • How to set up Christmas Sale Page with PageFly | Best Guide in 2023
      • How to create a Flash sale section - Back to School
      • Optimize Your Store for Mother's Day: Create a Gift Guide with PageFly
    • Main Use Case
      • Align Elements on a Page
      • Direct to Links, Sections, Pop-ups
      • Edit Spacing, Margin and Padding
      • Flex Feature
      • Upload Files to Page
  • Integrations
    • Third-party Elements
      • How to activate integrated third party Shopify apps to use on your pages
      • What apps does PageFly integrate with?
      • Review & Rating
      • Upsell & Cross-sell
      • Badge & Seal
      • Appointment Booking
      • Delivery & Pickup
      • Subscriptions
      • Order Tracking
      • Upload Fields
      • Email Marketing
      • Product Information
      • Push Notifications
      • Referral & Affiliate Marketing
      • Image & Media
      • Loyalty & Rewards
      • Sustainability
      • Gifts
      • Internationalization
      • Advertising
      • Support
      • SMS Marketing
  • FAQ & Troubleshooting
    • Overview
    • FAQs
      • Issues with Shopify themes when using PageFly
      • How we comply with GDPR
      • The URL address of my page
      • PageFly Page editor - FAQs
      • Elements - FAQs
    • Troubleshooting
      • Live site issue
        • Cart Drawer does not Automatically Update
        • Responsive mobile horizontal scroll issue
        • YouTube, HTML Videos do not autoplay issue
        • Page not fully displayed in theme preview mode
        • Can't create locales file
        • Can't create theme.pagefly.liquid
        • How to hide Shopify's Default Product Details
        • PageFly Page List Won't Stop Loading
        • Remove the blank space on top of the page
        • Blog page not updated successfully
        • The page's style is broken
      • Error messages
        • PageFly Page List Won't Stop Loading
        • Page Size Limit
        • Limit elements on a page
        • Unable to import your data
        • Limit image size
        • Unknown error
  • Latest Update
    • PageFly is now compatible with Online Store 2.0
    • PageFly Referral Program
    • PageFly old pricing plan
  • PageFly Affiliate Program
    • Affiliate Success: Understanding what PageFly can do for Merchants
    • Affiliate Success: Dos & Don'ts - Everything to Know about Becoming a Successful PageFly Affiliate
    • Affiliate Success: Frequently Asked Questions
Powered by GitBook
LogoLogo

Product

  • Templates
  • Pricing
  • Happy Customer

Resource

  • Blog
  • Academy
  • Video Tutorials
  • Community
  • Feedback

Partners

  • Our Partners
  • Affiliate Program

Company

  • About Us
  • Careers
  • Privacy Policy
  • Terms of Service

Copyright © 2025 PageFly. All rights reserved.

On this page
  • Overview
  • Requirements
  • How To Use Zakeke Product Customizer On PageFly Pages?
  • How To Configure For Zakeke?
  • Tips And Best Practices
  • Frequently Asked Questions
  • Additional Resources

Was this helpful?

Edit on GitHub
  1. Page Structure & Elements
  2. Optimization

How to use the Zakeke Product Customizer on PageFly pages?

Last updated 9 hours ago

Was this helpful?

Overview

With - The Product Customiser 2D 3D, customers can personalize any product in your store - from T-shirts, mugs, and hoodies to art, jewelry and phone cases, then to see how it looks before making a purchase.

Requirements

  • To use this element, you must first install the in your Shopify store and configure all of its options. You need to that would match your brand. For more information, please check out the following video tutorial:

How To Use Zakeke Product Customizer On PageFly Pages?

Step 1: Drag And Drop The Button Element

Before setting up the Button element, ensure you have the Product Details section on your Editor. Once that's done, drag and drop the Button element in the Product Details section.

Add the button text. For this example, I added “Customize now" for the button text.

Step 2: Add URL Bar To The Button

  1. Head to the General tab > Scroll down to the ACTION parameter.

  2. In the Click action option, choose Go to URL > Hit the Select URL button

  3. On the URL drop-down menu, choose / > Paste the code in the URL bar: /apps/zakeke?pid={{product.id}}

  4. Hit the Select button

Step 3: Update Class And Add Javascript Code

  1. ​​On the General tab, head to the ATTRIBUTES parameter > Head to HTML class > Add “​​zakeke-button”.

  1. Hit Save

Step 4: Customize Zakeke Button Styling

Switch to the Styling tab to customize the button design like Content Color, Typography and Background Color.

Once it’s all set, select Save & publish and check it on the live view. When your visitors click on the Zakeke Customize Button, it will take them to Zakeke’s customize page.

How To Configure For Zakeke?

From the Shopify admin, click on Apps > Choose Zakeke Product Customiser 2D 3D

Tips And Best Practices

  • When designing the Zakeke product customizer button within PageFly, prioritize an intuitive and user-friendly interface. Users should easily understand the customization options and how to interact with them

  • Consider including brief instructions or tooltips within the customizer element to guide users through the customization process, especially for complex options

  • Ensure the Zakeke product customizer element visually integrates seamlessly with your overall PageFly design and your brand aesthetic

Frequently Asked Questions

1. What is Zakeke Shopify app?

Zakeke Shopify supports tools to boost sales and increase customer retention by offering a visual customizer and 3D product configurator. Sellers can integrate with their preferred print-on-demand (POD) platform and provide in-store design options with Zakeke Shopify.

2. When was Zakeke Shopify created?

Zakeke was created in 2017.

3. How much is Zakeke Shopify?

The monthly subscription fee is $19.90.

3. Can I use Zakeke Shopify in the PageFly editor?

Yes, you can.

4. What are included in Zakeke Shopify plans?

A Starter Plan from Zakeke Shopify includes Up to 25 published products, 2D Visual Customizer, 3D Configurator, 3D/AR Viewer, Virtual Try-On, and Unlimited view, produced with "Powered by Zakeke" label.

5. Who are the Zakeke Shopify partners?

Printful, CustomCat, Zapier, Order Desk, Shopney, Printeers

Additional Resources

You'll also need to have the app installed and activated in your Shopify store.

For more details on the Button element configuration, check out .

Move to the bottom left sidebar of the Editor > Add custom Code > Paste the in the Custom JavaScript tab

For more details on creating a customizable Zakeke Product Customiser 2D 3D product, check out .

PageFly
this article
Javascript code
this guideline
How to Publish PageFly Page to Shopify Menu Navigation
Create a Sticky Section with PageFly
Zakeke
Shopify
Zakeke Shopify app
configure its settings