Articles on: Shopify Integration

Previewing the Designer on a Draft (Non-Live) Theme

When you are building a new theme, you can test Fancy Product Designer on it before you publish it as your live theme. This lets you confirm everything looks right while your current theme stays untouched for shoppers.


Prerequisites


  • A product that already has a customization assigned, so there is something to preview.


Step 1: Enable the App Embed on Your Draft Theme


The App Embed is what loads Fancy Product Designer on your storefront, and it is enabled per theme. Activating it on your live theme does not activate it on a draft theme — you have to turn it on for each theme separately.


  1. In your Shopify admin, go to "Online Store" > "Themes".
  2. Under "Draft themes", find the theme you want to preview and click "Edit theme".
  3. Click the "App Embeds" icon — the third icon in the top-left corner.
  4. Find "Fancy Product Designer" in the list and toggle it on.
  5. Click "Save" in the top-right corner.


[Shopify "Online Store" > "Themes" page. The active theme (Dawn) is at the top, and the "Draft themes" section is below it. Highlight the "Edit theme" button on one of the draft themes.]



Shopify Theme Editor with the App Embeds panel open (third icon in the top-left corner). The "Fancy Product Designer" entry is boxed and its toggle is switched ON.]


This is the same App Embed covered in The "Customize" Button Isn't Showing — Enable the App Embed, just applied to a draft theme instead of your live one.


Step 2: Open Your Draft Theme's Preview


  1. Return to "Online Store" > "Themes".
  2. On the draft theme, click the "..." menu and choose "Preview".
  3. In the preview storefront, open a product that has a customization assigned.
  4. Confirm the "Customize" button and the designer appear as expected.


Step 3: Adjust the Theme Selectors (If Needed)


If the designer does not load, or it appears in the wrong place on the new theme, the CSS selectors may need to match your theme's structure.


  1. In the app, go to "Settings" > "Integration" > "Theme".
  2. Review the selector fields and enter the correct CSS selectors for your theme:
  • "Fancy Product Designer Element Selector" — the element the designer canvas loads into.
  • "Main Product Image" — the product image used for the cart preview.
  • "Customize Button Selector" — the button that opens the designer.
  • "Add to Cart Form" and "Add to Cart Button" — only needed for some custom themes.
  1. Click "Save".



[FPD app "Settings" > "Integration - Theme" page. Highlight the selector fields: "Customize Button Selector", "Main Product Image", "Fancy Product Designer Element Selector", and the "Add to Cart Form" / "Add to Cart Button" fields below.]


Important: Finding the right selectors can be tricky on a custom theme. If you are unsure, reach out in the in-app chat and we are happy to set them up for you.



If you have any questions, reach out to us via the in-app chat. We are always happy to help.


Updated on: 24/06/2026

Updated on: 24/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!