Note: this guide is currently written for Divi 4 and earlier. ShopWP will work seamlessly with Divi 5 once released, and this post will be updated with any changes at that time.

So you have a fancy website built in Divi and now you want to sell products using ShopWP. You may be wondering… how can I do this?

The answer is the ShopWP Divi extension.

This extension is made to work seamlessly with Divi. You gain access to nine custom Divi modules for creating highly customizable Shopify product layouts.

In this guide, I’ll walk you through step-by-step on how to install, configure, and use the ShopWP Divi extension.

Let’s get started!

Requirements

Before we begin, ensure you have the following requirements met:

• A WordPress site with the Divi theme installed.
• The core ShopWP plugin installed and activated.
• The ShopWP Divi extension plugin. You can download it from your ShopWP account under Account – Downloads after purchasing.

Installing

To install the ShopWP Divi extension, follow these steps:

First, download the ShopWP Divi extension from your ShopWP account. (You can also find a link to this .zip file in the purchase confirmation email that was sent to you.)

Log in to your WordPress Admin dashboard and navigate to Plugins > Add New.

Click Upload Plugin.

Choose the downloaded ShopWP Divi extension .zip file and click Install Now.

After installation, click Activate Plugin.

Configuring

The ShopWP Divi extension doesn’t need much configuring, but there are two things to make sure you do after installation.

First, make sure the Divi builder is enabled for the Products and Collections post types. To do this, open the Divi Theme Options and click the Builder tab.

From there, make sure Products and Collections are enabled.

Second, make sure your ShopWP Divi license key is activated. This is important so that you receive plugin update notifications.

Open the ShopWP settings and click the License tab at the top. From there you will see a place to enter your license key. Click activate and you’re all set!

You can find your license key inside your ShopWP account.

Using the ShopWP modules

The ShopWP Divi extension comes with nine custom modules for displaying products. I’ll be focusing the attention of this article on using the Products module since that’s the most common use-case.

Let’s dive right in.

Choose a page you want to add products to. This can be an existing page or a new one to test things out. Once the page is created, open the Divi visual builder.

Add a new Divi section and within that section, search for the “Products” Divi module. You will see a small ShopWP logo with the module appear. Add this to your new section.

After the module is added, you’ll see a list of product settings within the Divi modal. This is where you can find all 200+ product settings. All available settings found in the products shortcodes will be here for easy customization.

Filtering products

Let’s try filtering products by collection.

I have an existing collection called “Super” that I like it use. Type your collection name in the field and watch your products change automatically!

You can do this for any criteria you want: filter by tag, vendor, product ID, product type, etc.

You can even combine filtering criteria by setting the “Match Criteria” to “AND”.

Customizing the product images

I’m not a fan of having all the product thumbnails listed. Let’s hide them. Click the products module and open the “Product Images” section.

From there, turn on the setting Show featured image only?. You should see your thumbnails disappear.

I also don’t like how there is a “Sale” notice on top of the image. We can hide that as well by turning off the Show sale notice on image setting.

Looking much better!

Customizing the product buy button

Now let’s customize the buy button. Instead of showing “View product”, I want each product to show the variant selections, and also send customers directly to the Shopify checkout page after they choose a variant. ShopWP provides this functionality out of the box.

Open the products module and click the “Checkout” section. You’ll find an option for direct checkout. Turn that on.

Let’s also update the filtering criteria so we’re only displaying one product. Open the Filtering section again and remove our collections filter. Then type in the title of one of your products in the Title field.

Voilà!

Creating custom product templates

One of the really great features of the ShopWP Divi extension is the ability to customize the product detail page template—all by using Divi!

ShopWP will create product detail pages for you after syncing. This template is normally only customizable using the ShopWP Layout Builder, or by overriding a PHP file in your theme.

Let’s customize this template using Divi instead.

Within WordPress, open the “Theme Builder” settings. You may see something different depending on how many templates you have created.

Conditional Template Settings

Click the “Add New Template” button and choose “Build New Template”. We’ll create a custom template for the ShopWP product pages.

