こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回は、ショップデザイン『ベーシックモード（PC）』の【WIDELY（ワイドリー）】テンプレートを利用する際のガイドラインご紹介します！
【WIDELY】サンプルショップ
【WIDELY】を適用するときの注意点
まずはじめに、【WIDELY】の特徴をご紹介します。
各タイトルは、テキストで設定可能です。
・「Shopアクセス統計レポート」カウンター機能は、使用することができません。
・初期値では、商品詳細画面の[PRICE]タグ、名入れグループ機能、定期購入機能は、対応していません。※タグを差し替え、または追記することで利用することができます。
【WIDELY】は、従来のカスタマイズテンプレートとは違い、モダンでシンプルなデザインを実現するため、ショップ様に設定していただく項目が5つあります。
このテンプレートを利用する際は、ガイドラインに沿ってあらかじめ各項目を設定しましょう。
【WIDELY】テンプレートガイドライン
【設定1】おすすめ商品のカテゴリー名を非表示にする
【ショップ作成】>【デザインの設定】>【トップページ商品配置の設定面】へ
「おすすめ商品表示設定」のカテゴリー名の表示を表示しないに変更して保存しましょう。
・初期設定では、トップページのおすすめ商品にカテゴリー名が表示されますが
【WIDELY】テンプレートでは、非表示にしていただくことを推奨しています。
【設定2】商品画像のサイズを設定する
【ショップ作成】>【デザインの設定】>【トップページ商品配置の設定面】へ
「縮小商品画像サイズ設定」の画像サイズを「200ピクセル」に変更して保存しましょう。
・オンラインショップの一番の要である商品画像を大きく見せるのが、このテンプレートの特徴になります。商品画像サイズの設定をおこないましょう。
表示個所は、オンラインマニュアル「画像表示サイズ」をご参照ください。
【設定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】SNSアカウントへのリンクを入力する
多くのショップがSNSのアカウントを活用されています。
このテンプレートではあらかじめ「instagram」「Facebook」「X（旧Twitter）」のアカウントへのリンクが入力されていますので、アカウントをお持ちの場合は設定してください。
【ショップデザイン】>【トップページ編集】> 【下段メニュー管理】へ
・初期値では、「X（旧Twitter）」「instagram」「Facebook」のアイコンが表示されています。各アカウントがない場合は、ソースから削除していただく必要があります。
削除していただく箇所は以下を参考にしてください。
【すべてのアカウントのアイコンを削除する場合】
【一部のアカウントのアイコンを削除する ※例：instagramの場合】
【設定5】デザインの細かい設定をする
【1】【ショップ作成】>【デザインの設定】>【基本デザイン設定】へ
「ショップレイアウト選択」を「左揃え」に設定しましょう。
「タイトルイメージの余白設定」を「余白を入れない」に設定しましょう。
【2】【ショップデザイン】>【トップページ編集】> 【中央画面管理】へ
エディター下の「左側メニューとメインページの間の空白を無くす」にチェックを入れましょう。
・こちらの設定は必須ではありませんが、より整ったデザインのために設定しておいたほうがよいでしょう。
設定完了！
いかがでしたでしょうか。
ベーシックモード（PC）の【WIDELY】テンプレートをご利用の際にお役立てください。
それではまた！
