# オプション機能のカスタマイズについて

**URL:** <https://community.shopify.com/t/topic/74734>\
**Category:** 技術的なQ＆A\
**Created:** [October 28, 2021, 7:02am UTC](https://community.shopify.com/t/topic/74734 "2021-10-28T07:02:44Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

要件: 商品ページのプルダウンでA/B/Cを選ぶと、Aは同一ページ、Bは商品2、Cは商品3へ遷移させたい。既存アプリ（Infinite Options）は非対応。

解決策（アプリ不要・テーマ編集）:
- 商品1〜3を含むコレクション（例: handle「products」）を作成。コレクション＝商品をまとめるグループ。
- 各商品にメタフィールドで選択肢A/B/Cを登録（例: Metafields Guru使用）。メタフィールド＝商品に任意の追加データを持たせる仕組み。
- 商品ページのテンプレートにコードを追加。該当コレクションに属する場合のみselectを表示し、現在の商品IDを保持。optionのvalueに遷移先（同商品または他商品）のURL/handleを設定してリダイレクト。
- 画像とコード断片が実装の要点を示す（メタフィールド設定・コレクション作成・select出力）。

追加質問（有料テーマ「pristage」）:
- sections配下の商品ページ用テンプレート（Debutのproduct-template.liquid相当）に記述。
- Chrome検証ツールでshopify-section--bordered / Product--medium等のクラスを手掛かりに挿入位置を特定。見つからなければテーマ制作者へ問い合わせ。

結果: 方法が明確化し、実装見通しが立った。解決済み。

<div class="post-metadata">

**Author:** ![S\_F](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@S\_F](https://community.shopify.com/u/S_F)\
**Post date:** [October 28, 2021, 7:02am UTC](https://community.shopify.com/t/topic/74734/1 "2021-10-28T07:02:44Z")

</div>

次のような設定を実現したいと思うのですが、

方法もしくは対応できるアプリをお分かりになる方はいらっしゃいますでしょうか？

ちなみに「infinit options」アプリに問い合わせたところ、対応不可との回答を得ています。

* * *

Shopifyに「商品1」「商品2」「商品3」の３つの商品が登録されていると仮定します。

「商品1」のページにアクセスし、プルダウン形式のオプション（AかBかCが選択できる）の中から、

Aを選んだ場合は「商品1」のページのまま、

Bを選んだ場合は「商品2」のページに移動、

Cを選んだ場合は「商品3」のページに移動する

---

<div class="post-metadata">

**Author:** ![Sota\_yohaku](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Sota\_yohaku](https://community.shopify.com/u/Sota_yohaku)\
**Post date:** [October 29, 2021, 1:10am UTC](https://community.shopify.com/t/topic/74734/2 "2021-10-29T01:10:42Z")

</div>

要件を満たすアプリは分からないですが、テーマを編集すれば要件を満たせると思います。  
方法は、商品1、2、3が属するコレクションを作成し、商品ページでコレクションに含まれる商品をselectで表示します。  
選択肢A、B、Cは商品のメタフィールドとして登録します。使用したアプリは『[Metafields Guru](https://apps.shopify.com/metafields-editor-2?locale=ja)』です。

最初に商品にメタフィールドを設定します。

 ![893f060c97a9e225d4d08cf63f5facc5.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/c/4c7a7b00aa96ec828a83d4322554e4f628529913.png)

次にコレクションを作成します。

 ![f3ba7e996fc616a8847e2d6038403b13.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/b/0b70262fd01b8b7194d0193c0ebb3fcbc50b9be4.png)

使用するコードの完成形は以下になります。

```ruby
{% assign is_products = false %}
      {% for collection in product.collections %}
        {% if collection.handle == "products" %}
          {% assign is_products = true %}
        {% endif %}
      {% endfor %}

      {% if is_products %}
        {% assign is_id = product.id %}
        {% assign collection = collections['products'] %}

        
      {% endif %}

```

テストで使用したテーマはdebutです、コード的にどのテーマでも問題ないと思います。  
コードは商品ページ(product-template.liquid)の表示したい場所に貼り付けてください。  
以下はコードの説明です。

コレクションのハンドル名は『products』にしています。

```ruby
{% assign is_products = false %}
      {% for collection in product.collections %}
        {% if collection.handle == "products" %}
          {% assign is_products = true %}
        {% endif %}
      {% endfor %}

```

最初のforは、商品1、2、3以外にも商品がある場合その商品ページではプルダウンメニューを表示をしないための判定です。商品自体にproductsコレクションが含まれているか判定しています。

```ruby
{% if is_products %}
        {% assign is_id = product.id %}
        {% assign collection = collections['products'] %}

        
      {% endif %}

```

変数is\_idは、商品1だった場合選択肢Aを選ばれたときにはページ移動をしないという要件を満たすために開いている商品ページの商品IDを控えています。

あとはselect内でコレクションのループを回して、表示中の商品か否かを判断して移動先をoptionのvalueに入れています。

 ![629fc16af597fb2e9270972a514dabcf.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/8/a/3/8a3a98d18480f6f8a3136c88122fdc8831c45e62.png)

S\_F\_さんのしたいことか分かりませんが、よければ使ってください。

---

<div class="post-metadata">

**Author:** ![S\_F](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@S\_F](https://community.shopify.com/u/S_F)\
**Post date:** [October 29, 2021, 2:40am UTC](https://community.shopify.com/t/topic/74734/3 "2021-10-29T02:40:55Z")

</div>

ありがとうございます！！

理想通りのかたちが実現できそうです、大変助かりました！

重ねて御礼申し上げます！！

---

<div class="post-metadata">

**Author:** ![S\_F](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@S\_F](https://community.shopify.com/u/S_F)\
**Post date:** [November 2, 2021, 1:19am UTC](https://community.shopify.com/t/topic/74734/4 "2021-11-02T01:19:21Z")

</div>

解決済みにさせていただいたところ、

追加での質問になり申し訳ございません。

本件の実装ですが、

pristageを使用する場合は、どこにコードを書けば良いかおわかりになりますでしょうか？

度々お手数をお掛けしますが、どうぞよろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Sota\_yohaku](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Sota\_yohaku](https://community.shopify.com/u/Sota_yohaku)\
**Post date:** [November 2, 2021, 5:07am UTC](https://community.shopify.com/t/topic/74734/5 "2021-11-02T05:07:54Z")

</div>

この有料テーマを自分が持ち合わせてないので明確にお答えできないですが、『section』ディレクトリの中に商品ページ用のテンプレートファイルがあると思います。  
その中で記述すれば商品ページに表示できると思います。  
debutというテーマでは『product-template.liquid』というファイルなのでそれに似たようなファイルを探してください。

表示するHTMLの確認ですが、chromeなどから自分のストアで検証モードを開いて頂いてクラス名やID名で検索をかけてください。

 ![926f9e24fa21924710ee5571c5d3afb9.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/2X/4/4030ebaa250d8edf0518c12ce17afe92cc14a876.jpeg)

デモストアで確認したところ、『shopify-section–bordered』か『Product–medium』のクラス名で検索をかければ出てくるのかなぁと思います。

どうしても見つけれない場合はテーマ制作者に問い合わせるか、コミュニティで再度質問をしてみてください。  
お力になれず申し訳ないですが、頑張ってください。

---

<div class="post-metadata">

**Author:** ![S\_F](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@S\_F](https://community.shopify.com/u/S_F)\
**Post date:** [November 4, 2021, 4:48am UTC](https://community.shopify.com/t/topic/74734/6 "2021-11-04T04:48:41Z")

</div>

ご丁寧にありがとうございました！

無事実装できそうです！

重ねて御礼申し上げます！！