Within the Template Settings modal, scroll down and choose “All products”.

Then click create template.

Now, click “Add custom body” -> “Build custom body”. This will open the Divi builder and let us customize the template itself.

Building the template

After opening the template, you should see a blank slate like the below screenshot.

We’ll be creating the standard two column layout for a product page.

The first step is to add a section with two columns.

Now add the ShopWP Product Images module to the left column. Simply type in “images” into the module modal window to quickly find it.

Next we’ll switch to the right column and add the Product Title. Click the add button and search for “title”. You should see the Product Title module appear. You can click it to automatically add it to the layout.

Next, we’ll add the product pricing component. Again, click the add button and search for “Pricing”. The ShopWP Pricing module should appear for you to add.

Now let’s repeat the same process for the Product Description and Product Buy Button modules. After you’re finished you should have all five modules added to your layout:

• Images
• Title
• Pricing
• Description
• Buy Button

You can experiment with all the different settings including spacing, positioning, and sizing.

After you have the layout how you want, let’s try previewing it with a different product! You can do this by selecting the product you want at the top.

Saving the template

If you’re satisfied with the final results, click the green “Save” button in the bottom right corner.

Important: make sure to save your template here as well or none of the changes will take effect!

Divi 5

The Divi team has been hard at work creating the next evolution of the Divi product—Divi 5. Thankfully they have provided early access to developers like myself to test things in anticipation for the final release.

I’m excited to say that once Divi 5 is available to the public, the ShopWP Divi extension will continue working seamlessly as before. The only thing you’ll need to do is update the extension to the latest version. All of your data, templates, and modules will remain intact.

Divi 5 looks to be very promising for speed and general quality of life improvements. I’m really looking forward to seeing the final product!

Conclusion

The ShopWP Divi extension makes it incredibly easy to customize your Shopify products within WordPress using the Divi theme. With dedicated Divi modules, you can visually design and tweak product displays, making the integration seamless and efficient.

If you have any questions, feel free to reach out in the private Slack channel or submit a ticket through ShopWP support.

I’m super excited to announce the new ShopWP affiliate program!

Just in time for the holiday season, the new program introduces a completely redesigned affiliate portal making it much easier to see your affiliate link usage, clicks, payouts, etc.

This article will cover everything you need to know about how the new program works, the sign up process, and managing your account online.

Let’s begin!

How it works

First, anyone who is currently using the existing affiliate program has been automatically migrated to the new system. No changes are needed on your behalf. Everything will continue working as expected.

The program is very simple—receive 20% of the final order total for any customer which purchases ShopWP using your special affiliate link.

You will also receive an affiliate payout for each subscription renewal. That’s a major upgrade from the original program that only paid initial purchases only.

After signing up, you gain access to a special affiliate link. You can send your customers or clients this link to purchase ShopWP or any ShopWP extension.

The link itself will store a browser cookie for up to 30 days. So if a user clicks your link and decides to purchase the following week, you will still be credited—assuming they don’t clear their browser cache.

If you’re an existing ShopWP customer you are not automatically added as an affiliate. You will need to manually sign up using the application form.

How to sign up

Signing up is super simple. Just visit the become an affiliate page and fill out the form.

You will be automatically approved and an account will be created for you. After signing up, you can visit your Affiliate Portal to manage your account.

Login to your Affiliate account

You can login to your Affiliate Portal in two ways:

• Go to the affiliate login page or
• Login to your ShopWP customer account, and click the Affiliate tab

After finishing the connection wizard, you’re all set!

Your affiliate URLs

The Affiliate URLs section is where you’ll manage your affiliate links. You can simply use the default affiliate link or create your own—totally up to you. Both will work fine.

The affiliate URL will contain a URL param called swpa which is just short for “ShopWP Affiliate”. The value will be your WordPress user ID.

You can add this link anywhere on the internet. ShopWP will track whether traffic came from your special link or not via cookies. The tracking cookie will last up to 30 days—assuming the user does not clear their browser cache.

Monitoring page visits

