こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回は、ショップデザイン『ベーシックモード（PC）』の【Fashion（ファッション）】テンプレートを利用する際のガイドラインご紹介します！
【Fashion】サンプルショップ
【Fashion】を適用するときの注意点
まずはじめに、【Fashion】の特徴をご紹介します。
そのため「左側メニュー管理」に入れた内容は反映されません。
・ショップデザインの「タイトルイメージ管理」で画像設定されても反映されません。
各タイトルは、テキストで設定可能です。
・「Shopアクセス統計レポート」カウンター機能は、使用することができません。
・初期値では、定期購入機能は、対応していません。※タグを差し替え、または追記することで利用することができます。
【Fashion】は、従来のカスタマイズテンプレートとは違い、商品画像がより大きく映えるようなデザインを採用しているため、ショップ様に設定していただく項目が4つあります。
このテンプレートを利用する際は、ガイドラインに沿ってあらかじめ各項目を設定しましょう。
【Fashion】テンプレートガイドライン
【設定1】商品画像のサイズを設定する
【ショップ作成】>【デザインの設定】>【トップページ商品配置の設定面】へ
「縮小商品画像サイズ設定」の画像サイズを「270ピクセル」に変更して保存しましょう。
・オンラインショップの一番の要である商品画像を大きく見せるのが、このテンプレートの特徴になります。商品画像サイズの設定をおこないましょう。
表示個所は、オンラインマニュアル「画像表示サイズ」をご参照ください。
【設定2】フッターに必要な情報を入力する
【ショップデザイン】>【トップページ編集】>【下段メニュー管理】へ
下段メニューに「配送・送料について」「支払い」情報を入力する箇所がありますので、ご自分のショップの情報を入れてください。
・送料がいくらなのか、どんな決済方法が使えるのかなど購入者がすぐ確認できるようにしましょう。
【設定3】利用案内・会社案内・特定商取引法ページを設定する
その1. 利用案内ページを設定する
【STEP1】【ショップ作成】>【ショップ情報の設定】>【利用案内設定】へ
「画面デザイン設定」を「項目ごとに内容を編集」に設定し、「利用案内の項目設定」を項目ごとに入力してください。
【STEP2】【ショップ作成】>【デザインの設定】>【利用案内画面デザイン】へ
「5番」に設定しましょう。
【利用案内画面をオリジナルのデザインにしたい場合】
画面デザイン設定を「ページ全体をHTML編集」にしてHTML編集してください。
▼下のソースをコピーして、お使いください。
|
1 2 3 4 5 6 7 8 |
<div class="main-contents" id="guide"> <h2>利用案内</h2> <div class="inner-contents"> こちらに内容を記載してください </div> </div> |
その2. 会社案内ページを設定する
【ショップ作成】>【ショップ情報の設定】>【会社概要の設定】へ
▼下のソースをコピーして、お使いください。
|
1 2 3 4 5 6 7 8 |
<div class="main-contents" id="about"> <h2>ショップについて</h2> <div class="inner-contents"> こちらに内容を記載してください </div> </div> |
その3. 特定商取引法ページを設定する
【ショップ作成】>【ショップ情報の設定】>【特定商取引法設定】へ
画面デザイン設定を「ページ全体をHTML編集する」にしてHTML編集してください。
▼下のソースをコピーして、お使いください。
|
1 2 3 4 5 6 7 8 |
<div class="main-contents" id="about"> <h2>特定商取引に関する法律に基づく表示</h2> <div class="inner-contents"> こちらに内容を記載してください </div> </div> |
・利用案内・会社案内・特定商取引法ページは、購入者にとっては、ショップの顔となるページになります。
テンプレートにあわせたデザインにそろえることで、統一感のある案内ページができます。
【設定4】デザインの細かい設定をする
【1】【ショップ作成】>【デザインの設定】>【基本デザイン設定】へ
「ショップレイアウト選択」を「左揃え」に設定しましょう。
「タイトルイメージの余白設定」を「余白を入れない」に設定しましょう。
【2】【ショップデザイン】>【トップページ編集】> 【中央画面管理】へ
エディター下の「左側メニューとメインページの間の空白を無くす」にチェックを入れましょう。
・こちらの設定は必須ではありませんが、より整ったデザインのために設定しておいたほうがよいでしょう。
設定完了！
いかがでしたでしょうか。
ベーシックモード（PC）の【Fashion】テンプレートをご利用の際にお役立てください。
それではまた！
