Goungyeol テーマ（ビューティーショップ）
Goungyeol テーマ（ビューティーショップ）
化粧品・ビューティーショップのための Zittme 公式テーマ Goungyeol（goungyeol）のマニュアルです。ビューティーのセレクトショップのように白い余白を広く取り、角張ったカードに商品写真を大きく載せ、ローズフューシャのポイントとブラッシュアイボリーで色を整えました。Sinsunhan テーマと同じ骨組み（テーマ内蔵メインページ、繰り返しフィールドによるセクションの組み立て）を使うので、ここにない内容は Sinsunhan テーマのドキュメントもあわせてご覧ください。
構成
| 構成要素 | 場所 | 役割 |
|---|---|---|
| レイアウト | themes/goungyeol/layouts/goungyeol | サイトの骨格 + テーマ内蔵メインページ |
| コマーススキン | themes/goungyeol/modules/commerce | ショップホーム・一覧・詳細・カート・注文・マイショッピング・特集 |
| 掲示板スキン | themes/goungyeol/modules/board | リスト型・カード型・Web マガジン型・FAQ 型 |
| 会員・メッセージ・通知センター・システムメッセージスキン | themes/goungyeol/modules/{member, communication, ncenterlite, message} | ログイン・マイページ・メッセージ・通知・システム案内 |
| 予約・zittme Pay・お問い合わせ・ナレッジ Q&A スキン | themes/goungyeol/modules/{reservation, zittme_pay, contact, kin} | 該当モジュールがインストールされたサイトでのみ適用 |
インストールと適用
- ストアからインストールするか、
themes/goungyeolに解凍します。 - 管理者 > デザイン設定で Goungyeol を選んで適用します。
- コマースモジュールがあれば、ショップメニュー・ヘッダー検索・トップページの商品セクションが自動で連携されます。ショップモジュールが複数ある場合は、レイアウト設定 > メイン構成の「ショップモジュールのアドレス（mid）」に mid を入力します。
- ブランド行：商品の要約（summary）項目が、カードと詳細のブランド行として表示されます。要約にブランド名だけを短く書いておくと、セレクトショップのように「ブランド / 商品名」の 2 行表記になります。（Streetlab テーマは商品名の中の
/で分ける方式なので、互いに異なります。） - 星評価・レビュー数：コマースの商品レビューの平均評価とレビュー数をカードに一緒に表示します。レビューのない商品には表示しません。
- ランキング番号・セールバッジ：ランキングセクションは順位番号を、セール商品は割引率バッジをカードの上に重ねて表示します。
- レイアウト設定 > トップ画面 > ビジュアルスライドに、写真・タイトル・説明・ボタンを入力したスライドをもう一つ登録します。（スライダーに表示したくない場合は、スライドの順序を後ろにして「ビジュアルスライダーの表示」で枚数を調整してください。）
- メインページセクションに「エディトリアル」を追加し、出典にそのスライド番号を入力します。
- セクションタイトルを空欄にすると基本タイトルが、入力するとその文言が小さなラベルとして表示されます。
- 一覧：カテゴリータブ・検索・並べ替え。カードにブランド行（要約）・星評価・セールバッジ。
- 詳細：ブランド行・商品名・価格・ポイント特典・送料・オプション・今すぐ購入・カート。商品管理の「追加情報」は要約の下に表で表示されます。
- 特集・カート・注文・マイショッピング：Sinsunhan テーマと同じ流れで、決済は zittme Pay スキンへ続きます。
推奨環境：Zittme 1.0.1 以上、コマース 0.2.16 以上。レスポンシブテーマなので、モバイル専用ビューはオフにすることを推奨します。
商品カードのブランド行・星評価・ランキング
テーマ内蔵メインページ（メイン構成）
レイアウト設定 > メイン構成タブの「メインページセクション」繰り返しフィールドで、順番に組み立てます。一つもなければ基本構成を使います。
| セクションの種類 | 内容 | 出典（source） | 件数（count） |
|---|---|---|---|
| ショップカテゴリータイル | 第 1 階層カテゴリーへのショートカット。アイコンは「カテゴリーアイコン」繰り返しフィールドで設定 | - | タイル数 |
| おすすめ / 新商品 / セール / 人気商品 | 商品カードのグリッド | - | 商品数 |
| 日替わり特価 | 割引率上位の商品が毎日一つずつローテーション | - | - |
| 開催中の特集カード | コマースの特集を画像カードで表示 | - | カード数 |
| リアルタイム人気ランキング | 購入数 → 閲覧数の順で 1～N 位 | - | 順位数 |
| バナーバンド | ビジュアルスライドの画像を中間バナーとして再利用 | 何番目のスライドかの番号 | - |
| エディトリアル | 写真 1 枠 + 文章 1 枠。ビジュアルスライドの画像・タイトル・説明・ボタンをそのまま使います | 何番目のスライドかの番号（空欄なら 1） | - |
| 掲示板の最新投稿 | 掲示板の投稿一覧。mid をカンマで複数入力すると多段表示 | 掲示板 mid（例：notice,board） | 投稿数 |
エディトリアルセクションの作り方
ショップ画面（コマーススキン）
フッター
レイアウト設定 > フッターで、サイト紹介文、カスタマーセンターの電話・営業時間・メールアドレス、SNS アドレス、下部の案内文、事業者・連絡先情報、著作権表記を入力します。
レイアウト設定の全項目
基本
ロゴ画像・ダークモード用ロゴ・ロゴテキスト・ポイントカラー・本文の最大幅（1060・1180・1320）・メニューバーの幅・メニューバーの色・モバイルのダークモードボタンの位置・モバイルの言語選択の位置・カラーモード
トップ画面
ビジュアルスライダーの表示・自動切り替えの間隔・ビジュアルスライド（背景画像・タイトル・説明・ボタン名・ボタンリンク・文言の配置）
メイン構成
カテゴリーアイコン・ショップモジュールのアドレス（mid）・メインページセクション（種類・タイトル・出典・件数）
本文・サイド
統合検索の使用・サイドにログインボックスを表示
フッター
サイト紹介文・カスタマーセンター電話番号・営業時間・お問い合わせメールアドレス・SNS アドレス 4 種・下部の案内文・事業者・連絡先情報・著作権表記