How to Embed Structurizr Diagrams on Your Shopify Store | Complete Guide

Are you looking to display your Structurizr diagrams and software architecture models on your Shopify store? Whether you want to showcase system designs, C4 models, or architecture diagrams for technical products, this guide will walk you through the simple process using EmbedAny.

What is Structurizr?

Structurizr is a powerful tool for creating and sharing software architecture diagrams and documentation. It allows developers and architects to create professional system visualisations using code or the web interface.

Why Embed Structurizr on Your Shopify Store?

• Showcase technical product details with interactive diagrams
• Provide comprehensive documentation for technical products
• Improve customer understanding of complex systems
• Add visual elements to technical blogs or product pages

Step-by-Step Guide to Embedding Structurizr

Step 1: Install the EmbedAny App

Before you can embed Structurizr diagrams, you’ll need to install the EmbedAny app on your Shopify store:

1. Go to EmbedAny on the Shopify App Store
2. Click “Add app” and follow the installation instructions
3. Activate the app on your store when prompted

Step 2: Find Your Structurizr Content

1. Navigate to your Structurizr workspace or diagram
2. Copy the public share link to your Structurizr content
   • Make sure your Structurizr workspace or diagram is set to public if you want customers to see it

Step 3: Embed Your Structurizr Diagram

1. Go to the page or product description where you want to add your Structurizr diagram
2. Paste the Structurizr link into your content
3. Important: Make the link italic by selecting it and clicking the italic button (or using keyboard shortcuts)
4. Save your changes

That’s it! EmbedAny will automatically transform your italic Structurizr link into an interactive embedded diagram that visitors can explore directly on your page.

Example

If you have a Structurizr diagram at https://structurizr.com/share/12345/diagrams#context, simply paste this link and make it italic. When published, instead of just a link, your customers will see the full interactive Structurizr diagram embedded directly on your page.

Tips for Using Structurizr Embeds Effectively

• Use Structurizr embeds on technical product pages to explain architecture or features
• Add them to technical blog posts to illustrate concepts
• Consider embedding Structurizr documentation alongside diagrams for comprehensive information
• Position embeds where they naturally complement your written content

Troubleshooting

Can’t see your embedded Structurizr diagram? Check that:

• You’ve installed and activated EmbedAny
• Your Structurizr link is set to italic
• The Structurizr content is publicly accessible
• You’ve saved and published your changes

With EmbedAny, adding Structurizr diagrams to your Shopify store is straightforward and requires no technical skills. Enhance your product pages with interactive architecture diagrams today!