AI Plugin Index
shopify-checkout-extensions
Skill by jeremylongshore · updated · ★ 2.9k
Builds Shopify Checkout UI Extensions that customize checkout with sandboxed React-like components. Aimed at Shopify developers replacing checkout.liquid or adding fields, banners and checkout state hooks. shopify-checkout-extensions is published by jeremylongshore on GitHub.
Install shopify-checkout-extensions
Built from the published package, never by AIgit clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace /tmp/tons-of-skills-marketplace && mkdir -p ~/.claude/skills && cp -r /tmp/tons-of-skills-marketplace/skills/.curated/shopify-checkout-extensions ~/.claude/skills/shopify-checkout-extensionsRun in your terminal. Claude Code loads skills from ~/.claude/skills automatically.
Step-by-step: install shopify-checkout-extensions in Claude Code
git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace /tmp/tons-of-skills-marketplace && mkdir -p ~/.gemini/antigravity-cli/skills && cp -r /tmp/tons-of-skills-marketplace/skills/.curated/shopify-checkout-extensions ~/.gemini/antigravity-cli/skills/shopify-checkout-extensionsAntigravity CLI loads skills from ~/.gemini/antigravity-cli/skills, or .agents/skills for one project.
Step-by-step: install shopify-checkout-extensions in Antigravity CLI
Skills can run scripts on your machine. Some need an API key: check the README.
Last commit in the past day
MIT: permissive, fine for commercial use
Clear description, installs from GitHub, 2,867 stars, original repository
Allowed to use Write, Edit without limits
About shopify-checkout-extensions
This skill helps an AI assistant build Checkout UI Extensions for Shopify. The source says these extensions replace checkout.liquid, which was deprecated in August 2025, and run as sandboxed, React-like components at specific checkout targets. The skill covers configuring an extension in a shopify.extension.toml file, building UI with Shopify's component library, and reading checkout data with hooks.
The guide also covers writing merchant-configurable settings, saving custom values such as delivery notes as metafields, and keeping bundles under the 64KB limit. It is intended for Shopify developers who work with the Shopify CLI and a Partners app. The source also includes error handling notes and links to reference files on targets, components and bundle optimization.
Written from the project's SKILL.md and checked against it.
What shopify-checkout-extensions can do
- Configure extension targetsSets up a checkout extension in TOML with a chosen target and capabilities.
- Build checkout bannersRenders info banners with Shopify's Banner and BlockStack components.
- Read merchant settingsUses useSettings to read values set in the extension editor.
- Add custom checkout fieldsRenders a TextField and saves its value as a metafield through useApplyMetafieldsChange.
- Read checkout dataUses hooks such as useTotalAmount and useShippingAddress to read checkout state.
- Reduce bundle sizeSuggests tree-shaking, avoiding heavy libraries and splitting extensions to stay under 64KB.
What you need
- Shopify CLI 3.x or later
- A Shopify Partners app
- Node.js 18 or later
- @shopify/ui-extensions-react package
- A development store with checkout extensibility enabled
Weekly newsletter
Like shopify-checkout-extensions? Get the best new skills every week
The best new tools, security warnings before you install something risky, and one practical tip. Free, three minute read.
Try asking
- Create a Shopify checkout banner that shows a free shipping message
- Add a delivery instructions field to Shopify checkout and save it as a metafield
- Help me migrate my checkout.liquid customizations to checkout UI extensions
Good to know
- Extensions run in a sandbox with no DOM access, fetch or window usage.
- Extension bundles have a strict 64KB limit.
- The source says checkout.liquid was deprecated in August 2025.
Security check
B- Allowed to use Write, Edit without limitsIn
SKILL.md
Checked automatically: skills/.curated/shopify-checkout-extensions/SKILL.md. This looks for known risky patterns and is not a full audit. How grades work
Inside the skill
Allowed tools: ReadWriteEditBash(npm:*)Grep
-
SKILL.md5 KB -
references/bundle-optimization.md3 KB -
references/extension-targets.md4 KB -
references/ui-components.md4 KB
Alternatives to shopify-checkout-extensions
All alternatives →
Fetches travel coupons from a third-party feed, including Didi ride-hailing bundles and hotel deals from Meituan, Tongcheng and Fliggy. It is for users who want claim links or QR codes they can redeem in WeChat or the official apps.
Connect Odoo with Shopify: sync products, inventory, orders, and customers using the Shopify API and Odoo's external API or connector modules.
When the user wants to track App Store chart rank changes, find top gainers and losers, detect breakout apps entering the top 100, or identify apps dropping out of charts. Also use when the user mentions "chart movers", "rank changes", "who's rising", "who's falling", "new chart entries", "top gainers", or "market shifts". For broader market overview, see market-pulse. For competitive keyword analysis, see competitor-analysis.
Etsy Search Listings fetches current Etsy search result rows for a keyword, market phrase, or category. It is for agents that need to see rank, price, badges, and shop ownership on page one.
为 Fantastic-admin 框架生成 Pinia Store 模块。当用户提到以下任何需求时必须使用此技能：多个页面需要共享数据、全局状态管理、数据需要持久化（刷新后还在）、登录状态/用户信息需要缓存、购物车/通知/权限等全局数据、需要在组件外访问状态。即使用户只是说"这个数据要全局共享"或"刷新后数据不能丢"，也应触发此技能。触发关键词：创建 store、全局状态、状态管理、pinia、持久化、共享数据。
Searches for domain names, checks availability, compares registrar prices and looks for promo codes. It helps users pick and buy a domain at the best price.
shopify-checkout-extensions: common questions
Why use Checkout UI Extensions instead of checkout.liquid?
The source says Checkout UI Extensions replace checkout.liquid, which was deprecated in August 2025. They use sandboxed components at checkout targets instead.
Can a checkout extension access the page DOM or make network calls?
No. The source says extensions run in isolation with no DOM access, and using fetch or window counts as a sandbox violation. Only Shopify components and hooks should be used.
What is the size limit for a checkout extension?
The source gives a strict 64KB bundle limit. It suggests tree-shaking dependencies and splitting into multiple extensions if the bundle approaches that limit.
How do I install shopify-checkout-extensions?
Run the command above to copy the skill into ~/.claude/skills/. Claude Code picks it up automatically.
Is shopify-checkout-extensions free?
The code is published under the MIT licence. The service it connects to may have its own pricing.
Is shopify-checkout-extensions safe to use?
It scores 82 of 100. Grades: maintenance A, licence A, quality A. Security check: grade B (allowed to use write, edit without limits). Review the code before you install. How grades work.
What are alternatives to shopify-checkout-extensions?
Similar skills: trip-coupon, odoo-shopify-integration, market-movers, etsy-search-listings.