skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

shopify-storefront-api

Query products and manage carts via the Shopify Storefront GraphQL API.

14|3|Updated Mar 22, 2026
Search Tags:#graphql#nextjs#headless#pagination#shopify#cart#storefront-api
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill shopify-storefront-api-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shopify-storefront-api
Source: https://github.com/tomtoto757/ecomm-ai-skills-hub/tree/main/skills/platform-integrations-infrastructure/finsilabs/platform-shopify/shopify-storefront-api
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill shopify-storefront-api-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a practical, implementation-focused guide to connect a custom frontend to Shopify's Storefront GraphQL API so teams can query products, manage carts, and redirect buyers to checkout without exposing sensitive Admin credentials.

Core Features & Use Cases

  • Storefront client setup: explains how to create Storefront Access Tokens and configure public (browser) and private (server) clients using the @shopify/storefront-api-client factory.
  • Product and collection queries: demonstrates cursor-based pagination, product and variant fields (including availability and pricing), and best practices for fragment reuse and caching.
  • Cart management and checkout: shows cart creation, adding lines, persisting cart IDs across sessions, handling userErrors from mutations, and redirecting to Shopify checkout reliably across browsers.
  • Use Cases: building Next.js or Hydrogen headless storefronts, embedding Shopify buy widgets, or powering mobile apps requiring localized prices and efficient product pagination.

Quick Start

Create a Storefront Access Token in Shopify Admin, set the appropriate NEXT_PUBLIC_ and server environment variables, and instantiate the storefront client with createStorefrontApiClient to start querying products and managing carts.

Frequently Asked Questions about shopify-storefront-api

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a headless Shopify storefront using Next.js?▼

To build a headless Shopify storefront with Next.js, use the Storefront GraphQL API to query products, manage carts, and initiate checkout flows by configuring public and private clients with the @shopify/storefront-api-client.

What's the best way to implement cursor-based pagination for Shopify collections?▼

Cursor-based pagination for Shopify collections is implemented using after-cursor queries via the Storefront GraphQL API, allowing efficient product fetching and fragment reuse for headless frontends.

How do I manage cart persistence and handle userErrors in Shopify Storefront API mutations?▼

Cart persistence and userErrors handling in the Shopify Storefront API involve creating carts, persisting cart IDs across sessions, adding lines, and explicitly checking userErrors returned by mutations to ensure reliable checkout redirects.

Do I need separate public and private clients for the Shopify Storefront API?▼

Yes, separating public and private client configurations for the Shopify Storefront API is required to securely use Storefront Access Tokens without exposing sensitive Admin credentials during browser and server operations.

Can I use the Shopify Storefront API to display localized pricing in a mobile app?▼

Yes, the Shopify Storefront API supports localized pricing and cursor-based product pagination, making it suitable for powering mobile app frontends that require efficient data fetching and localized cart management.

Why does my Shopify headless checkout redirect fail across different browsers?▼

Shopify headless checkout redirects fail when userErrors from cart mutations are not handled properly, requiring explicit error checking after adding lines to ensure reliable checkout redirection across browsers.

Related Skills

Explore More Software Engineering Skills→
traygerbigtraygerbig
1

Shopify Japan

Automate Shopify store management for the Japanese market via Admin and Storefront APIs.

Community
Advanced
Drock91Drock91

moonpay-commerce

Manage Solana Pay checkouts for Shopify stores from a command-line interface.

Community
Intermediate
kos3nzkos3nz

shopify-hydrogen

Provide Hydrogen storefront recipes and guidance for Node.js environments.

Community
Advanced
dragnoirdragnoir
45

headless-hydrogen

Create and deploy headless Shopify storefronts with Hydrogen and Oxygen.

Community
Advanced