Using Elementor and WP Shopify Pro together is a great choice to gain control over the layout and design of your products. It really does give you superpowers! In the below guide I’ll explain everything from how to get started, to creating custom product templates and everything in-between.
Table of contents
In order to use Elementor with WP Shopify Pro you must meet certain requirements.
We’ve created a dedicated WP Shopify Elementor extension which is a separate WordPress plugin. This requires WP Shopify Pro to use.
So before you get started, you must have the below plugins installed and activated on your WordPress site:
- Elementor Pro (This is optional and only needed if you want to customize product page templates)
Building custom product page templates
1. Create your template
Begin by creating your custom template by going to
Templates - Theme Builder
From there, click “Add new” to create the new template:
Choose Single Post as the template type, and give it a name like “WP Shopify Single Product”.
2. Design your layout
Once the Elementor Library loads, you can choose your own pre-made layout or start from scratch. Both options will work. At this point, you can begin creating your custom product layout.
The WP Shopify Elementor extension provides dedicated widgets that can be used in any Elementor layout. You’ll use these widgets to pull in the necessary product info. Since you’re creating a Single Post template, the product info will be dynamic depending on which product single page you’re viewing.
To find the WP Shopify Widgets, scroll to the bottom of the Elementor editor panel:
For the purpose of this guide and simplicity, we’ll create a two column layout with the product image and title side by side.
First, we’ll add the native Elementor “Inner Section” widget to create the row. This will allow us to add our widgets.
Then we’ll add the WP Shopify Product Images widget to the left column:
And the Product Title widget to the right column:
3. Preview your changes
In order to preview your layout across different products, you can click the “Settings” icon toward the bottom of the editor panel. You can locate this by finding the “gear” icon.
Once loaded, open the Preview Settings section and set the “Preview Dynamic Content as” to Product. From there, you should see a list of your products.
You can select any product from this list and watch the data dynamically change inside your Elementor layout. This will help you a lot during your design process.
4. Finalizing the template
Before you can use your template you’ll need to configure the “display conditions”. This basically tells Elementor when to use the template. To configure this, click the arrow next to the green Publish button inside the editor panel:
From there, click the “Add condition” button:
Then make sure to choose
Products All . Your display condition should look like the below screenshot:
4. Adding the Elementor shortcode
The final piece needed to make the Elementor template work, is to add the Elementor shortcode to the WP Shopify Products template file.
To accomplish this you’ll need to do two things:
- Find the Elementor shortcode
- Override the WP Shopify Products Single template
You can find the shortcode by going back to
Templates - Theme Builder .
On this page, the shortcode itself can be found on the right hand side under the “Shortcode” column.
To override the WP Shopify Products Single template, you’ll need to create a folder inside your WordPress theme called
wps-templates. Inside that folder, create a file called:
products-single.php . For a full guide on how to override the plugin templates, see our Template Overiding guide.
Once you have your products-single.php file created, open the file and copy / paste the below code inside:
<?php defined('ABSPATH') ?: die(); get_header('wpshopify'); ?> <section class="wpshopify-container"> <?php echo do_shortcode('[shortcode goes here]'); ?> </section> <?php get_footer('wpshopify');
Now take the Elementor shortcode and copy / paste it into the products-single.php template file replacing the “[shortcode goes here]” text. When you’re done, it should look something like this:
<?php defined('ABSPATH') ?: die(); get_header('wpshopify'); ?> <section class="wpshopify-container"> <?php echo do_shortcode('[elementor-template id="1022181"]'); ?> </section> <?php get_footer('wpshopify');
That’s it! Your custom Elementor template should now work for all WP Shopify Products.
Last updated on January 19th, 2021