普段お使いのローカル環境でHTML/CSS/JSをコーディングします。

【1】Clipkitでの新規テーマの作成
Clipkitの管理画面にアクセスし、サイト管理＞テーマで新しいテーマを追加します。
テーマは、サイトのデザインやレイアウトを決定するテンプレートの集合体です。テーマを適用することで、Webサイト全体の外観や機能を変更することができます。

※テンプレートエンジン
テーマのテンプレートテンプレートエンジンにはLiquidが採用されています。
Liquidは、Shopifyが開発したテンプレートエンジンで、動的なデータをHTMLテンプレートに埋め込むために使われます。変数や条件分岐、ループを利用して柔軟なテンプレートを作成でき、ECサイトやブログなどで動的なコンテンツを簡単に表示できます。

【2】HTMLのテーマ化
HTMLをテンプレート化するための準備をします。
サイト管理＞テーマ＞テンプレート＞全体レイアウトにトップページのHTMLを記述します。（そのまま貼り付けます）
この時点では、Liquidやテンプレート構造を意識する必要はありません。

なお、テンプレート「全体レイアウト」は、ヘッダーやフッターなど全ページ共通部分を記述する必須のテンプレートです。
「トップページ」等の各テンプレートには、ページ独自の部分を記述します。
その他、共通化したい箇所は「パーシャルテンプレート」を適宜作成することも可能です。

【3】素材ファイルのアップロード
サイト管理＞ファイルでCSS、画像、JavaScript等の外部ファイルをアップロードします。
適用するテーマの下層フォルダを選択すると、後で管理がしやすくなります。

【4】素材パスのLiquidタグ化
サイト管理＞テーマ＞テンプレート＞全体レイアウトで、外部ファイルのパスをテンプレート言語のfileタグに置換します。置換ることでCDNからの更新に素材を読みこむことができます。

例：
<link rel="stylesheet" href="css/style.css" media="all">
　　↓
<link rel="stylesheet" href="{% file "/theme/example-com-2024/css/style.css  %}" media="all">

※外部ファイルのパスにドメイン名を記述しないでください、ＣＤＮが無効になり表示が遅くなります。

【5】contentタグよる、ページ個別箇所の指定
サイト管理＞テーマ＞テンプレート＞全体レイアウトで、各ページの独自部分はLiquidのcontentタグに置換します。

contentタグは、個別テンプレートを読み込み・出力するためのテンプレートタグです。

サイト管理＞テーマ＞テンプレート＞トップページ等の各テンプレートに各ページのHTMLを記述しLiquidのfileタグに置換します。

各テンプレートで動的に表示したい箇所（例えば新着記事一覧やカルーセル等）をLiquidでプログラミングします。

テンプレート以外で作成するページは、サイト管理＞ページでHTMLとテンプレート言語を記述して作成します。

サイト管理画面の以下の個所でHTML/CSS/JS/画像を編集します。

「全体レイアウト」「トップページ」「カテゴリー記事一覧ページ」「タグ記事一覧ページ」「記事詳細ページ」等のテンプレートがあり、HTMLおよびテンプレート言語を編集することができます。
その他、記事アイテム毎のテンプレート、共通化するHTMLに利用するパーシャルテンプレートを追加することができます。
詳しくはこちらのFAQをご覧ください。

HTMLで利用するCSS、画像、JavaScript等の外部ファイル、およびrobots.txt等のファイルをアップロードすることができます。
管理画面からファイル内の記述を編集することができ、変更履歴が残ります。
CSSについて、拡張子scssのファイルの利用も可能です、scssをアップロード又は編集保存する際に拡張子cssのファイルにコンパイルされます。詳しくはこちらのFAQをご覧ください。

コレクションはカルーセル/スライダー、編集部のおすすめ記事、バナー画像エリアなど、サイト管理者の任意で表示内容を変えたい場合に便利な機能です。
コレクションに登録できる要素タイプとして記事、画像、HTMLがありますので、様々な用途に応用できます。

JavaScriptのajaxで表示したいHTML、拡張子rss、xml、jsonなどのページを作成することができます。

※ランキング、記事一覧といったCDNおよびアプリケーションのキャッシュの影響を最小限に留めたい箇所は、この機能でHTMLを生成するようにしておくと便利です。
※利用規約ページ等の更新頻度の非常に低いHTMLページは、記事編集画面のHTMLアイテムに記述してページ作成することを推奨します。

初期構築が完了後、1回のみ無償で本番環境（サイト）をコピーしてテスト環境を提供いたします。
2回目以降のコピーは有償で対応可能です。

改修を行う場合はテスト環境で作業および確認の上、本番環境に手動作業で反映する形になります。

Clipkitは複数のテーマを登録しておくことが可能ですので、サイトリニューアルといった大規模な改修を行う場合は、新規にテーマを作成することを推奨いたします。

現行サイトのCSSはまったく利用しないようなページを作成する場合は、新規にテーマを作成すると便利です。
各コンテンツおよび各カテゴリにテーマを紐付けることができます。