# 商品詳細ページで別商品へのリンクを生成したい

**URL:** <https://community.shopify.com/t/topic/90686>\
**Category:** 技術的なQ＆A\
**Created:** [January 12, 2022, 7:04am UTC](https://community.shopify.com/t/topic/90686 "2022-01-12T07:04:24Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

商品詳細ページでバリエーションではなく別商品（サイズ・色違い）へ誘導するリンクを生成したいという相談。テーマはDawn、Liquid編集可。

提案1: 商品説明文にHTMLで画像やリンクを挿入するミニマムな方法。Liquid不要で容易。

提案2: メタフィールドに関連商品のハンドルをカンマ区切りで保存し、Liquidのall_productsから取得して出力。例: product.metafields.custom.product_handle を split し、各ハンドルの title やリンクを表示。

技術補足: Liquid＝Shopifyのテンプレート言語、メタフィールド＝カスタム項目、ハンドル＝商品識別子。

依頼者は当初、属性別に個別メタフィールドへリンクを設定する案だったが、バリエーション増加で項目が増える課題あり。

決定: 提案2の配列型メタフィールド＋all_productsで進めることで、項目追加なく柔軟にリンク生成可能。

状況: 解決済み。コード例（Liquidのall_productsとsplitの利用）が理解の中心。

<div class="post-metadata">

**Author:** ![do4nd81oko](https://avatars.discourse-cdn.com/v4/letter/d/c4cdca/32.png) [@do4nd81oko](https://community.shopify.com/u/do4nd81oko)\
**Post date:** [January 12, 2022, 7:04am UTC](https://community.shopify.com/t/topic/90686/1 "2022-01-12T07:04:24Z")

</div>

商品詳細ページで、サイズや色違いの商品（別商品）へのリンクを生成したいのですが、方法がわかりません。

通常であれば、サイズや色違いの商品はバリエーションで登録するかと思いますが、今回は個別の商品として保有したいと考えております。

バリエーションで登録すれば、詳細ページでサイズ・色をそれぞれ選択できますが、それと同じ動線でサイズ・色を選択すると他商品ページに遷移する作りにしたいです。

現在テーマはDawnを使用しており、liquidを編集することも可能です。

このような動きはテーマの編集で行えるものでしょうか？

何卒、よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [January 24, 2022, 12:36am UTC](https://community.shopify.com/t/topic/90686/2 "2022-01-24T00:36:07Z")

</div>

バリエーションではなく別の商品のページに遷移させる場合、以下のような方法が考えられると思います。

①商品の説明文にHTMLで挿入する  
ミニマムで実現をするのであれば、該当商品の説明文にHTMLとして画像やリンクを挿入する形が考えられます。  
ご担当者様がHTMLでの編集が可能な場合、Liquidの操作が必要ありませんので、比較的容易に実現ができると思います。

②metafieldsに表示したい関連商品のハンドルを入力してall\_productsで出力

メタフィールド入力例：  
作成したメタフィールド：custom.product\_handle  
入力内容：product1,product2,product3（表示したい商品のハンドル）

コード例：  
{% assign handleList = product.metafields.custom.product\_handle | split: “,” %}  
でカンマ区切りで入力した商品のメタフィールドを取得する

{% for handle in handleList %}  
{{ all\_products[handle].title }}  
{% endfor %}  
all\_products[handle]の形で全商品からメタフィールドに入力したハンドルの商品を取得できますので、  
titleなど表示したい内容を出力する

参考：  
[https://shopify.dev/api/liquid/objects](https://shopify.dev/api/liquid/objects)

商品タグをベースに出力するなど他の方法も考えられると思いますが、一例としては上記のような形になると思います。

---

<div class="post-metadata">

**Author:** ![do4nd81oko](https://avatars.discourse-cdn.com/v4/letter/d/c4cdca/32.png) [@do4nd81oko](https://community.shopify.com/u/do4nd81oko)\
**Post date:** [February 9, 2022, 2:00am UTC](https://community.shopify.com/t/topic/90686/3 "2022-02-09T02:00:12Z")

</div>

返信が遅くなり申し訳ありません。

ご回答いただき、ありがとうございました。

自分でも調べた結果、メタフィールドを使う方法で進めていましたが、配列形式で入力する方法は思いつきませんでした。

「カラー：赤」「カラー：白」など細かく設定した項目にリンク先を入力し、hrefに一つずつ出力する方法しか思いつかず、これではバリエーションが増える度メタフィールドの項目を増やす必要があるため手間だと悩んでおりました・・・。

貴社に教えていただいた②の方法だと、わざわざ項目を増やす必要がなく、ハンドルで入力すればリンク先やタイトル等取り出せるため大変便利ですね！

こちらの方法で進めたいと思います。

この度はご教授いただきありがとうございました！
