How to Embed Chromatic on Your Shopify Store Using EmbedAny

Are you looking to showcase your Chromatic projects directly on your Shopify store? Whether you want to display design systems, UI components, or interactive storybooks, embedding Chromatic content can greatly enhance your store’s visual appeal and functionality. This guide will show you exactly how to embed Chromatic on Shopify using EmbedAny.

What is Chromatic?

Chromatic is a visual testing platform that helps developers and designers test UI components and prevent visual regressions. It’s especially popular with teams using Storybook to document their design systems. Embedding Chromatic projects on your Shopify store can be useful for:

• Showcasing your product’s design system
• Displaying interactive UI components
• Sharing visual documentation with customers
• Presenting your development process transparently

Step-by-Step Guide to Embedding Chromatic

Step 1: Install the EmbedAny App

Before you can start embedding Chromatic, you need to install the EmbedAny app:

1. Go to EmbedAny on the Shopify App Store
2. Click “Add app” to install it to your store
3. Follow the on-screen instructions to activate the app

Step 2: Copy Your Chromatic Link

1. Go to your Chromatic project
2. Navigate to the specific component or page you want to embed
3. Copy the URL from your browser’s address bar

Step 3: Embed Chromatic on Your Store

1. Go to the page or product where you want to add your Chromatic content
2. In the text editor, paste your Chromatic link
3. Important: Italicise the link by selecting it and clicking the italic button (or using keyboard shortcut)
4. Save your changes

That’s it! EmbedAny will automatically transform your italicised Chromatic link into an interactive embed.

Where to Use Chromatic Embeds

Chromatic embeds can enhance various sections of your Shopify store:

• Product descriptions: Show interactive components or design elements related to your products
• About page: Display your design system to demonstrate your brand’s quality
• Blog posts: Include interactive UI examples when discussing product features
• Custom pages: Create dedicated pages for technical documentation with working examples

Tips for Effective Chromatic Embeds

• Choose specific components rather than embedding entire projects
• Set appropriate heights and widths for your Chromatic embeds
• Ensure the embedded content adds genuine value to your customers
• Add context around the embed to explain what customers are seeing

Troubleshooting

If your Chromatic embed isn’t appearing:

1. Verify that EmbedAny is properly activated on your store
2. Check that you’ve correctly italicised the link
3. Ensure your Chromatic project is public or accessible
4. Try refreshing the page after saving

With these simple steps, you can seamlessly integrate Chromatic projects into your Shopify store, creating a more interactive and engaging experience for your customers.