Works — Shopify

Shopifyストアの構築

Shopifyのテーマをカスタマイズし、ストアを一通り組み上げた学習課題です。
管理画面での設定だけでなく、Liquidテンプレートの編集やローカル開発環境の構築まで行っています。

~//works/shopify
※ 実在の店舗ではありません。
こちらは学習講座の課題として構築したデモストアです。ブランド名・商品名・価格・商品写真は講座で提供された教材の素材で、実際の販売は行っていません。ストアはパスワード保護されているため、画面キャプチャで掲載しています。
担当 テーマカスタマイズ / Liquid編集 / テンプレート設計 / ローカル開発環境の構築 使用技術 Shopify(Liquid・セクション・JSONテンプレート)/ Shopify CLI / HTML / CSS / JavaScript / VS Code 制作の種類 学習課題(デモストア 2件) お受けできること 既存Shopifyストアのデザイン調整・セクション追加・テンプレートの作り替え、デザインカンプからのテーマ実装
// 01

デモストア(発展編)

THEME CUSTOMIZE

テーマをベースに、トップページから商品一覧・ブログ・フッターまでを組み上げたストアです。セクションの追加と並び替え、見出しや余白の調整、カテゴリ導線の設計を行いました。

デモストア(発展編)のトップページ
TOPヘッダーのメニュー構成と、キャッチコピーを重ねたヒーローエリア。
おすすめ商品とカテゴリのセクション
FEATURED / CATEGORYおすすめ商品の一覧と、写真で見せるカテゴリ導線のセクション。
商品一覧(コレクション)ページ
COLLECTION絞り込み・並び替え付きの商品一覧ページ(39商品)。
カテゴリ別の商品一覧ページ
SUB COLLECTIONカテゴリごとの一覧ページ。見出しとイメージ写真を差し替えて展開。
ブログ一覧とフッター
BLOG / FOOTERブログ記事の一覧と、メニュー・メール登録・SNSを並べたフッター。
// 02

デモストア(基礎編)

JSON TEMPLATE

旧形式のテンプレートを新形式のJSONテンプレートへ作り替えることを中心に取り組んだストアです。各ページをセクション単位で編集できる構成に整え、ストア全体を日本語表示にしました。

デモストア(基礎編)のトップページ
TOP2段組みのヘッダーメニューと、ブランドの世界観を出すヒーローエリア。
ブランド紹介と新着商品のセクション
ABOUT / NEW写真とテキストを左右に組んだブランド紹介と、新着商品のセクション。
カテゴリとおすすめ商品のセクション
CATEGORY / RECOMMEND3分割のカテゴリ導線と、おすすめ商品を並べたセクション。
商品一覧ページの上部
COLLECTION見出しとイメージ写真を並べた商品一覧ページの上部(34商品)。
商品グリッドの表示
PRODUCT GRID4列で揃えた商品グリッド。画像サイズと価格表示を統一。
商品グリッドの続き
PRODUCT GRID商品点数が増えても崩れないよう、行送りと余白を調整。
制作実績の一覧へ戻る
Contact

Shopifyのカスタマイズもご相談ください

既存ストアのデザイン調整やセクション追加、テンプレートの作り替えなどに対応します。まずはお困りごとをお聞かせください。

お問い合わせをする