商品の見せ方を変える

商品一覧のバッジ、カードの見せ方、規格の選び方、クイックビュー、商品写真の切り抜き方を、ここでまとめて変えられます。

ここは [コンテンツ管理] → [ページ管理] → 商品一覧ページを開いて、冒頭の数行を直します(開くといまの中身が入っています)。

一覧のバッジ

一覧のバッジ

【抜粋】 冒頭の「表示設定」の数行だけを直します。

{% set glass_new_days  = 14 %}      {# NEW を出す日数。0 で非表示 #}
{% set glass_low_stock = 5 %}       {# 「残りわずか」を出す在庫数。0 で非表示 #}
{% set glass_low_stock_count = true %}  {# 「残り 3 点」と数を出すか #}
{% set glass_max_tags  = 2 %}       {# 写真に重ねる商品タグの最大数 #}

一覧カードの見せ方

商品一覧
{% set glass_list_cart = 'none' %}
値見え方
'none'(既定)写真・商品名・価格だけ
'button'カートに入れるボタンだけ(数量は 1)
'full'規格のセレクトと数量まで出す

glass_list_desc を false にすると説明文を表示しません。 glass_rollover を false にすると、カーソルで 2 枚目の写真に切り替えません。

規格を札にする/セレクトに戻す

規格の札

既定は押して選ぶ札です。標準のセレクトに戻すときは [CSS管理] に 1 行。

:root { --g-swatches: off; }

色の丸を出したい規格には、[CSS管理] で色を指定します。

.g-swatch[data-glass-swatch="ローズ"] { --g-swatch: #cf7b8b; }

クイックビューをやめる

クイックビュー

商品一覧ページの glass_quickview を false にします。

商品写真の切り抜き方

一覧のカード

既定は正方形に切り抜きます。全体を収めたいときは [CSS管理] に 1 行。

:root { --g-product-fit: contain; }

続けて読む