ポインポン (Poing Pong)
一覧へ戻る

初期設定

セクションやブロックにカスタムCSSを適用するには

使用目的

一部のテーマの場合ポインポン側の各種ブロックの表示が崩れてしまう場合がございます。

ポインポンの機能ではなくShopifyテーマの機能となりますが、カスタムCSSを用いることでポインポンの各種フィールドの表示を細かく指定することができます。

 

注意点

CSSはアプリのバージョンアップなどにより影響を受ける可能性がございます。表示の調整であれば、表示が再度崩れる程度となるため、お客様の操作に大きく問題が出ることはございませんが、機能にかかわる部分をCSSで制御すると意図せぬ問題を引き起こす可能性がございますので極力お避けください。

 

設定を行う場所

カスタマイズから商品ページやカートページを開き、設定したいブロックの上位のセクションを選択します。

例)下図のような場合であれば、「お客様の評価」の中身を修正したい場合は「商品情報」を、「商品レビューの項目を修正したい場合は「アプリ」を、といったように折り畳みの親にあたる部分を選択すると、カスタムCSSを編集するエリアが表示されます。

 

例としてカスタムCSSの入力欄へ

.poingpong-review__texts { font-size: 3em; }

と入力した場合は、画像のようにレビューの本文がテーマ標準の3倍のサイズになります。

CSSの記述方法などについては、恐れ入りますが各種解説などをご確認いただきますようお願いいたします。

 

CSSの記述に必要なセレクタ情報

ポインポンのブロックは下記のようなIDとClassを使用しております。必要に応じてご利用ください。(変更があった場合などは随時こちらを更新いたします)

レビューブロックで使用されているセレクタ

  • .poingpong-review__overview:レビューセクションの見出し部分
  • .poingpong-review__title:投稿タイトル
  • .poingpong-review__texts:レビュー本文
  • .poingpong-text_right :投稿者情報欄
  • .poingpong-review__reply_from:「ショップからのコメント」部分
  • .poingpong-review__reply_contents:返信本文

一括で設定する場合は下記をコピーしてご利用ください

.poingpong-review__overview,.poingpong-review__title,.poingpong-review__texts,.poingpong-text_right,.poingpong-review__reply_from,.poingpong-review__reply_contents{ /*ここにCSSを追加してください*/ }

星のみ表示するブロックで使用されているセレクタ

  • poingpong-review__overview

カートページのポイントブロックのセレクタ

  • .poingpong-cart___title
  • .poingpong-cart___comment