Button

Button (type: button, display name “Button”). Can be used standalone or inside a Button list container.

Image: storefront button rendering (default + hover + click navigation)

Fields

Text

Label (label) — button text
Font size — responsive desktop / mobile
Font weight — Regular / Medium / Semibold / Bold / Extra bold / Black
Text case — Default / Uppercase / Lowercase

Link

URL type (url.type):
- Static (static) — direct URL (placeholder https://shop.com/...)
- Metafield (metafield) — pick a product metafield namespace; resolves per-product (“Pick a product metafield of type Single line text or URL.”)
- Per-product (products) — multi-product map; resolves by current page product ID
Target (target): Same tab / New tab

Style

Background — Fill type (solid / gradient / tricolor / pattern)
Text color
Border — color / opacity / width
Radius
Padding — responsive {mobile, desktop}

Icon (toggle)

Icon picker (Icons / Brand / Payment / Shapes / URL)
Icon position (left / right)
Icon-text gap
Icon size

Animation

Hover animation — multiple presets
Button animation (nudge) — sustained attention animation

Three button preset categories

i18n classifies built-in presets into three categories — merchants can one-click select in the wizard / editor:

Shop (`buttonPreset.cat.shop`)

Buy on Amazon / Buy on Aliexpress / Buy on Ebay / Buy on Etsy / Buy on Rakuten / Buy on Walmart / Buy on Yahoo! Shopping

Facebook / Instagram / TikTok / X / YouTube

Communication (`buttonPreset.cat.communication`)

Email / WhatsApp / Messenger / Telegram / LINE / WeChat / KakaoTalk

Each preset comes with the corresponding brand’s icon (color / mono variants) and default styling. After selecting a preset, the merchant can continue to edit text, link, etc.

Relationship to button-list

button can be used as a top-level component, or as a child of Button list (button_list) container, where multiple buttons share unified layout and styling.

Image: button editor (collapsed + fully expanded)