This article will walk you through the steps to install and configure a Prodigy Elementor Kit starting from a fresh WordPress install with no existing custom content or design.
- Install and activate the Prodigy plugin
- Install and activate the Elementor and Elementor Pro plugins
- Activate the required Elementor features
- Install and activate the Hello Elementor theme
- Delete the existing Cart and Thank You pages
- Import the Elementor Kit
- Assign the Elementor Cart and Thank You pages
- Add the store logo to the header template
- Configure the mega menu
- Adjust the global styles
Install and activate the Prodigy plugin
First, you will need to install and activate the Prodigy Commerce WordPress plugin. From the WordPress Admin, navigate to Plugins -> Add New Plugin. In the search bar at the top right of the screen, type in "Prodigy" and you should see the plugin.
Click the Install Now button to install the plugin:
Then click the Activate button to activate the plugin:
For more detailed instructions, refer to our article Installing the Prodigy WordPress Plugin.
After you click the Activate button, you will be automatically directed into the plugin's setup wizard. Click the Connect button on the first step of the wizard to connect a Prodigy store to the plugin.
Please refer to our Setup Wizard articles for more detailed information.
Install and activate the Elementor and Elementor Pro plugins
The Prodigy Elementor Kit requires that both the Elementor and Elementor Pro plugins be installed and activated.
The Elementor plugin can be installed and activated in the same way that you installed the Prodigy plugin in the previous step. After searching for the plugin, click the Install Now and then the Activate buttons.
The Elementor Pro plugin requires a license that must be purchased through the Elementor website. After purchasing the license, you will be able to download the archive (.zip) file from your Elementor account. To install the plugin, navigate to Plugins -> Add New Plugin and then click on the Upload Plugin button at the top of the page and then the Choose File button to select and upload the plugin archive.
After activating the Elementor Pro plugin, you will see a Connect & Activate link on the Plugins page. Click that link and follow the instructions to activate your license.
Activate the required Elementor features
The Prodigy Elementor Kit requires a couple of beta features that must be enabled before you install the kit. To install these features, navigate to Elementor -> Settings.
Then on the top tabs select Features.
In the Ongoing Experiments section, there are three features that need to be activated: Editor Top Bar, Nested Elements, and Menu. Change the dropdown on each of these to Active.
In the Stable Features section, double-check that the following features are already enabled: Flexbox Container and Hello Theme Header & Footer.
Then scroll all the way to the bottom of the page and click the Save Changes button.
Install and activate the Hello Elementor theme
The Prodigy Elementor Kit is designed to work with Hello Elementor as the base theme. To install the theme, navigate to Appearance -> Themes.
Then click on the Add New Theme button at the top of the page.
Then in the search bar at the top right of the page, enter "Hello Elementor" to find the theme. Similar to the plugin steps above, you will then click the Install and Activate buttons.
Delete the existing Cart and Thank You pages
Before we install the Elementor Kit, we need to delete the existing Cart and Thank You pages because the kit installation will create new Elementor versions of these pages. To do this, navigate to Pages -> All Pages.
If you hover your cursor over the Cart page, you will see a Trash link that you can click to move the page to the trash.
Then do the same for the Thank You page.
Then click on the Trash link above the pages table.
Then click the Empty Trash button.
Import the Elementor Kit
The next step is to import the Elementor Kit that was provided to you by your Prodigy account manager. If you do not have a Prodigy Elementor Kit, please reach out to us at support@prodigycommerce.com and we will get in touch with you to discuss your needs.
If you already have your Elementor Kit archive file, you can navigate to Elementor -> Tools.
Then click on the Import / Export Kit tab at the top right of the page and then click the Start Import button.
Then click on the Select File button and find the Prodigy Elementor Kit archive file on your computer to upload.
You can then follow the prompts and accept all of the default values to complete the kit import process.
Assign the Elementor Cart and Thank You pages
Because we deleted the original Cart and Thank You pages, we now need to reassign the new Elementor Cart and Thank You pages in the Prodigy plugin settings. To do this, navigate to Prodigy -> Settings.
Then select the Pages tab at the top of the page.
If you then click into the Cart page field, you can start typing "Cart" to find the new Cart page.
Repeat this process to assign the new Thank You page and then click Save Changes at the bottom of the form.
Add the store logo to the header template
To set the site's logo in the header template, navigate to Appearance -> Customize in the WordPress Admin.
Then on the left menu, select Site Identity.
You can then click on the Select logo button to upload the site's logo.
The logo will then automatically appear in the Elementor Header template. You can edit the size and position of the logo by navigating to Templates -> Theme Builder and editing the template named Elementor Header Kit.
Configure the mega menu
To configure the menu, navigate to Templates -> Theme Builder.
Then select the Elementor Header Kit template and click the Edit link.
You will see that the header template menu has five placeholder menu items. Click on the Menu Widget to open the editing options.
In the left panel, you will now see the Edit Menu options where you can edit the existing placeholders or add additional menu items if needed. If you don't need all five menu items, you can delete the excess items by clicking the X in the right column.
If you click on an individual menu item, you can then edit the details of that item. If the item is going to be a link to a single page, you would edit the Title, Link, and turn off the Dropdown Content switch. If the item is going to be a dropdown to a sub-category menu, you would edit the Title, leave the Link blank, and make sure the Dropdown Content switch is on.
If the item is going to be a dropdown to a sub-category menu, you will then need to click on the menu item in the header template and you will see a WordPress Menu widget appear as shown below.
If you then click on the WordPress Menu widget, you will see in the left panel the settings where you can assign the menu.
The menu that you are assigning is a standard WordPress menu, so before you can do this you must create the menus that you want to use by navigating to Appearance -> Menus.
Adjust the global styles
You can access the global styles of the Prodigy Elementor Kit from any Elementor template by clicking on the hamburger menu at the top of the left panel.
Then select Site Settings to access the global styles of the Elementor Kit such as colors and fonts.