Articles on: Getting Started

Designer Mode: Choosing How the Designer Appears on Your Product Page

By default, Fancy Product Designer opens as a full-screen overlay when a shopper clicks a "Customize" button. If you'd rather embed the designer directly into your product page, or use different setups for different products, you can control all of this in Global Settings > Integration > Theme.


Before you get into selectors: for most themes, Fancy Product Designer already knows where to place itself, since your theme is recognized automatically and stored in our database. In that case, all you need to do is pick the Designer Mode you want; you don't need to fill in any of the selector fields described below. Those fields exist mainly for troubleshooting and for themes we don't automatically recognize, so treat the rest of this article as background knowledge rather than a setup checklist. You'll only need it if something doesn't show up correctly after choosing your mode (see also FAQ - Why does the designer not show up on my page).


What Designer Mode Controls
The "Designer Mode" section changes how the designer behaves on your product page. Three options are available:

  • Customize Button (default): the designer stays hidden until a shopper clicks a "Customize" button, then opens as a full-screen overlay.
  • Product Page: the designer is embedded directly into an element on your product page, with no button or overlay involved. By default, we replace the media gallery on your product page.
  • Mixed/Custom: lets you use different modes for different products in the same store.

Change this setting under Global Settings > Integration > Theme. For most stores, picking one of these options is the only step you need to take. The fields covered below fill themselves in automatically for supported themes.




Customize Button Mode: Modal Mode Settings

If you use "Customize Button" mode, the "Modal Mode" section is where these details live, but for supported themes, they're already filled in correctly, so you normally don't need to touch them. Two fields live here:

  1. "Customize Button Selector": the button that opens the designer overlay. Leave this blank to have our app add a "Customize" button automatically.
  2. "Main Product Image": the element that should update with the customer's preview once they save their customization.

Only fill these in yourself if the button or preview isn't behaving correctly, or if you're on a theme we don't recognize automatically.


Important: if you do need to edit these, keep in mind "Main Product Image" is not the same field as "Designer Placement", covered next. Mixing these two up is one of the most common setup mistakes and can make your designer or product image disappear from the page.




Not sure how to find the right CSS selector for your theme? Theme Setup - CSS Selector walks you through finding it with your browser's inspector.


Product Page Mode: Setting the Designer Placement

If you use "Product Page" mode, the designer needs a specific spot on your product page to embed into. For supported themes this is already set up for you. You only need to set it yourself, under "Designer Placement" in the "Fancy Product Designer Element Selector" field, if the designer doesn't appear in the right place after switching to Product Page mode. In that case, enter the CSS selector of the element you want to replace with the designer, for example media-gallery.




Mixed/Custom: Using Different Modes for Different Products

Important: Setting up Mixed/Custom mode involves creating a new product template in Shopify and assigning the right profile to each product. This setup can get complex quickly. We recommend reaching out to us via the in-app chat and asking for setup help before you start. We're happy to walk you through it.


In principle, Mixed/Custom lets some products use the Customize Button while others use the embedded Product Page mode, in the same store. To set up the Customize Button for specific products:

  1. In your Shopify theme editor, create a new "Product Page Template" and add the app block for the Customize Button to it.
  2. In the app, create a Customization Profile with "#fpd" entered in the "Product Designer Placement" field.
  3. In the app's Shopify Products tab, assign this profile to every product that should use the Customize Button.
  4. In Shopify, assign the new template to those same products.


All other products keep using your default Product Page integration.


Note: this only lets different products use different modes. A single product page can't combine both at once.


Per-Product and Per-Profile Overrides

This is a troubleshooting option: if one specific product needs a different Designer Placement selector than the rest of your store, you can override it individually per product or per profile, in the same settings area, without changing your global setting.


Key Takeaways

  • For most stores, your theme is already recognized automatically, so picking a Designer Mode is the only step you need, and you can skip the selector fields entirely.
  • The "Modal Mode" and "Designer Placement" selector fields only matter for troubleshooting or for themes we don't automatically recognize.
  • "Customize Button" is the default mode; "Product Page" embeds the designer directly instead.
  • If you do need to set selectors manually: "Designer Placement" (Product Page mode) and "Main Product Image" (Customize Button mode) are different fields. Don't mix them up.
  • "Mixed/Custom" lets different products use different modes, but setup is complex. Reach out to us for help before you start.


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

Updated on: 30/07/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!