商品ページにバリエーション
ボタンリンク設置方法

この記事を書いた人

くるみ

マーケターとしてEC運用やCRM施策を進める中で、やりたいことを実現するためにwordpressやshopifyで検証・実装した内容を初心者目線でまとめています。

Shopifyのデフォルト仕様でバリエーションを設定しようとした場合、単品では価格が変更されても定期便に関しては元のページの情報しか反映されなかったり、画像がわかりにくかったり思うように表示されずにお困りの方もいらっしゃるかもしれません。

それなら一層、各ページへのボタンリンクを付けてしまえ！

ということで、

バリエーション設定ではなく、メタフィールドと商品ページのカスタマイズで数量選択セクションの上に各バリエーション商品のページへのボタンリンクを設置する方法をご紹介します。

今回のゴールは

商品ページにバリエーションボタンリンクを設置

今回はデフォルト機能のバリエーション設定は使わずに設定していきます。

完成イメージ

バリエーションボタンリンク設置メリット

• 離脱防止に役立つ
  ほかの選択肢も用意しておくことでより購入されやすくなる
• デフォルト機能よりわかりやすい
  個々の商品画像や説明文を見てから購入できるため混乱を防げる（デフォルトでは選択した商品の内容に写真が完全に切り替わるわけではないため、誤解を招くリスクがある）
• 定期購入プランのある商品に便利
  デフォルトのバリエーション機能では、定期購買アプリと連動しておらず、別バリエーションの定期購入を選んでも情報が正しく反映されないが、ボタンリンクにすればそのような混乱を避けれらる

バリエーションボタンリンクの設定方法

流れとしては以下の3ステップです。

※本記事のコードはShopify標準テーマ「Dawn」で確認しています。

1. メタフィールドの定義追加

設定 > メタフィールドとメタオブジェクト > 商品 > 「定義を追加する」

名前は任意でOKですが、次の2.のコード内で使用している名前に合わせています。

• 名前：variation
• タイプ：JSON

ボタンラベル、リンク、ボタンの色を設定したかったので、スキーマには以下を記載しています。

{"type":"array","items":{"type":"object","properties":{"label":{"type":"string"},"link":{"type":"string"},"color":{"type":"string"}}}}

保存したのち、対象の商品ページ内のメタフィールドにJSONコードを書いていきます。

2. 商品ページのメタフィールドにJSON追記

該当の商品ページの商品メタフィールドのvariation箇所の記載例は以下の通りです。実際の情報に合わせて修正してください。

[{"label":"CICA","link":"/products/cica-pack-10","color":"lightgreen"},{"label":"ヒアルロン酸","link":"/products/hyaluronic-pack-10","color":"lightblue"},{"label":"竹炭","link":"/products/sumi-pack-10","color":"#bcb2b2"}]

3. テーマカスタマイズ

オンラインストア＞テーマの「カスタマイズ」から、商品＞デフォルトの商品（該当商品ページの紐づいているテンプレ）を選択。

数量セレクターブロックの上に、「カスタマイズされたliquid」ブロックを追加し、以下のコードを記載します。

{% assign variations = product.metafields.custom.variation.value | parse_json %}
{% if variations %}
  <div class="variation-buttons">
  {% for v in variations %}
  <a href="{{ v.link }}" class="btn-variation" style="--btn-bg: {{ v.color }};">
  {{ v.label }}
</a>
{% endfor %}
</div>
{% endif %}

<style>
.variation-buttons {
display: flex;
justify-content:center;
gap: 8px;
}

.btn-variation {
  display: inline-block;
  padding: 8px 16px;
  background-color: var(--btn-bg, #000);
  color: #fff;
  border-radius: 8px; 
  text-decoration: none; 
  font-weight: bold;
  transition: background-color 0.3s;
}

.btn-variation:hover {
  background-color: #333; 
}
</style>

商品ページのボタンリンクまとめ

shopifyのDawnテーマでバリエーションのある商品に対して、バリエーション設定ではなく、各対象商品ページに飛ばすバリエーションボタンリンクの設置方法を紹介しました。

1. 商品メタフィールドでJSONのスキームを登録
2. 商品ページのメタフィールドで情報を指定
3. カスタマイズ画面で数量セレクターの上に足したブロックにメタフィールドの値を拾うように設定

という簡単3ステップです。お好きなようにテキストやリンク、装飾を変えることで活用幅も広がります。variationメタフィールドが空の場合には何も表示されません。内容は該当商品ページから簡単に変えられるので便利です。初心者でも簡単に設定できるように参考コードも貼っております。

公開前に確認したいメタフィールドと表示条件

バリエーションへのリンクは、商品ごとに登録値が違うため、表示だけでなく「値がない場合」「URLが誤っている場合」も想定しておくと安全です。作業前に公開テーマを複製し、複製側で検証してから反映してください。

• メタフィールドの定義、名前空間、キー、URL形式が一致している
• 登録値が空のときはボタン自体を表示しない
• リンク先の商品が公開中で、意図したバリエーションを選べる
• スマホでも文字が切れず、色だけに頼らず選択状態が分かる
• キーボード操作時にフォーカス位置が見える

メタフィールドの型や入力規則はShopify公式のメタフィールド定義、バックアップ方法はテーマを複製する公式手順を参照できます。

リンクが表示されないときの切り分け

最初に対象商品のメタフィールドへ値が保存されているか確認し、次にLiquidで参照しているキーを照合します。値がある場合は、条件分岐の位置とHTMLの閉じタグも確認してください。セット販売の選択肢を作りたい場合は選べるセット商品の実装例も参考になります。