PluginBench
Skill
Fail
Audit score 45

shopify-content

jezweb/claude-skills

How to install shopify-content

npx skills add https://github.com/jezweb/claude-skills --skill shopify-content
Claude Code
Cursor
Windsurf
Cline
Full instructions (SKILL.md)

Source of truth, from jezweb/claude-skills.


name: shopify-content description: "Create and manage Shopify pages, blog posts, navigation menus, redirects, and SEO metadata via the Admin API or browser automation. Use whenever the user wants to add a page to a Shopify store, write a Shopify blog post, update the storefront navigation, manage redirects, or tune SEO metadata on a Shopify site." compatibility: claude-code-only

Shopify Content

Create and manage Shopify store content — pages, blog posts, navigation menus, and SEO metadata. Produces live content in the store via the Admin API or browser automation.

Prerequisites

  • Admin API access token with read_content, write_content scopes (use shopify-setup skill)
  • For navigation: read_online_store_navigation, write_online_store_navigation scopes

Workflow

Step 1: Determine Content Type

Content TypeAPI SupportMethod
PagesFullGraphQL Admin API
Blog postsFullGraphQL Admin API
Navigation menusLimitedBrowser automation preferred
RedirectsFullREST Admin API
SEO metadataPer-resourceGraphQL on the resource
MetaobjectsFullGraphQL Admin API

Step 2a: Create Pages

curl -s https://{store}/admin/api/2025-01/graphql.json \
  -H "Content-Type: application/json" \
  -H "X-Shopify-Access-Token: {token}" \
  -d '{
    "query": "mutation pageCreate($page: PageCreateInput!) { pageCreate(page: $page) { page { id title handle } userErrors { field message } } }",
    "variables": {
      "page": {
        "title": "About Us",
        "handle": "about",
        "body": "<h2>Our Story</h2><p>Content here...</p>",
        "isPublished": true,
        "seo": {
          "title": "About Us | Store Name",
          "description": "Learn about our story and mission."
        }
      }
    }
  }'

Page body accepts HTML. Keep it semantic:

  • Use <h2> through <h6> for headings (the page title is <h1>)
  • Use <p>, <ul>, <ol> for body text
  • Use <a href="..."> for links
  • Avoid inline styles — the theme handles styling

Step 2b: Create Blog Posts

Shopify blogs have a two-level structure: Blog (container) > Article (post).

Find or create a blog:

{
  blogs(first: 10) {
    edges {
      node { id title handle }
    }
  }
}

Most stores have a default blog called "News". Create articles in it:

mutation {
  articleCreate(article: {
    blogId: "gid://shopify/Blog/123"
    title: "New Product Launch"
    handle: "new-product-launch"
    contentHtml: "<p>We're excited to announce...</p>"
    author: { name: "Store Team" }
    tags: ["news", "products"]
    isPublished: true
    publishDate: "2026-02-22T00:00:00Z"
    seo: {
      title: "New Product Launch | Store Name"
      description: "Announcing our latest product range."
    }
    image: {
      src: "https://example.com/blog-image.jpg"
      altText: "New product collection"
    }
  }) {
    article { id title handle }
    userErrors { field message }
  }
}

Step 2c: Update Navigation Menus

Navigation menus have limited API support. Use browser automation:

  1. Navigate to https://{store}.myshopify.com/admin/menus
  2. Select the menu to edit (typically "Main menu" or "Footer menu")
  3. Add, reorder, or remove menu items
  4. Save changes

Alternatively, use the GraphQL menuUpdate mutation if the API version supports it:

mutation menuUpdate($id: ID!, $items: [MenuItemInput!]!) {
  menuUpdate(id: $id, items: $items) {
    menu { id title }
    userErrors { field message }
  }
}

Step 2d: Create Redirects

URL redirects use the REST API:

curl -s https://{store}/admin/api/2025-01/redirects.json \
  -H "Content-Type: application/json" \
  -H "X-Shopify-Access-Token: {token}" \
  -d '{
    "redirect": {
      "path": "/old-page",
      "target": "/new-page"
    }
  }'

Step 2e: Update SEO Metadata

SEO fields are on each resource (product, page, article). Update via the resource's mutation:

mutation {
  pageUpdate(page: {
    id: "gid://shopify/Page/123"
    seo: {
      title: "Updated SEO Title"
      description: "Updated meta description under 160 chars."
    }
  }) {
    page { id title }
    userErrors { field message }
  }
}

Step 3: Verify

Query back the content to confirm:

{
  pages(first: 10, reverse: true) {
    edges {
      node { id title handle isPublished createdAt }
    }
  }
}

Provide the admin URL and the live URL for the user to review:

  • Admin: https://{store}.myshopify.com/admin/pages
  • Live: https://{store}.myshopify.com/pages/{handle}

Critical Patterns

Page vs Metaobject

For simple content (About, Contact, FAQ), use pages. For structured, repeatable content (team members, testimonials, locations), use metaobjects — they have typed fields and can be queried programmatically.

Blog SEO

Every blog post should have:

  • SEO title: under 60 characters, includes primary keyword
  • Meta description: under 160 characters, compelling summary
  • Handle: clean URL slug with keywords
  • Image with alt text: for social sharing and accessibility

Content Scheduling

Use publishDate on articles for scheduled publishing. Pages publish immediately when isPublished: true.

Bulk Content

For many pages (e.g. location pages, service pages), use a loop with rate limiting:

for page in pages_data:
    create_page(page)
    sleep(0.5)  # Respect rate limits

Reference Files

  • references/content-types.md — API endpoints, metaobject patterns, and browser-only operations

Related skills

More from jezweb/claude-skills and the wider catalog.

SH

shadcn-ui

jezweb/claude-skills

Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.

3.0k installsAudited
TA

tailwind-v4-shadcn

jezweb/claude-skills

|

2.7k installsAudited
TA

tailwind-theme-builder

jezweb/claude-skills

Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.

2.7k installs
TA

tanstack-query

jezweb/claude-skills

|

2.6k installsAudited
CO

color-palette

jezweb/claude-skills

Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.

2.4k installsAudited
FA

fastapi

jezweb/claude-skills

|

2.0k installsAudited