Shopify Development

Habilidade de Desenvolvimento Shopify

Use essa habilidade quando o usuário perguntar sobre:

• Construir apps ou extensões Shopify
• Criar customizações de UI checkout/admin/POS
• Desenvolver temas com templating Liquid
• Integrar com GraphQL ou APIs REST Shopify
• Implementar webhooks ou cobrança
• Trabalhar com metafields ou Shopify Functions

ROTEAMENTO: O que Construir

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

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

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

SE o usuário precisa de lógica backend E UI da vitrine: → Construa combinação App + Theme Extension

Comandos Shopify CLI

Instalar CLI:

npm install -g @shopify/cli@latest

Criar e executar app:

shopify app init          # Criar novo app
shopify app dev           # Iniciar servidor dev com tunnel
shopify app deploy        # Build e upload para 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        # Criar novo tema
shopify theme dev         # Iniciar preview local em localhost:9292
shopify theme pull --live # Puxar tema em produção
shopify theme push --development  # Fazer push para tema de desenvolvimento

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 de clientes
• read_inventory, write_inventory - Níveis de estoque
• read_fulfillments, write_fulfillments - Fulfillment de pedidos

Padrões GraphQL (Validados contra 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": "Manipule com cuidado",
      "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}
        Este é um presente
      </Checkbox>
      {isGift && (
        <TextField
          label="Mensagem de Presente"
          value={message}
         
          multiline={3}
        />
      )}
    </BlockStack>
  );
}

Exemplo de Template Liquid

{% comment %} Snippet de Cartão de Produto {% endcomment %}
<div class="product-card">
  <a href="{{ product.url }}">
    {% if product.featured_image %}
      <img
        src="{{ product.featured_image | img_url: 'medium' }}"
        alt="{{ product.title | escape }}"
        loading="lazy"
      >
    {% endif %}
    <h3>{{ product.title }}</h3>
    <p class="price">{{ product.price | money }}</p>
    {% if product.compare_at_price > product.price %}
      <p class="sale-badge">Promoção</p>
    {% endif %}
  </a>
</div>

Configuração de Webhook

Em shopify.app.toml:

[webhooks]
api_version = "2026-01"

[[webhooks.subscriptions]]
topics = ["orders/create", "orders/updated"]
uri = "/webhooks/orders"

[[webhooks.subscriptions]]
topics = ["products/update"]
uri = "/webhooks/products"

# Webhooks obrigatórios GDPR (requeridos para aprovação de app)
[webhooks.privacy_compliance]
customer_data_request_url = "/webhooks/gdpr/data-request"
customer_deletion_url = "/webhooks/gdpr/customer-deletion"
shop_deletion_url = "/webhooks/gdpr/shop-deletion"

Boas Práticas

Uso da API

• Use GraphQL em vez de REST para novo desenvolvimento
• Solicite apenas campos que você precisa (reduz custo de query)
• Implemente paginação baseada em cursor com pageInfo.endCursor
• Use operações em bulk para processar mais de 250 itens
• Trate limites de taxa com backoff exponencial

Segurança

• Armazene credenciais da API em variáveis de ambiente
• Sempre valide assinaturas HMAC de webhook antes de processar
• Valide parâmetro de estado OAuth para prevenir CSRF
• Solicite escopos de acesso mínimos
• Use session tokens para apps incorporados

Performance

• Cache respostas da API quando os dados não mudam frequentemente
• Use lazy loading em extensões
• Otimize imagens em temas usando filtro img_url
• Monitore custos de query GraphQL através de headers de resposta

Solução de Problemas

SE você vir erros de limite de taxa: → Implemente lógica de retry com backoff exponencial → Mude para operações em bulk para grandes volumes de dados → Monitore o header X-Shopify-Shop-Api-Call-Limit

SE a autenticação falhar: → Verifique se o token de acesso ainda é válido → Confirme que todos os escopos requeridos foram concedidos → Garanta que o fluxo OAuth foi completado com sucesso

SE a extensão não está aparecendo: → Verifique se o alvo da extensão está correto → Confirme que a extensão foi publicada via shopify app deploy → Valide que o app está instalado na loja de teste

SE o webhook não está recebendo eventos: → Verifique se a URL do webhook é acessível publicamente → Confira lógica de validação de assinatura HMAC → Revise logs de webhook no Partner Dashboard

SE query GraphQL falhar: → Valide a query contra o schema (use explorador GraphiQL) → Verifique se há campos descontinuados na mensagem de erro → Confirme que você possui os escopos de acesso requeridos

Arquivos de Referência

Para guias detalhados de implementação, leia esses arquivos:

• references/app-development.md - Fluxo de autenticação OAuth, mutações GraphQL para produtos/pedidos/cobrança, handlers de webhook, integração com API de billing
• references/extensions.md - Componentes de UI de checkout, extensões admin UI, extensões POS, Shopify Functions para descontos/pagamento/entrega
• references/themes.md - Referência de sintaxe Liquid, estrutura de diretório de tema, seções e snippets, padrões comuns

Scripts

• scripts/shopify_init.py - Scaffolding interativo de projeto. Execute: python scripts/shopify_init.py
• scripts/shopify_graphql.py - Utilitários GraphQL com templates de query, paginação, rate limiting. Importe: from shopify_graphql import ShopifyGraphQL

Links da Documentação Oficial

• Shopify Developer Docs: https://shopify.dev/docs
• Referência GraphQL Admin API: https://shopify.dev/docs/api/admin-graphql
• Referência Shopify CLI: https://shopify.dev/docs/api/shopify-cli
• Polaris Design System: https://polaris.shopify.com

Versão da API: 2026-01 (lançamentos trimestrais, janela de descontinuação de 12 meses)