Customizer Display Modes

Podifai supports Inline and Popup display modes. Use Inline when the personalization options should appear directly on the product page. Use Popup when you want a cleaner product page with a Customize button that opens the full customizer.

Choose a Display Mode

1. Go to Products and open the product customizer in Podifai.
2. Below the product preview image, expand Live Customizer display.
3. Under Display Mode, choose Popup or Inline.
4. Save the customizer and test the product page.

Inline Customizer

Inline mode displays the custom options directly inside the Shopify product page. It works well when the option set is short or when shoppers should see the choices immediately.

Use the App Embed or App Block to control where the inline customizer appears. App Block is the best choice when you need exact placement inside a product template.

Popup Customizer

Popup mode keeps the product page compact. The shopper clicks Customize, then completes the personalization inside a dedicated popup experience. On mobile devices, the popup uses the full screen. On desktop and web browsers, Podifai uses a fixed popup size.

Popup header

In Global Settings > Product page, set Popup header to Product title when shoppers should see the current product name at the top of the Popup, or choose Without title for a simpler header.

Popup cart behavior

Choose Redirect to cart page when Add to Cart should take the shopper directly to the cart. Choose Use default cart behavior when Podifai should follow the Shopify theme's normal cart flow, such as its cart drawer or other theme-defined behavior.

Focus areas

Turn on Focus areas to highlight the focused customization area and dim the rest of the product preview. When a shopper clicks or taps a focus area, the Popup scrolls the related customization options into view.

Live Preview zoom on mobile

Enable Live Preview zoom in Global Settings to let mobile shoppers zoom the Live Preview area. It works in both Inline and Popup modes. Shoppers can use the on-screen zoom control or pinch with two fingers to inspect the preview area more closely.

Mobile Popup experience

On mobile, the Popup starts with a larger product preview so shoppers can inspect the design. As the shopper scrolls down to work with the custom options, the preview moves upward and becomes more compact, leaving a larger actionable area for entering text, choosing values, uploading images, and completing the setup.

Required vs Optional Personalization

Hover over the Customizer button setting and find Add to Cart. Choose how shoppers should purchase the product:

• Required personalization — The storefront displays only the Customize button. The shopper must complete the personalization before adding the product to cart.
• Optional personalization — The storefront displays both Customize and Add to Cart. The shopper can personalize the product or purchase it without personalization.

Product Quantity Selector

Open Global Settings, find Product page, and use Show quantity selector to show or hide the product quantity control inside the Popup customizer.

Customize Button Text

You can customize the text shown on the Customize button. Full customizer interface translations are not currently available; Podifai currently supports the customizer interface in English.

Which Mode Should I Use?

• Use Inline for short option sets and direct product-page interaction.
• Use Popup for larger customizers or when the product page should remain visually simple.
• For Multiple Views, choose the mode that leaves enough room for view switching and preview controls on your theme.
• Use required personalization when the product cannot be purchased without configuration.
• Use optional personalization when shoppers can buy either the standard or personalized product.