How To Create A Popup For Your Shop Archive Page

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

You’ll learn how to create a popup that:

1. Blends in naturally with your website
2. Displays on its corresponding category / product archive page

Design Product Archive Templates

1. Go to WooCommerce > Categories and create product categories if you haven’t already done so.
2. Go to Templates > Theme Builder and create an archive template for each product category. Make sure your category image is positioned in an area that will coordinate with the popup you design, as it will be an integral part of the entire animated effect.

Set The Product Archive Templates’ Publish Options

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

Design the Popup and Its Content

1. Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)
2. Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. Because this popup will closely integrate with the design of the product archive templates, it’s best to design your own.
3. Design the popup content with the category in mind. Leave an area on the top of the popup with some blank space, so the archive template image can overlay it nicely.
4. In Popup Settings > Layout, set Entrance Animation to Slide In Left.
5. In Popup Settings > Advanced, set Disable Page Scrolling to Yes.

Set The Publish Options

1. Go to  Publish Settings > Conditions, and set Include > WooCommerce > Product Categories > search and select the relevant category.
2. Go to Triggers and set On Scroll Direction to Down and Within 8% of scrolling. Of course, adjust the percentage to accommodate your design so that the popup coordinates with where you have your category image displaying on the product archive page.
3. Go to Advanced Rules and set Show On Devices only to Desktop, since this design concept won’t work as well on laptop or mobile. You can always create different popups and design schemes for those devices if you choose.

Adjust The Product Archive Template

1. Go to Templates > Theme Builder to edit your product archive template that will be using this popup.
2. Edit the category image widget and go to its Advanced tab, and set the Z-Index to 10,000. This will allow the category image to appear on top of the overlay and popup.

Repeat the steps for each product category, creating a relevant popup for each. Ensure that every popup focuses on a product in the category that pairs well with the category’s image. Use Conditions to assign each popup you design to its product category.

All done. Now visit the live product category pages, and see how seamlessly your popups blend with your archives.