デザイン管理

ページレイアウト-レイアウト設定

レイアウト設定ではブロック設定で登録した項目を実際のページに反映させるための設定を行います。
ブロック設定の詳細はこちら

レイアウトの設定方法

レイアウトの設定方法

①画面左のメニューバーより > 【デザイン管理】 > 【ページレイアウト】 > 【レイアウト設定】をクリックしてください。

 

②左記が独自にレイアウト設定が可能なページ一覧です。左右サイドエリアはPC画面のみ設定が可能です。

③ブロック設定で登録した項目を反映させたいページの「設定」リンクをクリックします。
ブロック設定の詳細はこちら

 

レイアウトの設定方法

④ページに対してメタディスクリプションやメタキーワードを登録したい場合、こちらから設定が可能です。

⑤デフォルトヘッダーエリアです。こちらはすでにデフォルトのヘッダーが設定されておりますが、ショップ様独自のレイアウトに変更が可能です。⑫のデフォルトフッターエリアも同様です。

⑥独自ヘッダーエリアです。こちらはデフォルトでの設定はございませんが、必要に応じて独自で表示を追加することが可能です。以下、⑦~⑪のエリアについても同様です。

⑦左サイドメニューエリアです。

⑧左サイドバナーエリアです。

⑨右サイドメニューエリアです。

⑩右サイドバナーエリアです。

⑪独自フッターエリアです。

⑫デフォルトフッターエリアです。
※表記されている、「プライバシーポリシー | 利用規約・免責事項 | 特定商取引法に基づく表記」は例となり、実際には表示されない項目となります。

 

レイアウトの設定方法

⑬各エリアの表示は「ON/OFF」のスイッチで編集が可能です。
※デフォルトエリアをOFFにした場合、表示そのものがされなくなりますため、ご注意ください。

※左右のサイドエリアはPCのみ設定が可能です。また、ページごとに設定の条件がございますため、詳細は下記リンクよりご確認ください。

左右サイドエリアの設定条件

⑭各エリアにブロック設定で登録いただいた内容を反映させる場合、「登録」リンクをクリックします。

 

レイアウトの設定方法

⑮設定したいブロックを検索します。

⑯設定したいブロックの「登録」リンクをクリックします。

 

レイアウトの設定方法

⑰ブロックが反映されると左記のようになります。「変更」「削除」リンクよりいつでも内容の変更・削除が可能です。

⑱「PCプレビュー」「SPプレビュー」をクリックいただくと、設定したブロックのPCとスマートフォン上での表示をプレビューすることが可能です。

⑲レイアウトを設定したい個所の設定が完了したら、「保存」ボタンをクリックします。

 

レイアウトの設定方法

⑳設定が完了するとフロント画面では左記のような見え方になります。

 

左右サイドエリアの設定条件
条件 設定可能ページ
左右どちらも設定が可能・マイアカウントトップ
・お問い合わせ入力画面
・お問い合わせ確認画面
・お問い合わせ完了画面
・マイアカウント注文履歴画面
・マイアカウント定期注文履歴画面
・登録情報編集画面
・パスワード変更画面
・アドレス帳画面
・通常商品詳細画面
・コース商品詳細画面
・頒布会商品詳細画面
左右どちらかに設定が可能・商品一覧画面
・お気に入り画面
設定不可・カート画面
・購入完了画面
・購入確認画面
・注文情報入力画面

 

レイアウト設定のページ詳細

カート画面

①カート画面

 

マイアカウントトップ

②マイアカウントトップ

 

購入完了画面

③購入完了画面

 

購入確認画面

④購入確認画面

 

注文情報入力画面

⑤注文情報入力画面

 

すべての商品

⑥すべての商品

 

問い合わせ入力

⑦お問い合わせ入力画面

 

問い合わせ確認画面

⑧お問い合わせ確認画面

 

お問い合わせ完了画面

⑨お問い合わせ完了画面

 

マイアカウント注文履歴画面

⑩マイアカウント注文履歴画面

 

マイアカウント定期注文履歴画面

⑪マイアカウント定期注文履歴画面

 

登録情報編集画面

⑫登録情報編集画面

 

パスワード変更画面

⑬パスワード変更画面

 

アドレス帳画面

⑭アドレス帳画面

 

お気に入り画面

⑮お気に入り画面

 

通常商品詳細画面

⑯通常商品詳細画面

 

コース商品詳細画面

⑰コース商品詳細画面

 

頒布会商品詳細画面

⑱頒布会商品詳細画面

 

マイアカウントログイン画面(お客様情報登録画面)

⑲マイアカウントログイン画面(お客様情報登録画面)

 

各画面ごとのURL例

ページ名 URL
商品一覧画面https://ドメイン名/merchandises
通常商品詳細画面https://ドメイン名/products/▲▲
※▲の箇所は商品ごとにユニークな数字が振られます。
コース商品詳細画面https://ドメイン名/regular_courses/▲▲
※▲の箇所は商品ごとにユニークな数字が振られます。
頒布会商品詳細画面https://ドメイン名/distribution_courses/▲▲
※▲の箇所は商品ごとにユニークな数字が振られます。
カート画面https://ドメイン名/cart
ご注文情報入力画面https://ドメイン名/checkout/register
購入内容確認画面https://ドメイン名/checkout/confirm
購入完了画面https://ドメイン名/checkout/complete
お客様情報登録画面https://ドメイン名/sign_in
マイアカウントトップ画面/マイアカウントログインページhttps://ドメイン名/user
マイアカウント注文履歴画面https://ドメイン名/user/orders
マイアカウント定期注文履歴画面https://ドメイン名/user/course_orders
マイアカウント登録情報確認画面https://ドメイン名/user/edit
パスワード変更画面https://ドメイン名/user/password
アドレス帳画面https://ドメイン名/user/user_addresses
お問い合わせ登録画面https://ドメイン名/contacts/new
お問い合わせ内容確認画面https://ドメイン名/contacts/confirm
お問い合わせ登録完了画面https://ドメイン名/contacts/complete
お気に入り画面https://ドメイン名/favorites

 

    この投稿は役に立ちましたか? 役に立った 役に立たなかった 7 人中 3 人がこの 投稿 は役に立ったと言っています。