The Visits tab will show who’s actually clicking your link. This is particularly useful for confirming that your link is working as expected.

I recommend testing your affiliate link by opening a second browser. (Not a new tab in your existing browser). Then, click the link in the new browser and refresh your Affiliate Portal. Does the test traffic show up under the Vists tab?

If you’re having trouble getting test traffic to show up, please submit a support ticket and we’ll help you right away.

View referrals

After a customer successfully buys something from ShopWP using your link, the referral will show up under the Referrals tab.

You can go here to confirm that you’ve been correctly associated with a successful conversion.

The Rejected status means the conversion is not a valid referral. This is usually due to the customer requesting a refund on the order.

Creative

We’ve put together a useful brand assets .zip file for you to use. This file contains our logo in various formats and a style guide showcasing which colors and fonts to use.

If you have any additional questions about the referal program please send us an email. We’re eager and happy to help with any marketing needs!

Good luck!

Making a website faster can sometimes be a very tricky process—especially a WordPress site. There are many variables to consider like images, plugins, bloated JavaScript, etc.

However I recently discovered a fantastic way to slightly improve the speed of any website. The best part? It doesn’t take much effort to implement.

Let’s take a look.

Introducing, DNS-prefetch

The technique is called DNS-prefetch, and involves adding some extra HTML code to your site’s <head> section.

It looks like this:

<link rel="preconnect" href="https://cdn.shopify.com" crossorigin />
<link rel="dns-prefetch" href="https://cdn.shopify.com" />

Let’s break this down.

There are two <link> tags in the above code snippet, one for preconnect and the other for dns-pretetch.

The dns-prefetch link tag will attempt to “prefetch” the DNS resolution made to any third-party domain that your site connects to. A great example of this would be including icons from Font Awesome, or custom fonts from Google fonts. Our ShopWP plugin also leverages this technique.

The preconnect link tag, if supported by the user’s browser, will attempt to establish a full connection to the third-party server. This includes:

• 🔍 DNS resolution
• 🔒 Establishing the TCP connection
• 🤝 Performing the TLS handshake (if applicable)

So using dns-prefetch and preconnect together will help the most.

Now let’s discover why this works.

Why does this help boost WordPress performance?

So why does this help boost performance? To understand this, let’s take a quick look at how a website works.

If you load any asset (image, font, script, css, etc) from a third-party server, a bunch of things have to take place before that asset is actually loaded into your site.

1. The first thing that has to happen is your site will perform a “DNS resolution” for the third-party server. This essentially converts the domain name to a real IP address. This takes time to do.
2. Your site will then send an HTTP request to the third-party server, asking for the specific resource. This also takes time.
3. If you’re connecting to a server via https, the secure connection, or handshake, needs to happen. This will take more time.

So by implementing DNS prefetching, your site will run the above steps before the assets are even requested; essentially front-running all of the expensive work. This can potentially shave off hundreds of milliseconds—which definitely adds up—depending on how large your site is!

A great resource to learn more about this process can be found on the MDN docs.

Things to consider

There are a couple things to consider before implementing DNS prefetching:

1. This technique will only work for cross-origin (third-party) domains. This means the speed of any asset or network request made internally won’t be improved. This will only apply to third-party domains.
   
2. If you’re using a premium WordPress theme, the theme developer may have already implemented this for you. If you’re not sure, the best way to check is to simply ask them. If you’re comfortable, you could also create a child theme and make the changes yourself. See the WordPress hook section below.

Before you copy and paste, be sure to read more about how to customize this for your needs.

Under the hood, ShopWP will fetch your Shopify data from two third-party domains:

• cdn.shopify.com
• .myshopify.com

In the example below, we’re using both rel="preconnect" and rel="dns-prefetch" for the best possible results. The https://cdn.shopify.com domain is used when loading product images, and .myshopify.com is used when fetching product data.

Using DNS prefetch to speed up ShopWP

ShopWP is built to be fast, and by leveraging DNS prefetching you can make it even faster. Here’s how to configure things.

