How to Embed npmcharts on Your Shopify Store with EmbedAny

Are you looking to showcase npm package download statistics on your Shopify store? Whether you’re selling developer tools or want to highlight the popularity of certain npm packages, embedding npmcharts can add valuable context for your customers. This guide will show you how to add interactive npmcharts visualizations to your store in just a few simple steps.

What is npmcharts?

npmcharts is a web service that creates beautiful visualizations of npm package download statistics over time. It’s particularly useful for comparing multiple packages or showing the popularity trend of a specific package.

How to Embed npmcharts on Shopify

Step 1: Install the EmbedAny App

First, you’ll need to install the EmbedAny app from the Shopify App Store:

1. Visit https://apps.shopify.com/embed
2. Click “Add app” and follow the installation process
3. After installation, activate the app as prompted

Step 2: Get the npmcharts Link

1. Visit npmcharts.com
2. Search for the npm packages you want to compare
3. Once you have the visualization you want, copy the URL from your browser’s address bar

Step 3: Add the Link to Your Store

1. Go to the page or product where you want to display the npmcharts visualization
2. Paste the npmcharts URL into your content editor
3. Important: Make the link italic by selecting it and clicking the italic button (or using the keyboard shortcut Ctrl+I / Cmd+I)

That’s it! The EmbedAny app will automatically convert your italicized npmcharts link into an interactive visualization.

Example Use Cases

• Developer Tool Stores: Show popularity comparisons between your tools and competitors
• Coding Course Pages: Display adoption trends for technologies you teach
• Technical Blog Posts: Add interactive data visualizations to support your content
• Product Documentation: Illustrate npm package usage statistics in your guides

Tips for Best Results

• Choose packages relevant to your audience for more meaningful comparisons
• Use the date range options in npmcharts to show the most relevant time periods
• Consider embedding npmcharts on product pages where package popularity would influence buying decisions
• You can embed npmcharts anywhere you can add text in your Shopify store: product descriptions, pages, blog posts, and more

EmbedAny works with over 800 platforms, so you can use the same simple process to embed content from TikTok, Instagram, YouTube, and hundreds more services throughout your Shopify store.

By adding interactive npmcharts to your store, you’re providing valuable information to your customers while creating a more engaging shopping experience.