ショップサーブの運営･管理 ショップ作成での決済・配送方法の設定から独自デザインでのサイト制作まで解説

レスポンシブ対応のテンプレートを追加してHTML･CSS編集

ECサイトの大枠デザインとなるレスポンシブ対応のテンプレートを選択してHTML･CSS編集します。このページではショップサーブの管理画面で出来るテンプレート追加方法や追加したテンプレートのHTML･CSS編集方法を解説します。

レスポンシブ対応のシンプルなテンプレートを選択する

ECサイトの基本デザインとなるテンプレートを選択します。ショップサーブの管理画面にてデザイン設定＞テーマの選択＞カスタムテンプレートのタブへ進むと下図のテンプレート選択画面が表示されます。白基調でレスポンシブ対応なのはレスポンシブ-ホワイトかレスポンシブ(上級者)-ホワイトの2択ですので好きな方を選択します。

選択したテンプレートでHTMLのカスタマイズをする

前述の通りレスポンシブのテンプレートを追加した後はデザイン設定＞テーマ＞HTMLのカスタマイズへ進んでヘッダ･フッタのHTMLを編集ボタンを押すとHTML編集が出来ます。ヘッダにはお店ページ、商品ページ、フリーページ･店長日記、カートと4種類ありますが基本的には全て同じHTMLソースを入れます。ヘッダメニューは一般的なグローバルメニューを入れることが多いです。追加したテンプレートのCSS編集はデザイン設定＞テーマ＞CSSのカスタマイズへ進んで利用中のテーマから作成するボタンを押してCSS編集できます。