ShopifyでオリジナルECサイトを構築できるようになる講義

Shopifyの無料テーマ「Horizon」を使用して、ECサイトを構築する方法をレクチャーします。

テーマエディターを使ったノーコードでのサイト構築を中心に、ノーコードだけでは実装できない部分については、VS Codeを使用してLiquid・HTML・CSSなどをカスタマイズする方法まで学んでいただけます。

「Shopifyを使ってサイトを作ってみたい」

「テーマエディターの使い方だけでなく、コードを使ったカスタマイズもできるようになりたい」

「Shopify案件に対応できるようになりたい」

という方におすすめの講義です。

この講義で学べること

Shopifyの基本操作

Shopifyの管理画面やテーマエディターの使い方から、ページ・商品・コレクション・ブログなど、ECサイト制作に必要な基本的な操作を学びます。

Horizonを使ったノーコード構築

Shopifyのテーマ「Horizon」を使用し、セクションやブロックを組み合わせながらサイトを構築します。

できる限りノーコードで制作し、クライアント自身でも更新しやすいサイトを目指します。

開発環境の構築

Shopify CLIとVS Codeを使用して、Shopifyテーマをローカルで編集できる開発環境を構築します。

テーマの取得・プレビュー・編集・反映まで、実際の制作で使用する基本的な開発フローを学びます。

Shopifyテーマのフォルダ構成

Shopifyテーマを理解するために、以下のような基本フォルダの役割について解説します。

• assets

• blocks

• config

• layout

• locales

• sections

• snippets

• templates

「どのファイルを編集すればよいのか」が判断できるようになることを目指します。

Liquidの基礎

Shopify独自のテンプレート言語「Liquid」について、実際のテーマを編集しながら基本的な書き方を学びます。

変数、条件分岐、繰り返し、filter、renderなど、テーマカスタマイズでよく使用する内容を中心に解説します。

schema（スキーマ）のカスタマイズ

セクションのschemaをカスタマイズし、テーマエディターからテキスト・画像・余白・レイアウトなどを変更できる仕組みを学びます。

単純にコードを書くのではなく、クライアントが管理画面から編集しやすいサイトを作ることを目指します。

VS Codeを使ったカスタマイズ

テーマエディターだけでは対応できないデザインや機能については、VS Codeを使用してカスタマイズします。

Liquid・HTML・CSSを中心に、必要に応じてJavaScriptも使用しながら実装方法を解説します。

実際にサイトを作りながら学びます

講義では、単純にShopifyの機能を説明するだけではなく、実際にECサイトを構築しながら進めていきます。

参考サイトとして、以下のようなサイトを制作できるレベルを目標とします。

制作サンプル

https://fleur-sereine-upvwn0ux.myshopify.com/

閲覧パスワード

ildewn

商品一覧・商品詳細・ブログ・FAQ・お問い合わせ・各種固定ページなど、実際のECサイト制作に必要なページを作りながらShopifyの仕組みを学んでいきます。

この講義の特徴

ノーコードだけ、コーディングだけに偏らず、

「ノーコードで実装できるところはテーマエディターで構築し、必要なところだけコードでカスタマイズする」

という実際のShopify制作を意識した進め方を行います。

最終的には、Shopifyの基本的な仕組みを理解し、自分で判断しながらECサイトを構築・カスタマイズできるようになることを目標とします。

こんな方におすすめです

• Shopifyをこれから学びたい方

• HTML・CSSの知識をShopify制作に活かしたい方

• Shopifyのテーマカスタマイズを学びたい方

• ノーコードだけではなくLiquidも学びたい方

• Shopify案件に対応できるようになりたい方

• ポートフォリオとしてShopifyサイトを制作したい方

一緒に実際のサイトを制作しながら、Shopifyの構築方法を学んでいきましょう。