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

Ilana Beer

A deep dive into a JavaScript-based module to scale HTML content like an image would inside of its container and a look at why it was developed.

Shopify

•

Ilana Beer

•13 min read•advanced•

--

•View Original

HTMLJavaScriptReact

Overview

The article discusses the challenges and solutions involved in representing localized and evolving product visuals on marketing pages, specifically focusing on the transition from an SVG-based approach to an HTML/JavaScript solution. It highlights the design challenges, the inefficiencies of the SVG method, and the advantages of using a scalable content approach for better user experience across multiple localized domains.

What You'll Learn

1

How to implement a scalable content solution using HTML and JavaScript

2

Why the HTML/JavaScript approach is preferred over SVG for dynamic visuals

3

How to handle localization and currency representation in product visuals

Key Questions Answered

What are the main drawbacks of using SVG for product visuals?

SVGs do not support word wrapping, which can lead to broken visuals when translations are longer than expected. Additionally, performance issues can arise with certain effects in browsers like Firefox, making SVGs less manageable for dynamic content.

How does the HTML/JavaScript approach improve visual representation on marketing pages?

The HTML/JavaScript approach allows for better scalability and responsiveness of visuals. It enables content to resize proportionally within a container, maintains text wrapping, and simplifies the implementation process, making it easier for developers to manage and update visuals.

What challenges did Shopify face with localized product visuals?

Shopify faced inefficiencies in updating screenshots across over 35 localized domains, each requiring different translations and currency representations. This made maintaining consistency and relevance of product visuals a significant challenge.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend

Javascript

Used to create a utility for resizing content dynamically.

Frontend

HTML

Serves as the foundation for the new scalable content approach.

Key Actionable Insights

1
Adopt the HTML/JavaScript approach for creating scalable product visuals to enhance user experience across different domains.
This method allows for dynamic resizing and better management of localized content, which is crucial for maintaining an effective marketing presence.

2
Implement a systematic process for handling translations and currency conversions in product visuals.
By establishing a clear method for managing localization, teams can ensure that product representations remain accurate and relevant across various markets.

3
Utilize CSS transforms carefully to avoid layout issues when resizing elements.
Understanding how CSS transforms affect document flow can help prevent common pitfalls in layout design, ensuring a more polished and professional appearance.

Common Pitfalls

1

Relying on SVGs can lead to broken visuals due to lack of word wrapping and performance issues.

This happens because SVG text does not adapt well to varying lengths of translated content, causing overflow and layout problems. Developers should consider using HTML for better text handling.

Related Concepts

Localization Strategies

Dynamic Content Management

Responsive Design Principles