Be Yoursテーマには、通常のShopifyでは実現しづらい「色違い商品を別々のURLで管理しながら、1つの商品のように見せる」機能があります。
これが「Sibling Products（兄弟商品）」機能です。
通常のバリエーション機能との違い：
- ✅ 兄弟商品：色ごとに独立したURL → 詳細な分析・SEO対策が可能
今回は、この便利な機能の設定方法を、実際の画面を見ながら解説していきます。
こちらの記事を参考に実装を試みました。
https://themes.shopify.com/themes/be-yours/presets/be-yours
「Sibling Products（兄弟商品）」機能を実装した写真になります。
1. ざっくり全体像
- 兄弟商品をリンク → メタフィールド & ブロック
- カラースウォッチ設定
- テーマ設定 > カラースウォッチ(メタフィールドで設定したバリエーション名:カラーコード)
- 判定キーは デフォルトテーマコンテンツ > Color swatch trigger と兄弟商品ブロックのOption name が完全一致
2. 兄弟商品（Sibling products）を作る
| 手順 | 操作 | メモ |
| 2-1 |
コレクションを作成（例: the-endless-summer） |
兄弟全商品を含める テンプレートは必ずデフォルト |
| 2-2 |
商品メタフィールドを 2 つ定義 （メタフィールドの名前は自由でいい） |
1. 各バリエションで表示させる名称custom.sibling_variation_name（単一行テキスト）2.バリエーション商品を登録したコレクションのハンドル custom.sibling_collection_handle（単一行テキスト） |
| 2-3 | 各商品に入力 | 1. 各バリエションで表示させる名称custom.sibling_variation_name（単一行テキスト）入力例： Blue / Pink …2.バリエーション商品を登録したコレクションのハンドル custom.sibling_collection_handle（単一行テキスト）入力例: the-endless-summer
|
| 2-4 | 兄弟商品（Sibling products） ブロックを追加 | ・Option value metafield: custom.sibling_variation_name・Collection handle metafield: custom.sibling_collection_handle・Option nameは商品オプション名と同じか空欄 |
3. カラー-スウォッチ（カスタム）設定
ブロック：カラースウォッチ
- 「カラーのスウォッチを有効にする」ON
- Swatch source: Custom
テーマ設定 › カラースウォッチ
Blue:#0066ff
Pink:#ff6abf
Green:#00b16a
- 1 行 =オプション値メタフィールド値(
custom.sibling_variation_name):HEX（スペースなし）
‟Color swatch trigger” と Option 名のルール
管理画面＞オンラインストア＞・・・＞デフォルトテーマのコンテンツを編集する
color swatch triggerを虫眼鏡マークに入力し
テーマ編集のオプション名と個々の名称を合わせる
カラースウォッチを使用する場合の設定
| 所在 | 例 | 役割 |
|---|---|---|
| テーマ › デフォルトテーマコンテンツ › Product › Color swatch trigger |
Color / 色 など |
「これは色オプションだ」と判断するキーワード |
| 商品オプション名 |
Color / 色
|
商品側の Variant option name |
| Sibling products › Option name | 同上 or 空欄 | 空欄なら trigger 値にフォールバック |
- Color swatch trigger＝Option名
- Option名を空欄
どちらかの設定でなければカラースウォッチは表示されません
4. カラースウォッチ（バリアント画像）
カラースウォッチのソースをバリアント画像に変更すると画像で表示することができます。
おわりに
Be Yoursテーマの素敵なオンラインショップ運営を！機能の設定方法、いかがでしたでしょうか？
10〜15分の設定で、これまでの「全色が1つのURL」から「色ごとに独立したURL」という、より戦略的な商品管理が可能になりました。
素敵なオンラインショップ運営を！
0件のコメント