2月 21, 2026

チェックアウトブランディングがコンテナスタイルをサポート

2月 21, 2026

チェックアウトブランディングがコンテナスタイルをサポート

ShopifyのチェックアウトブランディングAPIが、チェックアウトのメインエリアと注文サマリーエリアのセクションに対するコンテナスタイルのサポートを追加しました。これにより、セクションの角丸度、ボーダースタイル、カラースキーム、スペーシング、シャドウのカスタマイズについて、より多くのコントロールを提供します。この変更は2024-04のリリース候補に含まれています。

技術的課題の定義と現状分析

従来、チェックアウトのブランディングに関するカスタマイズは限定的でした。特に、セクション間のスタイルを一貫性を持たせることが難しい問題が存在していました。これにより、ECサイトのブランドイメージを一貫して表現することが困難でした。

具体的な技術的ソリューションの提案

この新機能では、Checkout Branding APIを通じて、セクションの角丸度、ボーダースタイル、カラースキーム、スペーシング、シャドウのカスタマイズが可能になります。これにより、ECサイトのブランドイメージを一貫して表現することが可能になります。

実装手順とコード例

Checkout Branding APIには、コンテナスタイルを設定するための新しいフィールドが追加されています。具体的なコード例は以下の通りです。

mutation {
  checkoutBrandingUpsert(input: {
    shopId: "gid://shopify/Shop/1",
    checkoutCustomizations: {
      main: {
        containerStyle: {
          borderRadius: "4px",
          borderStyle: "solid",
          borderColor: "#000000",
          backgroundColor: "#ffffff",
          spacing: "20px",
          boxShadow: "0 4px 6px 0 hsla(0, 0%, 0%, 0.2)"
        }
      },
      orderSummary: {
        containerStyle: {
          borderRadius: "4px",
          borderStyle: "solid",
          borderColor: "#000000",
          backgroundColor: "#ffffff",
          spacing: "20px",
          boxShadow: "0 4px 6px 0 hsla(0, 0%, 0%, 0.2)"
        }
      }
    }
  }) {
    checkoutBranding {
      id
      checkoutCustomizations {
        main {
          containerStyle {
            borderRadius
            borderStyle
            borderColor
            backgroundColor
            spacing
            boxShadow
          }
        }
        orderSummary {
          containerStyle {
            borderRadius
            borderStyle
            borderColor
            backgroundColor
            spacing
            boxShadow
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}