# shopifyのオプションについて

**URL:** <https://community.shopify.com/t/shopify/202087>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [March 23, 2023, 4:17am UTC](https://community.shopify.com/t/shopify/202087 "2023-03-23T04:17:01Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Shopifyの商品ページで、オプション選択時に対応するテキストを表示・非表示する実装方法についての質問と回答。

**質問内容:**
- 3つのオプションがあり、各オプションにメタフィールドでテキストを設定
- オプション選択時に該当テキストのみ表示し、他は非表示にしたい

**回答された実装手順:**
1. バリエーション用のメタフィールドを作成（ネームスペースとキーは任意）
2. テーマカスタマイズで「カスタムLiquid」ブロックを追加し、表示位置を調整
3. 各バリエーション商品にメタフィールドで説明文を追加
4. 商品情報メニューから「カスタムCSS」を選択し、指定のCSSコードを追加
5. Liquidコードを追加して、選択されたオプションの説明文のみ表示

**注意点:**
- Dawnテーマをベースにした説明のため、他テーマでは動作しない可能性あり
- 有料テーマの場合は対応が難しい場合がある
- 画像付きで具体的なコード例が提供されている

<div class="post-metadata">

**Author:** ![mira0](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@mira0](https://community.shopify.com/u/mira0)\
**Post date:** [March 23, 2023, 4:17am UTC](https://community.shopify.com/t/shopify/202087/1 "2023-03-23T04:17:01Z")

</div>

shopifyでオプションを選択するとテキストを表示させるようにしたい。オプションが3つあり、メタフィールドでテキストを設定して、それを商品ページに3つ表示させ、displaynoneで非表示にして、オプションを選択すると、そのオプションだけを表示させるように実装したいです。

手順ややり方やコードなどを教えていただきたいです。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [March 30, 2023, 10:53am UTC](https://community.shopify.com/t/shopify/202087/2 "2023-03-30T10:53:00Z")

</div>

ご質問いただいている、3つのオプション説明文を表示し非表示するやり方ですが、

下記のように設定いただけましたら、ご希望の設定になるかと思われます。

ページが開いた際に選択されているオプションの説明文が表示されます。

ご使用のテーマが不明なため、ShopifyのDawnテーマを元にした説明となります。

テーマによっては仕様が違う可能性もあり、動かない場合もございます。

動作しない場合、プライベートメッセージなどで、ストアの情報を頂戴できればもう少し具体的な回答ができるかもしれませんので、差し支えないようでしたらご連絡ください。

(しかし、解決のお約束はできません。特に有料テーマの場合は回答できない可能性が高いです。)

**設定方法**

**1.**

説明文用にバリエーションのメタフィールドを作成してください。

 ![Qcoltd_0-1680173410282.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/8/892588ce27bacd93de2a8b0b72f55db193c9b575.png)

ネームスペースとキーは任意のモノに変更してください。

**2.**

管理画面でテーマのカスタマイズ \> デフォルトの商品を選んでいただき、

左メニューの商品情報内にあるブロックを追加をクリックし「カスタムLiquid」を追加し

表示したい位置に順番を変更してください。

 ![Qcoltd_1-1680173410334.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/e/e/f/eef3201022fe471dfdd86708863f6ece4a0f42a6.png)

**3.**

カスタムLiquidの入力欄に下記コードを追加し、保存するボタンをクリックしてください。

「variant.metafields.custom.optiontext.value」の「custom.optiontext」は1で作成したメタフィールドのネームスペースとキーに変更してください。

 ![Qcoltd_2-1680173410385.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/c/ac4981d1c0b43b8128cb8d980df98e5b10bf2785.png)

```markup

{%- assign nowVariantId = product.selected_or_first_available_variant.id -%}
{%- for variant in product.variants -%}
    {%- assign optionText = variant.metafields.custom.optiontext.value | newline_to_br -%}
    {% if variant.id == nowVariantId %}
      

        {{ optionText }}
      

    {% else %}
      
        {{ optionText }}
      

    {% endif %}
{%- endfor -%}

```

**4.**

管理画面でテーマのカスタマイズ \> デフォルトの商品を選んでいただき、

左メニューの商品情報をクリックし「カスタムCSS」を選択し下記CSSを追加してください。

```markup
.text-data {
  display:none;
}
.text-data.on-display {
  display:block;
}

```

**5.**

各バリエーション商品でメタフィールドに説明文を追加してください。

 ![Qcoltd_3-1680173410205.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/6/061f9741c6f8e334ee82fb6fb67b4c116dc3092f.png)

以上で、下記画像のオプションを選択した際、下記赤枠のテキストが変更されます。

 ![Qcoltd_4-1680173410509.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/2/264e66bb41d50ed959d3e261e2ab7573e1f9537f.png)

ご参考まで。

(キュー小坂)