# テーマにHTML等を反映

**URL:** <https://community.shopify.com/t/html/13395>\
**Category:** Shopify テーマ\
**Created:** [May 24, 2020, 10:24am UTC](https://community.shopify.com/t/html/13395 "2020-05-24T10:24:07Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

HTMLで作成済みの一式をShopifyテーマへどう反映するかが主題。静的HTML一式をそのままassetsに置くだけでは表示されず、Shopifyテーマは単純な静的ファイル群ではなく、Liquidテンプレートを含むテーマ構造の理解が必要と説明されている。\n\n現在の具体的な回答は以下。\n- js・css・画像をassetsに入れるだけでは不十分\n- theme.liquid などから各ファイルを読み込む必要がある\n- 既存HTMLは、テーマの骨組みに沿って貼り付け・移行していく形が推奨\n\n手軽に反映する専用アプリについては不明のまま。代替として、Theme Kit（テーマ開発用のコマンドラインツール）が案内されている。\n\n進め方としては、Theme Kitのnewコマンドでスケルトン状態のテーマを作成し、まずストアで正常動作を確認してから、手元のHTML・CSS・JSを段階的に組み込むのがよいとされている。議論は解決済みに近いが、具体的な実装手順は提示された参考ブログ・動画の確認が前提。

<div class="post-metadata">

**Author:** ![muroken](https://avatars.discourse-cdn.com/v4/letter/m/8edcca/32.png) [@muroken](https://community.shopify.com/u/muroken)\
**Post date:** [May 24, 2020, 10:24am UTC](https://community.shopify.com/t/html/13395/1 "2020-05-24T10:24:07Z")

</div>

初めてshopifyをさわっています。

HTMLでコーディングしたデータ一式があるのですが、

テーマに対してどのように反映するのがベストなのでしょうか？

テーマをダウンロードし、assetsフォルダ内にjsやcssやimgなどフォルダを入れてアップロードしてみましたが、

表示されませんでしたので、すべてばらばらにしてあげるものなのでしょうか？

またこのような作り方で手軽にテーマへ反映できるアプリなどはございますでしょうか？

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [May 25, 2020, 2:46pm UTC](https://community.shopify.com/t/html/13395/2 "2020-05-25T14:46:52Z")

</div>

Shopifyのテーマは単純な静的ファイルの集まりではないので、その構造や仕組みを理解した上で、カスタマイズする必要があります。

こちらのブログと動画で解説していますので、適宜必要な部分を参照いただければと思います。  
[https://www.shopify.jp/blog/partner-shopify-app-development](https://www.shopify.jp/blog/partner-shopify-app-development)  
[https://www.youtube.com/playlist?list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe](https://www.youtube.com/playlist?list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe)

> テーマをダウンロードし、assetsフォルダ内にjsやcssやimgなどフォルダを入れてアップロードしてみましたが、

表示されませんでしたので、すべてばらばらにしてあげるものなのでしょうか？

Assetsに入れただけではダメで、theme.liquidからインクルードしたりする必要があります。

> またこのような作り方で手軽にテーマへ反映できるアプリなどはございますでしょうか？

アプリの存在は不明ですが、上記のコンテンツで説明されている Theme Kitというコマンドラインツールがあります。  
これのnew というコマンドでスケルトン状態のテーマができますので、まずそれを作ってストアに反映し、動作するのを確認した上で、お手持ちのHTML一式の内容を貼り付けていくなどして移行するのが良いと思います。
