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":

Popup setting

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.