---
title: "Images as Code: Representing Localized and Evolving Products on Marketing Pages"
description: "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."
---

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

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Oct 7, 2020

**Type:** Problem & solution

## 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.

## Context

Product visuals on shopify.com had become outdated, while maintaining screenshots or separate translated image assets across more than 35 localized domains was inefficient. Domains could differ in currencies, features, and languages, and the SVG-based alternative introduced broken long translations, export-process complexity, and performance issues.

## Approach / What changed

The team replaced exported SVG visuals with HTML and JavaScript, using the ScaleContentAsImage utility. It places fixed-width visual content in a wrapper, calculates the available width, applies a proportional CSS transform, preserves page layout with spacer and absolute-positioning logic, and recalculates sizing when the window changes.

## Takeaways

- SVG does not support word wrapping, so longer translations such as German text could overflow; Gaussian blur effects also caused performance issues in Firefox.
- 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.
- 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.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [JavaScript](https://yomu.fyi/topic/javascript), [Performance](https://yomu.fyi/topic/performance)

- Source: [Shopify](https://shopify.engineering/images-code-representing-localized-evolving-products-marketing-pages)
- Source URL: https://shopify.engineering/images-code-representing-localized-evolving-products-marketing-pages
- Ingested by Yomu: 2026-08-31T01:11:32.102Z

[Read original post](https://shopify.engineering/images-code-representing-localized-evolving-products-marketing-pages)