How to create a popup for your store archive page

Create a popup that blends seamlessly with your product archive pages, making the popup feel like a natural design element.

You will learn how to create a pop-up window that:

1. Se integra naturalmente con su sitio Web
2. Shown on its corresponding category / product archive page

Design product file templates

1. Go WooCommerce> Categorías and create product categories if you haven't already.
2. Go Templates> Theme Builder and create a file template for each product category. Make sure the image in your category is placed in an area that coordinates with the popup you design, as it will be an integral part of the entire animated effect.

Set Publish Options for Product Archive Templates

1. For each template, set the Display conditions to Include: Product Categories > search and select the relevant category for each

Diseñe la ventana emergente y su contents

1. Go Templates> Pop-ups> Add New and give your new popup a name. (An alternative method is to press CMD + E or CTRL + E open Discoverer, search for Popup, choose Add new popupand give it a name.)
2. Choose a predesigned popup template or close the library overlay and design your popup from scratch. Because this pop-up will be closely integrated with the design of the product file templates, it is best to design your own.
3. Design pop-up content with category in mind. Leave an area at the top of the pop-up window with some white space, so that the file template image can be well overlapped.
4. In Popup Settings> Layout, set up Entrance animation to Swipe left.
5. In Popup Settings> Advanced, set up Disable page scrolling to yes.

Set publishing options

1. Go Publish Settings> Conditions, and establish Include> WooCommerce> Product Categories> Find and select the appropriate category.
2. Go Triggers and establish In direction of travel to Down and Within 8% displacement. Of course, adjust the percentage to suit your layout so that the pop-up will coordinate with where your category image is displayed on the product archive page.
3. Go Advanced rules and establish Show on devices only for Deskas this design concept will not work as well on laptops or mobile devices. You can always create different pop-ups and layout schemes for those devices if you want.

Adjust the product file template

1. Go Templates> Theme Builder To edit your product file template you will use this pop-up window.
2. Edit the category image widget and go to your Advanced tab, and set the Z-Index to 10,000. This will allow the category image to appear on top of the overlay and pop-up window.

Repeat the steps for each product category, creating a relevant popup for each. Make sure each pop-up is focused on a product in the category that matches well with the image in the category. Use Conditions to assign each pop-up window that you design to its product category.

All ready. Now visit the live product category pages and see how your pop-ups blend seamlessly with your files.