How To Get Shopify to Serve a BIMI Image Correctly

To create a valid BIMI image, you need to start with a vector based SVG (if you only have a normal image, Vector Magic is probably the best for converting but costs $10 for a month, or you can use Inkscape for free).

Open it in Adobe Illustrator (you can set up a free trial) and save it as a SVG, and select the Tiny 1.2 profile when it shows up.

Use this new image and convert it to Tiny-PS using an online converter (this one is my favourite).

The Tricky Bit

However you can't just upload this image on Shopify and then point your DNS at it, as Shopify (presumably because it doesn't support Tiny-PS and tries to format it as a normal SVG) either strips out the baseProfile="tiny-ps" attribute or changes it to data-sanitized-baseprofile="tiny-ps" both of which will make your BIMI image non-compliant. This is very frustrating!

The solution is to go into one of your themes (can be a draft one) in Shopify and upload your Tiny-PS svg to the brand section (you can find this by going Theme Settings>Brand Information>Upload Image). Then go into Files and replace the image you just uploaded with your Tiny-PS svg again (replace the image by clicking on it, then clicking the three dots and selecting replace).

For whatever reason this works and stops Shopify changing the baseProfile attribute. You can double check it has worked by downloading the image from Shopify, opening it with a text editor and checking baseProfile="tiny-ps" is there correctly.

You can then create a link to this image of [yourdomain]/cdn/shop/files/[image name].svg (so for this site the link is https://fatwheelscoot.com/cdn/shop/files/fatwheelscoot_bimi_logo.svg) and add it to your BIMI DNS records.

You can check this has worked successfully by using the BIMI checker here.

Let me know in the comments if you have any questions!