Habilidade de Desenvolvimento Shopify

Use esta habilidade quando o usuário perguntar sobre:

• Criação de apps ou extensões Shopify
• Personalização de interfaces de checkout/admin/POS
• Desenvolvimento de temas com o template Liquid
• Integração com as APIs GraphQL ou REST da Shopify
• Implementação de webhooks ou faturamento
• Trabalho com metafields ou Shopify Functions

ROTEAMENTO: O que Construir

SE o usuário quiser integrar serviços externos OU construir ferramentas para lojistas OU cobrar por funcionalidades: → Construa um App (veja references/app-development.md)

SE o usuário quiser personalizar o checkout OU adicionar interface de admin OU criar ações de POS OU implementar regras de desconto: → Construa uma Extensão (veja references/extensions.md)

SE o usuário quiser personalizar o design da loja virtual OU modificar páginas de produto/coleção: → Construa um Tema (veja references/themes.md)

SE o usuário precisar de lógica de backend E interface de loja virtual: → Construa uma combinação de App + Extensão de Tema

Comandos da Shopify CLI

Instalar CLI:

npm install -g @shopify/cli@latest

Criar e rodar app:

shopify app init          # Create new app
shopify app dev           # Start dev server with tunnel
shopify app deploy        # Build and upload to Shopify

Gerar extensão:

shopify app generate extension --type checkout_ui_extension
shopify app generate extension --type admin_action
shopify app generate extension --type admin_block
shopify app generate extension --type pos_ui_extension
shopify app generate extension --type function

Desenvolvimento de tema:

shopify theme init        # Create new theme
shopify theme dev         # Start local preview at localhost:9292
shopify theme pull --live # Pull live theme
shopify theme push --development  # Push to dev theme

Escopos de Acesso

Configure em shopify.app.toml:

[access_scopes]
scopes = "read_products,write_products,read_orders,write_orders,read_customers"

Escopos comuns:

• read_products, write_products - Acesso ao catálogo de produtos
• read_orders, write_orders - Gerenciamento de pedidos
• read_customers, write_customers - Dados do cliente
• read_inventory, write_inventory - Níveis de estoque
• read_fulfillments, write_fulfillments - Cumprimento de pedidos

Padrões GraphQL (Validado contra a API 2026-01)

Consultar Produtos

query GetProducts($first: Int!, $query: String) {
  products(first: $first, query: $query) {
    edges {
      node {
        id
        title
        handle
        status
        variants(first: 5) {
          edges {
            node {
              id
              price
              inventoryQuantity
            }
          }
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

Consultar Pedidos

query GetOrders($first: Int!) {
  orders(first: $first) {
    edges {
      node {
        id
        name
        createdAt
        displayFinancialStatus
        totalPriceSet {
          shopMoney {
            amount
            currencyCode
          }
        }
      }
    }
  }
}

Definir Metafields

mutation SetMetafields($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      id
      namespace
      key
      value
    }
    userErrors {
      field
      message
    }
  }
}

Exemplo de variáveis:

{
  "metafields": [
    {
      "ownerId": "gid://shopify/Product/123",
      "namespace": "custom",
      "key": "care_instructions",
      "value": "Handle with care",
      "type": "single_line_text_field"
    }
  ]
}

Exemplo de Extensão de Checkout

import {
  reactExtension,
  BlockStack,
  TextField,
  Checkbox,
  useApplyAttributeChange,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.block.render", () => (
  <GiftMessage />
));

function GiftMessage() {
  const [isGift, setIsGift] = useState(false);
  const [message, setMessage] = useState("");
  const applyAttributeChange = useApplyAttributeChange();

  useEffect(() => {
    if (isGift && message) {
      applyAttributeChange({
        type: "updateAttribute",
        key: "gift_message",
        value: message,
      });
    }
  }, [isGift, message]);

  return (
    <BlockStack spacing="loose">
      <Checkbox checked={isGift} onChange={setIsGift}>
        Isso é um presente
      </Checkbox>
      {isGift && (
        <TextField
          label="Mensagem de Presente"
          value={message}
          onChange={setMessage}

…