EmbedAny - Embed Content in Shopify EmbedAny

How to Embed Knight Lab Interactive Timelines on Your Shopify Store with EmbedAny

Are you looking to add interactive timelines or data visualisations from Knight Lab to your Shopify store? Knight Lab’s tools like TimelineJS, StoryMapJS, and JuxtaposeJS can make your product stories and brand history come alive. This guide will show you how to easily embed these engaging Knight Lab elements without any coding knowledge.

What is Knight Lab?

Knight Lab is a community of designers, developers, students, and educators at Northwestern University who create open-source tools for storytelling on the web. Their popular tools include:

  • TimelineJS: For creating interactive timelines
  • StoryMapJS: For telling stories through maps
  • JuxtaposeJS: For before/after image comparisons
  • SoundciteJS: For adding inline audio clips

Adding Knight Lab Content to Your Shopify Store in 4 Easy Steps

1. Install EmbedAny from the Shopify App Store

First, you’ll need to install EmbedAny on your Shopify store:

  1. Visit EmbedAny in the Shopify App Store
  2. Click “Add app” and follow the installation steps
  3. Activate the app as prompted

2. Create Your Knight Lab Content

  1. Go to Knight Lab’s website
  2. Choose the tool you want to use (TimelineJS, StoryMapJS, etc.)
  3. Create your content following Knight Lab’s instructions
  4. When finished, Knight Lab will provide you with a link to your creation
  1. Go to your Shopify admin panel
  2. Navigate to the page, product description, or blog post where you want to add the Knight Lab content
  3. Paste the Knight Lab link into your content
  4. Make the link italic by selecting it and using the italic button or pressing Ctrl+I (Cmd+I on Mac)

4. Publish Your Content

  1. Save your changes
  2. Preview your page to confirm the Knight Lab content appears properly
  3. Publish when you’re happy with how it looks

Tips for Using Knight Lab Content Effectively

  • Tell Your Brand Story: Use TimelineJS to showcase your company history or product development journey
  • Show Product Origins: Use StoryMapJS to illustrate where your products or materials come from
  • Display Product Transformations: Use JuxtaposeJS to show before/after results of your products
  • Add Context to Products: Place timelines near related products to provide historical or educational context

Real-World Examples

  • A fashion retailer using TimelineJS to display the evolution of a clothing line
  • A food seller using StoryMapJS to show the origins of ingredients
  • A skincare brand using JuxtaposeJS to demonstrate product effectiveness
  • A bookstore using TimelineJS to visualise literary periods alongside book collections

With EmbedAny, you can easily integrate these interactive Knight Lab elements without touching a line of code, helping you create a more engaging and informative shopping experience for your customers.