Skip to main content

Styling the customizer popup on Wix

Here are the basic settings to help you get started. Additional settings and fine-tuning might be required to give your customer the best experience possible.

Wix Studio

You can find the popup under the "Kickflip Product configurator" section from the pages list. Once selected, you can style the popup and make it match your theme and preferences. You can find a deeper dive into this topic in the related Wix article.

Advanced Size settings

For most of those settings, you will have to activate the Advanced settings mode for the Size section. You can do that by clicking on the ... button next to the Size section header.

Popup element

Customizer only element

NB: The unit for Height setting should be Calculation and the value should be (100% - 40px)

Close Button element

You can add a Close Button element following these steps:

  1. Select the Popup element

  2. Click on the Set Triggers button,

  3. From the Popup Settings panel, toggle on the 'X' icon option

Wix Editor

You can find the popup under the "Kickflip Product configurator" section from the pages list. Once selected, you can style the popup and make it match your theme and preferences. You can find a deeper dive into this topic in the related Wix article.

Close Button element

  1. Click on the Layers button in the left corner of the Editor page

  2. From the Layers panel, select the Popup element

  3. Click on the Set Triggers button

  4. Toggle on the 'X' icon option

  5. You can now move the button to the desired location

Keeping the popup open when shoppers click outside it

By default, Wix closes the customizer popup when a shopper clicks the background around it.

On Wix, the customizer has to open in a Wix popup: Wix doesn't let apps display their own window over your page, so the way the popup closes is handled by Wix. When the popup closes, the shopper's changes are not kept, and reopening it starts a new design.

To avoid accidental closes, turn off closing on background click:

  1. In the editor, click the page name at the top left (for example HOME) to open the pages menu. Scroll down to Kickflip Product Configurator and click Kickflip Customizer.

  2. Click inside the popup, then click Popup in the path at the bottom left of the editor (Page › Popup). On the toolbar that appears, click Set Up Overlay.

  3. In Overlay Settings, turn off Clicking closes popup.

  4. Keep the 'X' icon option on, so shoppers can still close the customizer (see Close Button element above).

  5. Publish your site.

Making the popup fill the screen on mobile

On phones, a popup that is narrower than the screen makes the product image smaller and leaves empty space above and below it. Making the popup full width on mobile gives the customizer more room.

In Wix Studio:

  1. Open the Kickflip Customizer popup (see the steps above).

  2. At the top of the editor, switch to the Mobile view. Sizes can be different for desktop, tablet and mobile.

  3. Select the Popup element and set its Size to W 100% and H 100% (see Advanced Size settings above).

  4. Remove any side margins or padding on the Popup and the Customizer only element.

  5. Publish your site and test on a phone.

Did this answer your question?

Related Articles