#はじめに
今回ご紹介する内容は、Shopifyを既に使用し、基本的なコーディングの知識があることを前提とし、オリジナルページの開発にスポットを当てたいと思っている為、初めてShopifyを触ってみたという方に対しては、情報不足な所が多くなると思いますが、予めご了承ください。

#Shopifyとは（簡単に）
世界中で1,000,000のショップに導入されているECプラットフォームです。
テンプレートがすでにある為、誰でも簡単にお洒落なECサイトを製作できます。
テーマの種類も豊富にあり、自分好みのテーマがきっと見つかるはずです！
EC機能もとても充実していますが、今回は、オリジナルページの作成方法をご紹介します。

#オリジナルページ開発　導入編
テーマをカスタマイズする場合は、必ずテーマを複製してから行いましょう！
**[アクション] > [コードを編集]**するから、コード編集画面に移動できます。

##各ディレクトリのご紹介
Shopifyのテーマは、画面左の７つのディレクトリで構成されています、各ディレクトリに、コードが書かれたテーマファイルが格納されています。

ディレクトリ名
Layout	ページ単位のレイアウト。ヘッダーやフッターなどのテンプレートの大枠となる要素
Templates	商品ページやお問い合わせページなど、各ページのテンプレート
Sections	各ページのブロック要素
Snippets	各ブロック要素のアイコンなどのさらに細かいパーツ
Assets	cssやjsファイル
Config	サイト設定の為の.jsonファイル
Locales	言語設定の為の.jsonファイル

この中で主に使用するのは、以下になります。

ディレクトリ名
Templates	商品ページやお問い合わせページなど、各ページのテンプレート
Sections	各ページのブロック要素
Assets	cssやjsファイル

#オリジナルページ開発　実践編
では実際にコードを編集していきましょう。
まずは**「新しいtempleteを追加する」**から新しいページのテンプレートを追加します。
目的から、「page」を選択すると、titleとcontentのみのファイルが生成されます。
こちら不要であれば全て削除して頂いても大丈夫です。
ここからは我々の得意分野ですね。
あとはここに好きなようにhtmlの記法でコーディングしていただければ、
オリジナルページが作成できます！

またオリジナルのスタイルを当てたい場合は、Assetsディレクトリで、新しいcssファイルを追加してください。
オリジナルのcssファイルを参照するときは、Shopifyオリジナルの記法ですが、該当ファイルに以下のように記述していただければ大丈夫です。

sample.html

<link rel="stylesheet" href="{{ 'sample.css' | asset_url }}">

<h1 class="sample_title">サンプルタイトル</h1>
<p class="sample_text">サンプルテキスト</p>

例えば以下のようにスタイルを当てたとして、

sample.css

.sample_title {
  color: red;
  text-align: center;
}

.sample_text {
  color: blue;
}

ちゃんと反映されていることが確認できます。

#さいごに
最後まで見ていただきありがとうございます。
今回オリジナルページを1からつくる方法をご紹介しましたが、そのほかにも、
トップのセクションを、他ページに使うことも可能だったりします。
こちらの紹介をすると、またさらに深い話となり、長くなってしまいますので、
また改めてご紹介します。

#参考