---
title: "Commerce Navigationのレンダリングをカスタマイズしてください"
slug: "customize-the-commerce-navigation-rendering"
abstract: "Commerceナビゲーションレンダリングのカスタマイズ方法。"
---
# Commerce Navigationのレンダリングをカスタマイズしてください

[Commerceナビゲーション](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/en/commerce-navigation-renderings.html)レンダリングは[コピーしてカスタマイズ](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/copy-and-customize-a-rendering.html)することで、自分のブランド名を追加できます。既存のスタイルの場合はナビゲーションレンダリングで[CSSクラスを修正](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/create-a-rendering-variant.html)しますが、新しいスタイルの場合は.cssファイルの更新が必要です。

Commerce Navigationレンダリングのスタートページ設定はsitecore/Content/<tenant>/<site>/Settings/Commerce/Catalog Configurationにあり、レンダリングのコントロールプロパティでSXAナビゲーションレンダリングのスタートページ設定を定義します。

アイテム

概要

依存関係

CSSクラス

リンク識別子

アクティブなナビゲーションをハイライトするために使われるカテゴリのアイテムIDを含みます。

全くありません

ナビゲーションリンク

ナビゲーションリンクのリンクと名前が含まれています。

全くありません

cxa-ナビゲーション-コンポーネント

Commerce Navigationコンポーネントをカスタマイズするには:

1.  ストアフロントのLaunchpadで「 **Content Editor**」をクリックします。
    
2.  コンテンツエディターで*sitecore/Content/Sitecore/Storefront/Presentation/Rendering Variants/Commerce Navigation/Default*へ行ってください。
    
3.  **ナビゲーション**レンダリングを右クリックして「**複製**」をクリックします。
    
4.  レンダリングコピーの名前を入力して「 **OK」**をクリックします。
    
    重複ナビゲーションコンポーネントは「Available Renderings」フォルダに追加されます。
    
    ![Copy of Navigation rendering in the Available Renderings folder.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/NavigationCopy.png)
    
5.  **コンテンツ**タブで必要な変更を加えてください。