商品一覧・商品ページ
商品一覧の商品画像の上に、次のバッジを表示します。
| バッジ | 表示条件 | 色 |
|---|---|---|
| NEW | 商品の登録日から一定日数以内 | アクセント（プリセット連動） |
| 残りわずか | 在庫数が一定以下（在庫無制限の商品は対象外） | アンバー |
| SOLD OUT | 在庫切れ。画像が淡くなり中央に表示 | グラファイト |
| 商品タグ | 商品に設定されたタグ（管理画面で登録したもの） | タグ ID ごと |
商品詳細ページのタグ（EC-CUBE 標準の表示）も同じ見た目に揃えています。また商品詳細では、カートボタンが無効（在庫切れ）のときに商品画像へ SOLD OUT を重ねます（:has() を使った進歩的強化です。非対応ブラウザでは表示されませんが、無効化されたカートボタンで在庫切れは判別できます）。
表示条件を変える
変える場所と書き方は 一覧のバッジにあります（[ページ管理] → 商品一覧ページ）。ここでは、それぞれの値がどう効くかを説明します。
残り数（glass_low_stock_count） は、規格のある商品では表示しません。規格ごとに在庫が違うため、いちばん少ない数を出すと誤解を招くからです。その場合は「残りわずか」のままになります。
2 枚目の写真（glass_rollover） は、2 枚以上登録されている商品だけが対象です。指で触る画面（hover: none）では「乗せる」操作が無いため、常に 1 枚目だけを出します。
カードそのものは動きません。 カーソルを乗せても、変わるのは写真だけです。カードの中に 2 枚目の写真が入っているため、カードが浮き上がると見ている場所が逃げるように見えてしまいます。トップページの新着商品も同じ扱いです。
バッジの文言（NEW / 残りわずか / SOLD OUT）も、同じ商品一覧ページの中で直接変更できます。 SOLD OUT を日本語にする場合は EC-CUBE の翻訳を使えます。
{{ 'front.product.out_of_stock_label'|trans }} {# → (品切れ中) #}
独自タグに色を付ける
EC-CUBE の既定タグには色を割り当て済みです。
| タグ ID | タグ名 | 見た目 |
|---|---|---|
| 1 | 新商品 | アクセントのグラデーション |
| 2 | おすすめ商品 | 白ピル + アクセント文字 |
| 3 | 限定品 | アンバー |
| 4 以降 | ショップが追加したタグ | 白ピル（既定） |
追加したタグに色を付けるには、タグ ID を確認して次のように 1 ブロック足します（customize.css に書けばテンプレート本体を触らずに済みます）。
/* タグ ID 7 を「セール」の色にする */
.g-badge.tag_7,
.ec-productRole__tag.tag_7 {
color: var(--g-badge-sale-ink);
background: var(--g-badge-sale-bg);
border-color: transparent;
}
使える色の組は --g-badge-sale-* / --g-badge-limited-* / --g-badge-free-* / --g-badge-soldout-* の 4 種類です。独自の色にする場合は、背景と文字のコントラストが 4.5:1 以上になるよう注意してください。
バッジの色を変える
html/template/glass/assets/css/style.css の先頭にある --g-badge-* を変更します。
| 変数 | 用途 |
|---|---|
--g-badge-sale-bg / -ink | セール |
--g-badge-limited-bg / -ink | 限定・残りわずか |
--g-badge-free-bg / -ink | 送料無料 |
--g-badge-soldout-bg / -ink | 品切れ |
--g-badge-pill-bg / --g-badge-pill-border | 白ピルの背景と縁 |
--g-badge-neutral-ink | 白ピルの文字 |
--g-badge-pick-ink | 白ピル上のアクセント文字（ダークモードでも反転させない） |
白ピルは写真の上にも置くため、ダークモードでも白のままです。そのため --g-badge-pick-ink だけはライト用の濃い色を全モードで使います。
商品一覧のカート UI
EC-CUBE 標準の商品一覧には、商品ごとに規格セレクト・数量・カートに入れるボタンが並びます。Glass の既定では表示しません。
一覧のカートは「商品を見ずに買う」経路です。一覧に並んでいるのは写真・名前・価格だけで、容量も成分も届くかたちも分かりません。規格のある商品ならなおさらで、セレクトに並ぶ選択肢の違いが一覧からは読めません。買う判断に足りない情報のまま、ボタンだけが先に出ている状態になります。カードが縦に伸びて写真の印象が弱くなる、という見た目の問題もあります。
一覧の「カーソルを乗せる」は 2 枚目の写真を見せることに使っています（glass_rollover）。中身を知りたい人は商品ページへ進む、という流れです。
リピート購入が中心の商材（消耗品・食品など）は、お客様がすでに中身を知っているので事情が違います。その場合は 'full' に戻してください。
app/template/glass/Product/list.twig の冒頭で切り替えられます。
{% set glass_list_cart = 'none' %}
{% set glass_list_desc = true %}
glass_list_cart | 一覧に出るもの | 向いているケース |
|---|---|---|
'none'（既定） | カート UI なし | 初めて買うお客様が多い商材・ブランド・ギフト系 |
'button' | カートに入れるボタンだけ（数量は 1） | 単品購入が中心で、素早く買わせたい |
'full' | 規格セレクト・数量・カートに入れる | 消耗品・リピート購入が多い商材 |
一覧からそのままカートへ入れたい場合は、'button' か 'full' をお選びください。
glass_list_desc を false にすると商品説明（description_list）も消え、写真・商品名・価格だけの一覧になります。
'button' のときの規格あり商品
規格（サイズ・カラーなど）のある商品は、規格を選ばずにカートへ入れられません。そのため 'button' では、規格のある商品だけボタンが 「選択して購入」 になり、商品詳細ページへ移動します。文言は app/template/glass/Product/list.twig の中で変更できます。
数量入力は消したように見えますが、HTML5 の入力検証が働くよう DOM には残し、 .g-srOnly（視覚的にだけ隠すクラス）で隠しています。値は 1 のまま送信されます。
狭い画面での振る舞い
768px 未満では、'full' でも 'button' と同じ見せ方になります。 375px の画面だと 2 列のカードが 1 枚あたり約 165px しかなく、規格セレクトと数量ステッパーが収まらないためです。
- 規格セレクトと数量は隠します（送信される値はそのまま）
- 規格のある商品は「選択して購入」になり、商品詳細へ移動します
- 商品説明も隠します。小さな文字 3 行で価格が下へ押し出されるためです
元に戻したい場合は次のように上書きしてください。
@media (max-width: 767px) {
.g-shelf--full .ec-productRole__actions { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; }
.g-shelf--full .g-listCart--hasClass > .ec-productRole__btn:not(.g-listCart__toDetail) { display: block; }
.g-shelf--full .g-listCart__toDetail { display: none; }
.ec-shelfGrid__item-image + p + p:not(.price02-default) { display: block; }
}
どのモードでも変わらないこと
- 在庫切れの商品には SOLD OUT バッジが出ます（
'none'ではバッジのみ） - カードのどこをクリックしても商品詳細へ移動します
'none'ではカート追加完了のモーダルと規格連動用の JSON を出力しないため、一覧ページの HTML が少し軽くなります
商品説明を項目に分ける（成分・使い方など）
書き方は 商品ごとの説明を分けるにあります。ここでは、分けたあとの扱いだけ補足します。
クイックビューでは、見出しより前の文章だけを出します（成分や使い方まで並べると、その場で読ませる量ではなくなるためです）。
クイックビュー
写真にカーソルを乗せると「クイックビュー」のボタンが出ます。押すと ページを移らずに、大きい写真・商品説明・規格を見て、そのままカートへ入れられます。品切れの商品には表示しません。
既定ではトップページの新着商品にだけ出します。 トップは「見せる」場所なので、ページを移らずに中身を見られるほうが向いています。いっぽう商品一覧では表示しません。 あちらは「カーソルを乗せる」を 2 枚目の写真に使っているためです（glass_rollover）。同じ操作にクイックビューのボタンとすりガラスまで割り当てると、見せたい 2 枚目がすりガラスの向こうに隠れて、どちらも中途半端になります。
商品一覧でクイックビューを使いたい場合は、glass_rollover を false にして「乗せる」の役目をひとつに戻してください。
{# Block/new_item.twig ── トップの新着商品（既定 true） #}
{% set glass_new_item_quickview = true %}
{# Product/list.twig ── 商品一覧（既定 false） #}
{% set glass_quickview = false %}
指で触る画面では表示しません。 狭い画面では商品ページをそのまま開くほうが早く、戻るボタンで一覧に戻れるためです。
仕組みと、できること・できないこと
デザインテンプレートは PHP を増やせないため、専用の API は作れません。 商品ページをそのまま取ってきて、必要なところだけ並べ直しています。
そのため次のことがそのまま効きます。
- カートへの追加（フォームを作り直さず、取ってきたものをそのまま使うため、 CSRF トークンも規格の値もサーバが期待するとおりに送られます）
- 規格 1 と規格 2 の連動、規格による価格・在庫の切り替え
- 規格の札（下の「規格を押して選ぶ札にする」）と数量のステッパー
- 追加後のカート件数の更新
いっぽう、次は商品ページ側でのみ行えます。
- お気に入りへの追加、SNS シェア
- 商品説明の全文（クイックビューでは 4 行までの要約として出します）
- 写真の拡大表示（クイックビューは大きい 1 枚と小さい並びだけです）
「商品ページを見る」のリンクを必ず添えているので、続きはそちらで行えます。
規格を押して選ぶ札にする
カラー・容量・香りなどの規格は、EC-CUBE 標準ではセレクト（プルダウン）です。 Glass は押して選ぶ札に置き換えます。化粧品や衣料のように「まず色で選ぶ」商材では、畳まれたセレクトより選びやすくなります。
商品詳細ページが対象です。商品一覧のカート UI はカードが狭く、色数が多いと折り返しで崩れるため、こちらはセレクトのままにしています。
標準のセレクトに戻す書き方は 規格を標準のプルダウンに戻すにあります。
色を対応づける
EC-CUBE の規格には色を登録する欄がありません。色の丸を出したい規格には、 html/user_data/assets/css/customize.css で色をご指定ください。
.g-swatch[data-glass-swatch="ローズ"] { --g-swatch: #cf7b8b; }
.g-swatch[data-glass-swatch="ライトベージュ"] { --g-swatch: #efdcc4; }
data-glass-swatchには管理画面の規格名をそのまま書きます- 指定しなかった札は色の丸を出さず、文字だけの札になります。 容量（
150ml）や香り（ネロリ）のように色で表せないものはそのままで差し支えありません - 2 色の組み合わせにしたいときは
linear-gradient()も使えます - 「オークル」のように CSS の色名として通らない名前があるため、16 進数でご指定ください
仕組み
セレクトそのものは残しています（目には見えませんが、フォームの中にあります）。 EC-CUBE 側の在庫確認・規格 1 と 2 の連動・未選択の検証がセレクトを見ているため、札はセレクトの値を書き換えて change を投げているだけです。
セレクトを display: none にしていないのは、未選択のまま「カートに入れる」を押したときに、ブラウザが検証の吹き出しを出せず送信そのものができなくなるためです。
在庫切れの選択肢は、押せない札（取り消し線）として出します。
商品画像の見せ方
EC-CUBE はアップロードされた画像を 縮小もトリミングもせず、そのまま出力 します。そのため実店舗では、縦長・横長・正方形の写真や、白背景・背景透過・全面写真が混在しがちです。Glass では次のように受け止めます。
- 画像の入れ物に 縦横比を固定（1:1）し、読み込み時のガタつき（CLS）を防ぐ
- 既定は
cover（正方形に切り抜く）。並べたときに商品の大きさが揃って見える - 受け皿に下地と 1px の内側の縁を敷き、白背景の写真でもカードとの境界が出る
- ダークモードでは受け皿を明るいタイルに切り替え、白背景の写真が浮かないようにする
対象は商品一覧・商品詳細・カート・カートナビ・お気に入り・注文履歴・新着商品ブロックです。トピックとアイキャッチは商品写真ではないため対象外（cover）です。
切り抜かずに収める（contain）に変える
商品の全体像が大事なショップ（器・衣類・書籍・家具など）では、切り抜かずに全体を見せたほうが選びやすくなります。入れ物の縦横比は固定したままなので、一覧の並びは崩れません。余白は受け皿の色で埋まります。書き方は 商品写真を切り抜かないにあります。
このとき、受け皿の 1px の縁は自動で消えます。写真の無い余白まで囲うと、空の箱を縁取ったように見えるためです。
受け皿の色を変える
| 変数 | 用途 | 既定（ライト / ダーク） |
|---|---|---|
--g-product-fit | cover / contain | cover |
--g-product-plate | 受け皿の色（余白と背景透過部分に出る） | #ffffff / #eef0f7 |
--g-product-ring | 受け皿の内側の縁 | 薄いグレー / 薄い白 |
背景透過の PNG を使っていて、ダークモードでは暗い下地に置きたい場合は次のようにします。
:root[data-glass-theme="dark"] { --g-product-plate: #1a1f36; }