バリエーションをリンクにしたい

[toot-pm]

現在Dawnのテンプレートを使ってサイトを作成しております。

【実現したい事】

下記ページの様に香りの種類を選んだら、選んだ商品ページに遷移したい。

https://www.m-cosme.com/products/profra0001

商品ページに商品別にコンテンツを入れているため、既存のバリエーション機能だけだと、テンプレートが変えられないので、簡単にバリエーションを選んだらその商品ページに飛ばしたいです。（URLが変更されるイメージ）

上記が出来る方法またはアプリがあれば教えて頂けますでしょうか。

[Qcoltd · Accepted solution]

@toot-pm様

商品ページからバリエーションを選んだら、対象の商品ページに飛ばしたい件ですが下記の手順で対応が可能かと思います。

１．対象商品用のテンプレートを作成

２．バリエーション選択のセレクトボックスを表示したい箇所に「カスタマイズされたLiquid」を追加

３．下記コードを追加

<select onChange="location.href=value;">
<option value="商品ページのハンドル名">表示名A</option>
<option value="商品ページのハンドル名">表示名B</option>
<option value="商品ページのハンドル名">表示名C</option>
</select>

商品ページのハンドル名と商品名A等は任意のものに変更ください。

セレックとボックスの大きさ等はcssを追加いただき調整いただければと思います。

４．保存をクリック

商品のテンプレート毎に上記コードの並び順を変更し追加する必要がございます。

ご参考まで。

（キュー小坂）

[toot-pm]

早速の回答ありがとうございました。
頂いた方法で対応できました！
助かりました。