# 商品詳細ページに価格表示をもうひとつ追加したい（Impluse）

**URL:** <https://community.shopify.com/t/impluse/293487>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, html\
**Created:** [February 7, 2024, 3:49am UTC](https://community.shopify.com/t/impluse/293487 "2024-02-07T03:49:41Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

ユーザーはShopifyのImpulseテーマ（ver.7.4.0以前の古いバージョン）を使用し、スマートフォンの商品詳細ページで画面下部に追従する価格表示とカートボタンを実装しようとしていました。

**課題:**
- グレード選択によって価格が変動する仕様
- 価格表示コード（`class="product__price"`)を追加したが、2か所の価格表示のうち片方しか値段の切り替えができない
- 添付画像で実装イメージを提示

**結果:**
ユーザーは自己解決したと報告しています。具体的な解決方法は共有されていません。

<div class="post-metadata">

**Author:** ![ichika](https://avatars.discourse-cdn.com/v4/letter/i/da6949/32.png) [@ichika](https://community.shopify.com/u/ichika)\
**Post date:** [February 7, 2024, 3:49am UTC](https://community.shopify.com/t/impluse/293487/1 "2024-02-07T03:49:41Z")

</div>

テーマはImpluse（※ver.7.4.0より前の古いバージョン）を利用しています。  
画像のようにスマートフォンでページのボトムに追従する「価格」と「カートボタン」を設置したいと考えています。  
価格表示はグレードの選択によって値段が変更される仕様です。  
しかし、試しに価格のコードを追加しても片方の価格表示しか値段の切り替えができませんでした。

 ![見本.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/7/7/7719d8f5d28e5fe2f22f6cd96ed5f5e153ce1781.jpeg)

下記の【class=“product\_\_price”】の部分が価格表示のコードだと思いますが、どのようなコードを追加すれば、2か所の価格表示の切り替えができるようになりますでしょうか？  
よろしくお願いいたします。

```auto
{%- if product.tags contains 'SOLD' -%}

<div class="payment sold">
	<span class="product__price">─</span>
</div>
<div class="d-payment_wrap">商品入荷の予定は未定です。</div>

{%- else -%}
<div class="payment"><span data-product-price
class="product__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}" data-current-price="{{ current_variant.price }}">
{%- unless product.empty? -%}
{{ current_variant.price | money }}
{%- else -%}
{{ 1999 | money }}
{%- endunless -%}
</span><span class="product__policies">(税込)</span></div>

{%- endif -%}

```

---

<div class="post-metadata">

**Author:** ![ichika](https://avatars.discourse-cdn.com/v4/letter/i/da6949/32.png) [@ichika](https://community.shopify.com/u/ichika)\
**Post date:** [February 8, 2024, 8:42am UTC](https://community.shopify.com/t/impluse/293487/2 "2024-02-08T08:42:07Z")

</div>

自己解決しました。