◧ Shop Canvas
PRODUCT PAGE
Size Guide
A size-chart modal triggered from the product page.
20 properties · plugin-free · Storefront API
Live in the Product page →
Properties · 20
Table
String
First line is the headers. Then one line per size, cells split by | and each cell written cm/inch.
Title
String
Size guide
Note
String
Say whether these are garment or body measurements — a chart that does not is a chart a shopper cannot use.
Units
Enum
Toggle
Toggle shows one unit with a CM / IN switch — the readable choice on a phone.
Size Option
String
Size
The Shopify option that names the size, used to highlight the shopper’s row.
Product ID
String
Bind this and the selected size is highlighted as the shopper changes it.
Highlight
String
Force a highlighted row. Overrides the live selection; leave empty in normal use.
Stack Below
Number
460
Container width at which the table becomes one block per size. 0 keeps the table always.
Font
Font
Head Font
Font
Text
Color
#030607
Muted
Color
rgba(3, 6, 7, 0.55)
Head Text
Color
#FFFFFF
Head Fill
Color
#3F2E24
Rule
Color
rgba(3, 6, 7, 0.12)
Row (On)
Color
rgba(63, 46, 36, 0.08)
Toggle Fill
Color
rgba(3, 6, 7, 0.06)
Toggle Fill (On)
Color
#FFFFFF
Toggle Text (On)
Color
#030607
Radius
BorderRadius
2px
◧ Shop Canvas
Framer × Shopify · Storefront API