Tool · Product page
Dimension lines generator
Load the product’s photos, draw the measurement lines on them and copy the JSON into the product’s Dimension lines metafield. Photos are read on your computer only — nothing is uploaded, nothing is tracked.
This tool needs a larger screen.
Drawing lines on a photo needs a mouse or trackpad and a window at least 900 px wide. Open this page on a computer.
1 · Photos in the order of the product’s media
Drop product photos here
or
JPG, PNG or WebP. The first photo is image 1, the second image 2, and so on.
2 · Lines 0
No lines yet. Draw one on the photo or use “+ Add line”.
↑ ↓ move between lines, Delete removes the selected one.
Selected line
3 · JSON
Once per store: the metafield
- In the Shopify admin open Settings → Metafields and metaobjects → Products.
- Add definition: name Dimension lines, namespace and key
custom.dimension_lines, type JSON. Save. - In the theme editor, the product page’s Dimension lines metafield setting reads
custom.dimension_linesby default — change it there if you used another key.
For each product
- Open Products → the product → Metafields → Dimension lines.
- Paste the JSON from this tool and save.
- To change it later: copy the metafield’s JSON, use Import… here, load the photos again and edit.
How the values work
- Width / Height / Depth are not typed here: the theme reads them from the product’s size metafields (the ones chosen in Theme settings) and shows them in the store’s unit. A line whose size is empty is left out.
- Own text is shown as written, e.g. A5 card · 210 mm.
- All positions are percentages of the photo: start and end along the line, position across it (from the top for a horizontal line, from the left for a vertical one), extension = how far the end lines reach toward the object.
- Custom lines run at any angle:
x1/y1andx2/y2are the two ends (x of the width, y of the height). side(1or-1) is written only when you send the extension lines to the other side; without it they reach toward the middle of the photo.- image is the photo’s place in the product’s media: 1 = the first.
The format
[{ "image": 1, "value": "width", "prefix": "⌀",
"name": "Diameter", "direction": "horizontal",
"start": 30, "end": 70, "position": 31,
"extension": 8 }]
{ "image": 2, "value": "A5 card · 210 mm",
"direction": "custom", "x1": 20, "y1": 70,
"x2": 62, "y2": 48, "extension": 6, "side": -1 }
value is width, height, depth or your own text; prefix, name and side are optional.