カラーミーショップのテンプレートをインストールする方法

Pocket

テンプレートの簡単インストール

ダウンロードファイルの解凍

こちらのテンプレートショップで購入したダウンロードファイルはzip形式になっているので、インストールする前に解凍作業をしておきます。

解凍方法は通常のzipファイルと同じで問題ありません。解凍ソフトをまだパソコンにインストールしていない場合は以下のリンク先からダウンロードして、インストールして下さい。

解凍ソフトでzipファイルを解凍すると、HTMLファイルなどが入ったフォルダが出てきます。カラーミーショップのテンプレートはHTMLファイルのコードをコピー&ペーストすることで使用できるようになります。

カラーミーショップの編集画面を開く

カラーミーショップは新旧で画面デザインやUIが違っているのですが、ここでは旧画面で説明したいと思います。

まずカラーミーショップにログインし、管理画面メニューからショップ作成->デザインの設定画面を開きます。現在使用しているテンプレートは残したまま新しく作る場合は、利用中のテンプレートから「テンプレートをコピー」をクリックして新しく作ります。
カラーミーショップのテンプレートを新しく作る
その後、筆アイコンからカスタマイズページを開きます。
カラーミーショップのテンプレートをカスタマイズする

現在使用中のテンプレートに上書きする場合は、利用中のテンプレートの編集ページを開きます。

テンプレートファイルのコードをコピー&ペースト

編集ページを開いたら、共通ページのHTML/CSS編集ボタンを押し、共通ページの編集画面を表示します。
カラーミーショップのHTMLを編集

共通ページのHTML編集内のコードを削除した後、ダウンロードファイル内にあるglobal.htmlを開き、コードをコピーして共通ページエリアにペーストします。
カラーミーショップのテンプレートをインストール
同様にしてglobal.cssのコードをCSS編集のエリアにペーストします。コピペするファイルとページを間違えないように注意して下さい。

  • 共通:global.html / global.css
  • トップ:top.html / top.css
  • 商品一覧:product-list.html / list.css
  • 商品詳細:product-detail.html / detail.css
  • 検索結果:product-search.html / list.css
  • 特定商取引:shop.html / shop.css
  • プライバシー:privacy.html / privacy.css
  • オプション:option.html / option.css

全てのファイルをコピー&ペーストできたら、テンプレートのインストールは完了です。

おまけ

カラーミーショップにBootstrapを導入するには以下の記事をご覧ください。
カラーミーショップをBootstrap化する方法