Skip to main content
How-To Guide

How to Add Inline SVG Diagrams to a Shopify Store (No Designer Required)

By · Updated · 10 min read
What you'll have at the end

A working inline SVG diagram on a Shopify page (product, blog post, or category) with complete ImageObject schema, full accessibility attributes, and brand styling that matches your theme. Total time: 30 minutes for the first one, 5-10 minutes for each additional diagram.

This guide assumes you have access to your Shopify theme code (Customize → Actions → Edit code, or via the Shopify CLI). If you can't edit the theme directly, you can still use the "Custom Liquid" section in the visual editor to inject SVG on individual pages, but theme-level integration is cleaner for diagrams used across many pages.

Step 1: Decide where the diagram lives

Two patterns, pick one:

  1. Inline directly in a template — for one-off diagrams specific to a single article or product. Edit templates/article.liquid for blog posts, sections/main-product.liquid for product pages, or whatever template owns the page.
  2. Liquid snippet — for diagrams reused across many pages (a brand-positioning diagram on every product, a category-tree visual in the global nav). Create snippets/diagram-NAME.liquid and include it via {% render 'diagram-NAME' %}.
Where inline SVG lives in a Shopify theme Diagram showing two paths: inline SVG can go directly in a Liquid template file (for one-off use) or into a snippet file (for reuse across many pages). Path A: Inline article.liquid product.liquid main-page.liquid one-off diagrams Path B: Snippet snippets/diagram-X.liquid {% render 'diagram-X' %} in any template reused diagrams
Two implementation paths — inline for one-off, snippet for reuse.

Step 2: Write the SVG

Start with a basic template. Here's a minimal example — a 2-bar comparison chart you can adapt:

<figure>
  <svg viewBox="0 0 400 200" role="img"
       aria-labelledby="my-diagram-title my-diagram-desc"
       width="100%" height="auto">
    <title id="my-diagram-title">Conversion rate comparison</title>
    <desc id="my-diagram-desc">
      Bar chart comparing conversion rates before and after
      adding inline diagrams to product pages.
    </desc>
    <line x1="30" y1="170" x2="380" y2="170"
          stroke="#6B7F94" stroke-width="1"/>
    <rect x="80" y="100" width="100" height="70"
          fill="#FF5733" rx="2"/>
    <rect x="220" y="50" width="100" height="120"
          fill="#00FFB3" rx="2"/>
    <text x="130" y="190" text-anchor="middle"
          fill="#B8C9D9" font-size="12">Before</text>
    <text x="270" y="190" text-anchor="middle"
          fill="#B8C9D9" font-size="12">After</text>
    <text x="130" y="95" text-anchor="middle"
          fill="#F5EFE6" font-size="13" font-weight="bold">1.8%</text>
    <text x="270" y="45" text-anchor="middle"
          fill="#F5EFE6" font-size="13" font-weight="bold">3.4%</text>
  </svg>
  <figcaption>
    Conversion rate uplift after adding inline diagrams.
  </figcaption>
</figure>

The pattern: viewBox for scaling, role="img" + aria-labelledby for accessibility, <title> and <desc> elements as first children of the SVG, brand-palette colors only (cyan, mint, coral, purple, white, body, muted), text at 11-14px.

Step 3: Add to your Liquid template

If you went with Path A (inline): open the relevant template in Shopify's code editor and paste the SVG block. For a blog post diagram, you'd put it in templates/article.liquid just below the title:

<article class="article">
  <h1 class="article__title">{{ article.title }}</h1>

  <!-- Inline SVG diagram goes here -->
  <figure>
    <svg ...>...</svg>
    <figcaption>...</figcaption>
  </figure>

  <div class="article__content rte">
    {{ article.content }}
  </div>
</article>

If you went with Path B (snippet): create a new file at snippets/diagram-conversion-rates.liquid containing just the <figure> block. Then include it in any template:

<!-- In any .liquid template -->
{% render 'diagram-conversion-rates' %}

Snippets accept parameters too, so you can make a single diagram template that varies by passed-in data — useful for category-specific or product-specific variants:

{% render 'diagram-product-comparison',
          left_value: product.metafields.custom.before_score,
          right_value: product.metafields.custom.after_score %}

Step 4: Add ImageObject schema

Every substantive inline diagram should be paired with an ImageObject schema in the page <head>. This declares to AI crawlers that the diagram exists as a citable asset. Most Shopify themes have a snippets/structured-data.liquid (or similarly named) snippet where SEO schemas are added.

Add a conditional block that outputs ImageObject schema when the relevant page is being rendered:

{% if template contains 'article' and article.handle == 'my-article' %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "name": "Conversion rate comparison",
  "description": "Bar chart comparing conversion rates before and after adding inline diagrams to product pages.",
  "contentUrl": "{{ canonical_url }}#diagram-conversion-rates"
}
</script>
{% endif %}

