Product images placed in the introduction and applications sections of an Academy article render correctly at a sensible size on Shopify thanks to inline max-width/height:auto styles applied by the inlineFormat renderer.
Task 794 verification article. This section contains a clickable product image to confirm inline sizing styles are applied correctly in the introduction section.
The image above should render at max-width:100% with height:auto on the live Shopify article.
This article verifies that product image links render correctly at a sensible size in non-mainContent sections such as the introduction and applications blocks.
Product image links in those sections are processed by the same mdToHtml → inlineFormat pipeline that was verified for mainContent in Task 791. The inlineFormat function applies style="max-width:100%;height:auto;display:block;" to every <img> element it emits, regardless of which section the markdown appears in.
This is important because Shopify themes vary widely: some apply responsive CSS globally, others do not. The inline style acts as a safe, theme-agnostic override that prevents oversized images from overflowing their containers on any active theme.
Applications
Real-world Applications
This section also contains a product image to verify the applications section behaves identically.
Signage products are widely used in retail, corporate, and outdoor environments.
