A Shopify app listing can be published in more than one language, and the images go with it. Which means the six images you drew in English have to be drawn again in every language the app is sold in - and the box the words sit in does not grow when the words do.

What actually breaks

Not the layout. The type.

German is the usual offender: the same sentence arrives longer, and a single compound noun can be wider than the space you left for three words. French and Spanish run long too. Dutch produces words that no line break will help. Japanese fits, but at a different optical size, and a font that looked confident in Latin can look thin beside it.

The failures are always the same three. A headline that wrapped to two lines wraps to three and collides with what is under it. A button label overflows its own pill. A supporting sentence pushes past the bottom edge of the image and is simply cut off - and unlike a web page, an image has no scrollbar to reveal what went missing.

Write the English so it can be translated

Most of the fix happens before anything is translated.

  • Leave room. A line that exactly fills its box in English has nowhere to go. Draw it at about three quarters of the width you have.
  • Prefer short verbs to noun phrases. "Tag every order" survives translation better than "automated order tagging workflows".
  • Avoid puns and idiom. They do not translate, and what comes back is a literal sentence twice the length.
  • Never split a sentence across two design elements. A translator who cannot see both halves will produce two halves that do not join.
  • Keep the interface labels and the headline consistent. If the app is translated too, the image has to use the app's translated words, not new ones.

Do not bake text you cannot re-measure

The practical rule for a set that will be localised: every word on the image has to exist as text in the source file, laid out by a layout engine, with a box it can be measured against.

A headline flattened into the picture is a headline that has to be redrawn by hand for each language, by somebody who reads that language, at the exact size. That is how a German set ends up with one image at a slightly smaller type size than the other five, which nobody notices until a merchant does.

How the fit is checked here

Every set drawn on this site is laid out as real text in a real browser at 1600 × 900, and every line is measured against the box it sits in before the file is exported. A line that overflows fails the check and the set does not go out.

That is worth describing plainly because it is the whole difference between a translated set and a set that was translated. The measurement is mechanical, it runs for every language, and it does not depend on anybody remembering to look at the German one.

What stays the same in every language

The order of the six images. The interface behind the words. The crop, the palette, the icon.

Only the words change, and that is the point of drawing a set as a layout rather than as six pictures: the second language costs the translation and the check, not another set.

One thing worth doing before you translate anything

Take the English set and put the longest plausible German sentence into each headline slot - even a rough machine translation will do - and look at what happens. Every place that breaks is a place that will break for real, and it is far cheaper to widen a box now than to re-open six files later.