ShopWP makes requests for two domains:

• cdn.shopify.com
• <yourstore>.myshopify.com

The <yourstore> part is your specific Shopify domain. This is the same domain you use to login to Shopify. You’ll want to replace that with your own domain.

The full code snippet will look something like this:

<link rel="preconnect" href="https://cdn.shopify.com" crossorigin />
<link rel="dns-prefetch" href="https://cdn.shopify.com" />

<link rel="preconnect" href="https://<yourstore>.myshopify.com" crossorigin />
<link rel="dns-prefetch" href="https://<yourstore>.myshopify.com" />

Using a WordPress hook

To add this HTML to your WordPress theme, you can leverage the wp_head action hook inside your theme like this:

<?php

function add_dns_prefetch() { ?>

    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin/>
    <link rel="dns-prefetch" href="https://cdn.shopify.com" />

    <link rel="preconnect" href="https://<yourstore>.myshopify.com" crossorigin/>
    <link rel="dns-prefetch" href="https://<yourstore>.myshopify.com" />

<?php }

add_action( 'wp_head', 'add_dns_prefetch' );

Conclusion

While this won’t make your site load instantly, it is something you can do to improve the overall speed of your site. It’s a simple and easy technique you can implement, which is definitely rare in the world of web performance!

If you’d like to learn more about how this works, including a technical deepdive, I highly recommend this MDN article on DNS prefetching to learn more about how it works.

Hey everyone!

I’m super excited to announce that ShopWP 3.0 is coming soon! This will mark the next major leap for the plugin and will include a lot of awesome things.

Below is a sneak peak of what’s in store! 👇

🔲 Gutenberg Blocks

Last year, I asked everyone to share their interest in Gutenberg blocks. The consensus seemed to be that most of you were neutral in whether custom blocks would benefit your workflow. I recently conducted the same poll and the tide has shifted!

For this reason, and because WordPress in general is moving forward, I’ll be creating a handful of custom Gutenberg blocks for ShopWP! They’re about 70% done at this point and I must say, they’re pretty dang cool.

🧩 Custom Elementor Widgets

Many of you who were neutral on your opinion of Gutenberg expressed a desire to integrate with page builders instead. I think this is a fantastic idea! I’ll be starting with custom Elementor widgets for 3.0, and building custom Divi modules shortly after.

💵 💴 Local Currency Switching

The local currency feature is coming back! Due to various reasons I needed to turn this feature off in 2.0, but it will once again be apart of the plugin in version 3.0.

✅ Improved Templating System

The templating system will be improved to allow for things such as customizing product details, overriding webhook callbacks, and making layout changes easier.

⚡️ Faster Load Times

Many of you have told me that the plugin doesn’t load as quick on mobile. I’ve made various changes in 3.0 that will cut the desktop and mobile load times in half. This is a big deal!

🔄 Shopify Tags as Native WordPress Tags

In an effort to better integrate Shopify into WordPress, I’ll now be syncing Shopify tags as native WordPress tags for each product post. After 3.0, I’ll be doing the same for collections as categories. Both of these things will be configurable in the plugin settings.

3.0 will also include the following …

• More options for customizing permalinks
• Refactored admin pages
• Better documentation
• Better internationalization
• Improved options for displaying products from collections
• Bug fixes (including various loading issues)
• Cleaning codebase (removing unused code)
• Collections will now adhere to the “selective sync” settings
• Remove external CSS to prevent theme conflicts
• More unit tests

… and more!

Can’t wait to share more with you soon!

👋 Hey everyone

The next goal for ShopWP is to clearly define the 2019/2020 roadmap. A crucial part of this process is learning from all of you!

We’ve created a short three question survey that will literally take two minutes to fill out.

The questions are surrounding:

1. How you’re using ShopWP
2. What problems you’re solving by using the plugin
3. What you like the most about the plugin

To show our appreciation, we’ll send you a 10% off discount code that will work for any ShopWP Pro renewal or upgrade. Just add your email at the end of the survey.

👉Take the ShopWP survey

Thanks everyone!