PRODUCT PAGE

Product Variants

Option pills (size, color, …) that update the price, availability and the add-to-cart target.

24 properties · plugin-free · Storefront API

Live in the Product page →

Properties · 24

Role

Enum

Selector

Product ID

String

Variants

String

Text

String

Select {{variant}}

{{variant}}, {{value}}

Show Value

Boolean

false

Transform

Enum

None

Sold Out

Enum

Dim

Gap

Number

8

Font

Font

Text

Color

#030607

Background

Color

rgba(0,0,0,0)

Text (On)

Color

#030607

Background (On)

Color

rgba(0,0,0,0)

Border

Color

#E5E5E5

Border (On)

Color

#030607

Radius

BorderRadius

0px

Padding

Padding

8px 14px

Swatch Option

String

Color

Which option draws as colour circles. Leave empty for text on every option.

Swatches

String

One per line: name, then #hex. Add a second #hex and duo / stripes / dots / stars / print for a two-tone or a motif. Any value not listed here keeps its text pill.

Swatch Size

Number

28

Ring

Number

1

Ring Color

Color

#030607

Guide Option

String

Size

Which option row the Guide slot sits beside.

Guide

Slot

A size-guide link or modal trigger, rendered on the right of that option’s label.

◧ Shop Canvas

Framer × Shopify · Storefront API