The contentUrl field should point at a unique anchor on the page where the diagram lives. Add the matching id attribute to the <figure> element:

<figure id="diagram-conversion-rates">
  <svg ...>...</svg>
  <figcaption>...</figcaption>
</figure>

Step 5: Test and validate

Five-step validation sequence Five sequential test steps: theme editor preview, mobile viewport test, screen reader test, Rich Results validator, live spot-check after deploy. Preview Theme editor → Mobile 320px viewport → A11y Screen reader → Schema Rich Results Pre-ship validation sequence
Four checks before merging — preview, mobile, accessibility, schema validation.
  1. Theme editor preview: open the page in the Shopify theme editor and confirm the diagram renders correctly alongside the rest of the page.
  2. Mobile viewport: resize to 320px width (Chrome DevTools' device toolbar). Confirm the diagram scales down, labels remain readable, no horizontal scroll.
  3. Accessibility: use VoiceOver (Mac) or NVDA (Windows) to read the page. Confirm the screen reader announces the diagram title and description.
  4. Schema validation: paste the page URL into Google's Rich Results Test and verify the ImageObject schema is detected without errors.
  5. Live spot-check: after deploying, view the live page and verify everything still renders. If you used a snippet, view multiple pages that use that snippet to confirm consistency.

What can go wrong

Three common issues and their fixes:

The SVG renders but the theme editor warns about it. Shopify's editor sometimes flags inline SVG as "potentially unsafe HTML." This is a false positive — inline SVG is completely safe (it's standard HTML5). The warning doesn't block the diagram from rendering on the live site.

Labels overlap on mobile. You probably have labels that are too long for the viewport at 320px width. Pre-format multi-line labels by hand (don't rely on text-splitting at runtime). Or shorten the label text.

Screen reader doesn't announce the diagram. Check that role="img" is on the <svg> element, aria-labelledby points at the correct IDs, and <title> and <desc> elements exist as direct children of the SVG (not nested deeper).

From one diagram to a system

After your first diagram, the pattern is: snippet per diagram, ImageObject schema per snippet, conditional rendering in the SEO snippet. Once you've built three or four, you'll have established a template that any future content can reuse in minutes rather than the initial 30.

For the full 12 diagram types that work well in ecommerce content, see the 12 inline diagram types every ecommerce SEO page should use. For the citation-strategic reason this matters, see why visual diagrams make content citable by AI search. For the deeper pillar on inline diagrams as a concept, see inline diagrams in the glossary.

Frequently asked questions

Will adding inline SVG slow down my Shopify store?

Typically the opposite. Inline SVGs under 10KB are smaller than an HTTP request for an external image file, render synchronously with the page (no layout shift), and don't trigger any additional network round-trips. For diagrams over 50KB, consider external — but most useful diagrams are well under that.

Do I need to know how to code to add inline SVG?

Basic HTML familiarity helps but isn't strictly required. The patterns in this guide are copy-paste-and-adapt. The hardest part is editing the Liquid template, which is just adding the SVG block at the right place in the file. Shopify's code editor has syntax highlighting that makes it forgiving.

Can I use a Shopify app instead of editing the theme?

Some apps offer diagram insertion, but most do it via JavaScript injection at runtime — which means the diagram isn't in the initial HTML that crawlers see. For SEO and AI citation purposes, theme-level inline SVG is significantly better than app-injected. The extra 30 minutes of setup pays back forever in better crawlability.

How do I add diagrams to product descriptions specifically?

You have two paths. (1) In Shopify admin → Products → edit the product → use the "Show HTML" toggle in the description editor to paste SVG directly. (2) Edit sections/main-product.liquid to inject the SVG at a specific location relative to the product description. Option 2 is more maintainable; option 1 is faster for one-off cases.

What if my Shopify theme is a third-party theme I can't customize?

Most modern Shopify themes support the "Custom Liquid" section, which lets you inject Liquid (including inline SVG) into any page through the visual editor without modifying the theme code. Add a Custom Liquid section to the relevant template, paste your SVG block, and it renders. Less flexible than direct theme editing, but works without code access.

Does inline SVG work in Shopify Markets (multi-currency, multi-language)?

Yes — inline SVG is content, not translation-managed text by default. If you want the SVG labels to translate, you'd need to use Shopify's translation system to populate the text elements. For most ecommerce diagrams (charts, comparisons, processes), the labels are short enough that hand-translating per Market is cheaper than building a translation system.

MG

Matt Goren

Founder, RunOctopus

Built All Angles Creatures from invisible to page-1 in reptile feeder insects in under 60 days, using exactly the inline-diagram + schema patterns RunOctopus runs at scale.

Connect on LinkedIn →

Don't want to edit theme code yourself?

Otto installs diagrams, schema, and the whole content engine on your Shopify store automatically. Five-minute preview.

Generate Preview →