FROM CACHE - jp_header

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

sabkai
観光客
4 0 1

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

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

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

 

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

 

sizechart.png

1件の返信1

Qcoltd
Shopify Partner
1049 429 412

@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の方は、

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

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

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

 

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

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

screenshot_20230803_02.png

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

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)を設定

 

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/