PCバナー画像
パピティー

この記事を書いた人

パピティー

htmlとCSSのきほん本を3冊読んだだけの初心者が、やりたいことベースで、shopifyとwordpressに奮闘中。

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

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

ということで、

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

今回のゴールは

  • メタフィールドを活用して数量カウンターの上にボタンリンクを設置

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

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

＼　こんな方におすすめ　／

　定期購買アプリも活用しつつ、バリエーション商品をリンクさせたい

　同じシリーズで紐づけたいものの仕様が異なる

　紐づけはしつつ、個々の商品や説明文は分けたい

完成イメージ

バリエーションリンクを設置

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

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

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

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

  1. メタフィールドの定義追加
  2. 該当商品ページのメタフィールドにJSON追記
  3. テーマカスタマイズから商品ページの数量カウンターの上のブロックにliquid追記

※本記事のコードは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箇所の設定画面

該当の商品ページの商品メタフィールドの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メタフィールドが空の場合には何も表示されません。内容は該当商品ページから簡単に変えられるので便利です。初心者でも簡単に設定できるように参考コードも貼っております。

スポンサーリンク