PRODUCT PAGE

Add to Cart

Adds the selected variant and quantity to a real Shopify cart through the runtime, with adding / added / sold-out states.

22 properties · plugin-free · Storefront API

LIVE PREVIEW

Properties · 22

Variant ID

String

Leave empty to read the Variants field or the product’s only variant.

Variants

String

Product ID

String

Quantity

Number

1

Follow stepper

Boolean

true

Use the count from an Shop Canvas Quantity bound to the same Product ID

Action

Enum

add

Stock Check

Boolean

true

Disable the button when the variant is sold out.

Follow Selector

Boolean

true

Use the variant chosen by a selector on the page.

Available

Slot

Select Variant

Slot

Shown until a variant is chosen. Filling it also blocks the add until then.

Out of Stock

Slot

Loading

Slot

Limit Reached

Slot

Needs real inventory — only shows when the token can read stock levels.

Labels

Object

Add to Cart

Font

Font

Text

Color

#FFFFFF

Background

Color

#030607

Text (Off)

Color

#8A8F94

Background (Off)

Color

#F5F5F5

Radius

BorderRadius

0px

Padding

Padding

18px 24px

On Added

EventHandler

◧ Shop Canvas

Framer × Shopify · Storefront API