How To Embed Shopify Products on Elementor [FREE]

Are you looking to showcase your Shopify products on a WordPress site built with Elementor? Whether you’re running a hybrid store or want to leverage both platforms, embedding Shopify products into Elementor is simpler than you might think.

In this guide, I’ll walk you through the entire process using the official Shopify Buy Button sales channel. No coding skills required!

Why Embed Shopify Products in Elementor?

• Sell anywhere: Display your Shopify products on any website
• Secure checkout: Customers still check out via Shopify’s trusted payment system
• Design flexibility: Keep your Elementor-designed layout while adding ecommerce functionality
• No migration needed: Use both platforms together seamlessly

What You’ll Need

• A Shopify store (development or live)
• A WordPress site with Elementor installed
• 10 minutes of your time

Step 1: Install the Shopify Buy Button Sales Channel

First, we need to add the Buy Button to your Shopify store:

1. Go to apps.shopify.com/buy-button or search “Shopify Buy Button” on Google
2. Select your Shopify store and click Install
3. Once installed, you’ll see the Buy Button option in your Shopify admin

Step 2: Create Your Product Buy Button

1. In the Buy Button sales channel, click Create a Buy Button
2. Choose Product (we’ll cover collections later)
3. Select the specific product you want to embed
4. Customize the appearance:

• Choose layout (classic, full view, etc.)
• Set button colors and corners
• Adjust image size
• Decide what happens when someone clicks “Add to Cart”

Pro Tip: You can choose between “Add product to cart” or “Direct to checkout” based on your preference.

5. Click Next to generate your embed code
6. Click Copy Code

Step 3: Embed in Elementor

Now let’s add that code to your Elementor page:

1. Open the WordPress page you want to edit with Elementor
2. Click the plus (+) icon to add a new element
3. Search for HTML and drag the HTML widget onto your page
4. Paste the copied Shopify code into the widget
5. You’ll instantly see your product appear
6. Click Publish or Update

That’s it! Your Shopify product is now live on your Elementor website.

Bonus: Embedding a Full Collection

Want to showcase multiple products? Here’s how:

1. Go back to your Buy Button sales channel
2. Click Create a Buy Button and select Collection
3. Choose the collection you want to display
4. Customize the layout:

• Image size (small works great for 4 products per row)
• Button text and colors
• Font sizes and alignment

1. Generate and copy the code
2. Paste into a new Elementor HTML widget

Now your entire product collection appears directly on your WordPress site!

Testing the Customer Experience

Once embedded, test the flow:

• Add to Cart: Products are added within your WordPress site
• Checkout: Customers are seamlessly redirected to Shopify’s secure checkout
• Buy Now: If you selected “Direct to Checkout,” one click takes customers straight to payment

Frequently Asked Questions

Will this work on any Elementor page?
Yes! The HTML widget works anywhere in Elementor.

Does the customer leave my site?
Only during checkout. Products are viewed and added to cart on your WordPress site.

Can I style the buttons to match my theme?
Absolutely. The Buy Button settings let you customize colors, corners, and text.

Is this free?
Yes, the Shopify Buy Button sales channel is completely free.

Helpful Resources

• Shopify Buy Button App: apps.shopify.com/buy-button
• Big Bulk Discount App: Boost your average order value with volume discounts

Final Thoughts

Embedding Shopify products into Elementor opens up endless possibilities. You get the design freedom of WordPress with the powerful ecommerce engine of Shopify—all in one place.

Have questions? Drop them in the comments below. Want a tutorial for Wix or Squarespace? Let me know!