Agent skill

shopify-content

Create and manage Shopify pages, blog posts, navigation, and SEO metadata. Workflow: determine content type, generate content, create via API or browser, verify. Use when creating pages, writing blog posts, updating navigation menus, managing redirects, or updating SEO metadata on a Shopify store.

Stars 670
Forks 52

Install this agent skill to your Project

npx add-skill https://github.com/jezweb/claude-skills/tree/main/plugins/shopify/skills/shopify-content

SKILL.md

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 Type API Support Method
Pages Full GraphQL Admin API
Blog posts Full GraphQL Admin API
Navigation menus Limited Browser automation preferred
Redirects Full REST Admin API
SEO metadata Per-resource GraphQL on the resource
Metaobjects Full GraphQL Admin API

Step 2a: Create Pages

bash
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:

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

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

graphql
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:

graphql
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:

bash
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:

graphql
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:

graphql
{
  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:

bash
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

Expand your agent's capabilities with these related and highly-rated skills.

jezweb/claude-skills

shadcn-ui

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.

670 52
Explore
jezweb/claude-skills

walkthrough-video

Generate professional walkthrough videos from app screenshots or live sites using Remotion. Smooth transitions, zoom effects, text overlays, and optional voiceover narration. Produces MP4 videos for demos, product showcases, or documentation. Triggers: 'walkthrough video', 'demo video', 'product video', 'create a video walkthrough', 'remotion video', 'screen recording', 'app demo', 'showcase video', 'generate video from screenshots'.

670 52
Explore
jezweb/claude-skills

product-showcase

Generate a comprehensive marketing website for a web app — multi-page with real screenshots, animated GIF walkthroughs, feature deep-dives, and workflow demonstrations. Browses the running app, captures screens and sequences, and produces a deployable site that actually teaches people what the product does. Especially useful for complex or agentic apps that are hard to explain. Triggers: 'showcase site', 'product page', 'show off the app', 'marketing site', 'demo site', 'product showcase', 'explain the app', 'how do I market this'.

670 52
Explore
jezweb/claude-skills

design-system

Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.

670 52
Explore
jezweb/claude-skills

react-patterns

React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React components. Triggers: 'react patterns', 'react review', 'react performance', 'optimise components', 'react best practices', 'composition patterns', 'why is it slow', 'reduce re-renders', 'fix waterfall'.

670 52
Explore
jezweb/claude-skills

react-native

React Native and Expo patterns for building performant mobile apps. Covers list performance, animations with Reanimated, navigation, UI patterns, state management, platform-specific code, and Expo workflows. Use when building or reviewing React Native code. Triggers: 'react native', 'expo', 'mobile app', 'react native performance', 'flatlist', 'reanimated', 'expo router', 'mobile development', 'ios app', 'android app'.

670 52
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results