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

初期設定

アプリブロックにカスタムCSSを適用する

使用目的

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

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

 

注意点

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

 

設定を行う場所

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

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

 

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

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

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

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

 

CSSの記述に必要なIDとClass

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

商品ページのレビューブロックのID

id="poingpong-review__canvas2"

使用されているクラス

  • .poingpong-review__rating:星表示
  • .poingpong-review__title:投稿タイトル
  • .poingpong-review__body:投稿全体
  • .poingpong-review__texts:レビュー本文
    • .poingpong-review__postdata:投稿日時部分
    • .poingpong-review__posted_at_caption:「投稿日
    • .poingpong-review__posted_at:「年月日」
    • .poingpong-review__author_name_caption:「by」
    • .poingpong-review__author_name:投稿者の表示名
  • .poingpong-review__reply:返信全体
    • .poingpong-review__reply_from:「ショップからのコメント」部分
    • .poingpong-review__reply_contents:返信本文

 

カートページのポイントブロックのID

id="poingpong-cart"

使用されているクラス

  • .poingpong-cart___title
  • .poingpong-cart___comment