提供しているセクション
| セクション名 | 設置するページ | できること |
|---|---|---|
| ストア全体レビュー | TOPページ・LP など | ストア内の全レビューを一覧表示。信頼感のアピールに最適。 |
| レビュー一覧+投稿 | 商品ページ | 商品ごとのレビュー一覧と投稿フォーム。 |
| 星評価サマリー | 商品ページ | 平均星と件数だけのコンパクト表示。商品名の近くに設置を推奨。 |
追加手順
- セクションライブラリページで、追加したいセクションのカードをクリックします。
- テーマエディタが新規タブで開き、選んだセクションが 「追加待ち状態」 でプレビューに表示されます。
- 表示位置を確認し、必要に応じてドラッグで位置を調整します。
- 右上の「保存」をクリックして設置完了。
Vintageテーマの場合
Vintage テーマでは App Block をテーマエディタから追加できないため、商品テンプレートに手動設置します。既存レビューアプリ（Judge.me / HulkApps など）のコードが入っている場合は、その位置を RYX Review 用コードに置き換えるのが基本です。
設置する場所
| 設置内容 | おすすめ位置 | 目的 |
|---|---|---|
| 星評価サマリー | 商品タイトル直下 | 商品名の近くに平均星・件数を表示 |
| レビュー一覧＋投稿フォーム | templates/product.liquid の product-recommendations より上 |
「あなたへのおすすめ」の上にフル幅で表示 |
手順
- テーマを複製します。
sections/product-template.liquidを開き、商品タイトル直下に星評価サマリー用スニペットを設置します。- 商品説明カラム内に既存レビューウィジェットがある場合は削除します。
templates/product.liquidを開き、{% section 'product-recommendations' %}の直前にレビュー一覧＋投稿フォームを設置します。- CSS はテーマで読み込まれている
assets/style.cssなどの末尾へ追加します。 - ストアフロントで商品ページを開き、一覧表示・投稿・承認後の反映を確認します。
配置例
templates/product.liquid では、次のようにおすすめセクションの直前に置きます。
{% section 'product-template' %}
<div class="page-width ryx-review-legacy-section">
{% render 'ryx-review-legacy-widget', product: product, shop: shop %}
</div>
{% section 'product-recommendations' %}
商品タイトル直下には、星評価サマリー用スニペットを置きます。
<h1 class="product-single__title">{{ product.title }}</h1>
{% render 'ryx-review-legacy-badge', product: product %}
追加後のカスタマイズ
各セクションはテーマエディタ上で以下を調整できます。
- 見出しテキスト・表示/非表示・タグ (H1〜H6 またはテキスト)
- 見出しの位置 (左・中央・右)
- ブロックの幅 (フル幅・コンテンツ幅 720px・狭め0 480px・カスタム)
- 星の色
- セクション固有設定 (一覧件数・並び順・表示スタイルなど)