How can I show the options in a popup window?

If you want to show all the options inside of a popup window follow the steps below.

Personalize option

In the app, on your specific product options config, create a new option of the type "Personalize":

Instead of toggling the personalize options directly inside the product page, you can enable the popup window setting.

Furthermore you can decide if you want to show a fullscreen overlay.

Note: the popup will only show on your store, in the app the option always toggles in the page.

Value settings

The personalize option has two fixed values; yes/no. You can freely edit the values and the Text displayed on the button (you can also add a price add-on):

Required setting

The required setting will check if the personalize option is active, if not it will auto enable the personalization (including the popup) when the customer clicks on add to cart.

Add to cart button

The popup will have it's own add to cart button and go straight to the cart page after the product was added to the cart. This is done to ensure all options are saved correctly on all themes.

If you want to keep your own theme logic for adding to the cart, you can add the following attribute to the main add to cart button:

<button type="submit" data-live-cart-add-popup>Add to cart</button>

The app will look for this attribute and click on it instead of using it's own add to cart button.

This method does not work on all themes, make sure to test that all the options are saved correctly.

Variant selectors stay on the product page

The popup contains the options from your configuration. It does not contain the product's Shopify variant selectors, those stay on the product page behind the popup, and that is intentional: the add to cart in the popup submits the product form on the page, which is what carries the selected variant.

So a customer picks the variant on the product page first, then opens the popup to personalise. The live preview inside the popup does follow the variant that is currently selected on the page.

If you want the variant selectors to appear inside the popup as well, this can be achieved but requires theme-specific code to mirror the page's variant inputs into the popup and keep the two in sync. You can contact support if you would like a quote for the setup service, your theme has to be looked at first to determine the work involved.