Images as Code: Representing Localized and Evolving Products on Marketing Pages

Summary

Shopify needed product visuals on more than 35 localized domains to stay accurate as features, currencies, languages, and product UI changed. An SVG experiment made translated text difficult to manage because SVG lacks word wrapping, while export settings, effects such as Gaussian blur, and repeated translation hooks created maintenance and performance problems. The replacement represented interfaces in HTML and JavaScript through ScaleContentAsImage, which wraps fixed-width content, computes available space, applies a CSS transform scale, preserves layout with a spacer, absolutely positions the transformed element, and updates calculations on resize. The team concluded HTML/JavaScript was more maintainable and flexible for design, documentation, animations, and localization, while noting remaining work around lazy-loaded images, reusable-visual documentation, and future CSS Houdini possibilities.

Takeaways

1. 1

   SVG does not support word wrapping, so longer translations such as German text could overflow; Gaussian blur effects also caused performance issues in Firefox.

2. 2

   ScaleContentAsImage preserves the visual’s designed proportions by scaling a fixed-width wrapper and compensating for CSS transforms that otherwise do not change document flow.

3. 3

   The HTML/JavaScript approach removed SVG export documentation and design restrictions, while leaving performance and structural work around lazy-loaded images and documenting reusable visuals.