How to Embed Excalidraw in Your Shopify Store - Simple Guide

Are you looking to add interactive Excalidraw diagrams to your Shopify store? Whether you want to showcase product sketches, explain processes visually, or share collaborative drawings with your customers, this guide will show you how to embed Excalidraw content on your Shopify store quickly and easily.

What is Excalidraw?

Excalidraw is a virtual whiteboard tool that lets you create hand-drawn-style diagrams. Its sketchy, whiteboard-like drawings add a personal touch to your visuals and can help explain concepts in a friendly, approachable way.

Benefits of Adding Excalidraw to Your Shopify Store

• Visually explain product features and benefits
• Create custom how-to guides and instructions
• Share professional diagrams that look hand-drawn
• Enhance your product pages with interactive visual content
• Improve customer understanding with visual explanations

Step-by-Step Guide to Embedding Excalidraw in Shopify

Step 1: Install EmbedAny App

First, you’ll need to install and activate the EmbedAny app on your Shopify store:

1. Visit EmbedAny on the Shopify App Store
2. Click “Add app” and follow the installation instructions
3. Complete the setup process to activate the app on your store

Step 2: Create Your Excalidraw Diagram

1. Go to Excalidraw.com and create your diagram
2. Once you’re happy with your diagram, click “Share” in the top right corner
3. Choose to create a shareable link for your diagram
4. Copy the shareable link that Excalidraw provides

Step 3: Embed Your Excalidraw Diagram in Shopify

1. Go to the page or product where you want to add your Excalidraw diagram
2. In the Shopify rich text editor, paste the Excalidraw link
3. Highlight the link and click the italic button (or use the keyboard shortcut Ctrl+I / Cmd+I)
4. Save your changes

That’s it! When you view your page, the plain link will be transformed into an interactive Excalidraw diagram that your customers can see directly on your store.

Tips for Using Excalidraw in Your Shopify Store

• Create simple, clear diagrams that explain your products visually
• Use Excalidraw to show assembly instructions or how to use your products
• Add diagrams to your FAQ or help sections to better explain complex concepts
• Create comparison diagrams to highlight the benefits of your products

Troubleshooting

If your Excalidraw embed isn’t appearing correctly:

• Make sure you’ve made the link italic in the text editor
• Verify that EmbedAny is properly installed and activated
• Check that you’re using a public, shareable Excalidraw link

With EmbedAny, adding interactive Excalidraw diagrams to your Shopify store is simple and requires no technical knowledge. Start enhancing your store with engaging visual content today!