[Pro] Adding a Login Popup with Merchant Pro
Would you like customers to log in without leaving the page they’re on? The Login Popup module in Merchant Pro adds an elegant login modal to your site, so users can sign in from anywhere instead of heading to a separate login page.
In this guide, we’ll walk you through how to configure and enable the Login Popup module in Merchant Pro.
Before you get started, make sure you’ve installed and activated the Merchant plugin on your WordPress site. If you’re using premium modules, ensure you have Merchant Pro installed and active. This feature requires Merchant Pro.
The module gives you a handy shortcode you can add to any page. Here’s the Login link in its closed state, added with Merchant Pro to our free Botiga WooCommerce theme. When a user clicks it, a stylish login popup appears:
Here’s what the login popup looks like expanded:
For logged-in users, the module shows a dropdown menu with key account pages like Orders, Downloads, Addresses, and Account Details:
1. Open the Login Popup module
First, open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area. Find the Improve Experience section, and click the Login Popup module to open its settings page.
2. Configure the settings
On the module’s admin page, you’ll find two groups of settings. We recommend reviewing each option before activating the module:
- Settings: Customize the login link for both logged-in and logged-out users, including the link text, welcome message, and colors.
- Popup Settings: Change the design of the login modal, including the popup width and the colors of the title, text, icons, links, and buttons.
Once you’ve configured the settings, click the Save button in the top-right corner of the page.
3. Enable the Login Popup module
To activate the module, click the Enable button at the top of the page.
4. Add the Login Popup shortcode to your pages
Once the module is enabled, use the [merchant_login_popup] shortcode to add the login popup to any of your pages.
Adding the shortcode to individual pages
Use the Shortcode block in the WordPress block editor to insert the Login Popup shortcode into a post, page, or custom post type:
Adding the shortcode to a menu
To add the login popup link to a menu, you’ll need a theme or plugin that supports shortcodes in menus, since neither WordPress nor WooCommerce offers this by default. Below, we’ll add the shortcode to the top menu using the header builder in our Botiga Pro theme (Botiga Pro is a companion plugin that extends the free Botiga WooCommerce theme with advanced features).
With Botiga and Botiga Pro installed and active, open the Customizer from the Appearance » Customize menu in your WordPress admin area. Click the Navigation » Header menu, then find the Shortcode component among the available components at the bottom of the panel:
Drag the component to the spot in the header where you want it. Click the gear icon inside the component to open its settings, insert [merchant_login_popup] into the input field, configure the design settings such as alignment, visibility, colors, and padding, then click the Publish button to make the changes live:
Frequently asked questions
Below, we’ve answered some of the most common questions about the Login Popup module.
Where can I place the login popup?
Anywhere that accepts the [merchant_login_popup] shortcode. Add it to a page with the Shortcode block, or to your header menu if your theme supports shortcodes in menus.
What do logged-in users see?
Logged-in users see a dropdown menu with key account pages, including Orders, Downloads, Addresses, and Account Details, instead of the login link.
That’s it! You’ve successfully set up the Login Popup module in Merchant Pro to give customers a faster, friendlier way to log in.
Next, would you like another way to improve your store’s experience? Check out our guide on the Product Navigation Links module to learn more.