サイズチャートアプリの導入について

[sabkai]

"Prestage"テーマを使用して、ECサイトを作成しています。

テキスト欄に記載するのではなく、添付写真のようにテーマに埋め込む？ことができるサイズチャートアプリはありますでしょうか。デザインはシンプルなのを探しています。

また、各商品に各サイズ表を作成したいです。(200商品以上)

ご回答よろしくお願いいたします。

[Qcoltd]

@sabkai 様

興味があり調査してみました。

しかし、Prestigeが有料アプリであるため、コードカスタマイズのご提案が難しいことご了承ください。

まず、サイズチャートアプリで、埋め込み式のものはいくつかあるようです。

例えば、下記には埋め込みの機能があるようでした。

https://apps.shopify.com/kiwi-sizing?locale=ja

https://apps.shopify.com/size-charts-by-clean-canvas?locale=ja

※この2つ以外にもあると思います。

なお、サイズチャートを、モーダルではなく、直接ページに埋め込んで表示させることは、"inline"と表現されていることが多いようです。

さて、上記2つのアプリのKiwi Size Chartの方は、

アプリストアのページに下記のように表示され少し怪しいのですが、

このアプリが最も機能的には充実しているように見えたため、こちらのアプリを例に説明いたします。

このアプリの詳細は開発者によって更新される必要があるため、情報が不足または欠落している場合があります。

アプリ自体の細かな設定方法については割愛しますが、

アプリの管理画面の中に下図のような設定項目があります。

この設定は、下記のような意味になります。

CSS IDがsize-chartというHTML要素の中に、サイズチャートをinlineで埋め込む。

そうしましたら、テーマ側に、CSS IDがsize-chartの要素を作れば、サイズチャートをそこに表示することができます。

ここで問題になるのは、添付いただいた画像を拝見しますと、おそらく、"Collapsible text"ブロックを利用されたいのだと思いますが、"Collapsible text"にはHTML要素を追加できません。

上図のKiwi Size Chartの設定管理画面で “ID” となっている箇所を “raw css selector” に変えることで、強引に埋め込むこともできそうなのですが、並び順の変更などがあると、直す必要が出てきて微妙です。

Prestigeのコード編集をした方が無難なのですが、冒頭でお伝えした通り、コードを見ることができないため、具体的なコード編集案をお伝えすることができません。

そのため、コード編集のコンセプトのみお伝えします。

質問者様ご自身でコード編集が可能でしたら、お試しください。

1. テーマのコードから、"Collapsible text"を定義しているliquidを見つける
2. 該当liquidのschema定義に、text入力エリアを追加
3. 該当liquidの中から、アコーディオンを開いた際に表示されるHTML要素を見つけ、その要素に上記で設定したtextをCSS IDとして追加するようにコードをカスタマイズ
4. テーマの「カスタマイズ」で、サイズチャートを表示したい"Collapsible text"にCSS ID(例えば、size-chart)を設定

差し支えなければ、プライベートメッセージなどでコラボレーターアクセスをいただければ、解決のお約束はできませんが、より具体的なご提案も可能です。

ご参考まで。

(キュー田辺)