Enter your email to download WP Shopify

Mobile WP Shopify Menu Icon
Mobile WP Shopify Menu Close Icon

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

Requirements

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:

Required Plugins:

Optional Plugins:

  • Elementor Pro (This is optional and only needed if you want to customize product page templates)

Building custom product page templates

Using Elementor Pro, you can customize the plugin’s product detail page templates using Elementor’s Theme Builder feature.

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

Try the plugin for free