2026.9.14
季節や在庫状況に合わせてECサイトの表情を変える。
簡単な直感操作でレイアウト変更を可能にした
Shopify実装の裏側
メンバー
執筆
山下 亜加里
Dev
AFURI BREWINGのWebサイトを公開して1ヶ月ほど経ちました。
無事に日々の運用が回り始めているようで、制作陣としてもホッとしています。
今回は、制作の裏側を紹介する投稿の一つとして出したCMSの話を、
もう少し深掘りしてみることにしました。
mountとしては、久々のECサイト制作。
また、私個人としてもShopify構築は初めてでした。
そんな中で、Shopify構築という切り口から、どんな試行錯誤をしてきたのかを振り返っていきます。
目次
1. 運用者が直感的に触れるトップページ作り
今回のWebサイトでは、以下のページを既存のテーマ（テンプレート）を一切使わず、
独自のデザインに合わせてゼロから構築するフルスクラッチで開発しています。
トップページ
https://afuribrewing.com/
ABOUTページ
https://afuribrewing.com/pages/about
商品一覧ページ
https://afuribrewing.com/collections/all
商品詳細ページ
https://afuribrewing.com/products/afuri-ipa
その中でも、この記事ではAFURI BREWINGのサイトならではの部分として、
トップページのコンテンツエリアに絞って紹介します。
トップページのコンテンツエリアは、レイアウトを自由にカスタマイズできるのが特徴です。
季節や在庫状況に合わせて、
🛒 商品を多く並べて、ビールの購入を訴求するレイアウト
💐 AFURI BREWINGの思いや意思、温度感が伝わるような情緒に振ったレイアウト
📢 季節に合わせたお知らせや挨拶を伝えるレイアウト
…など、トップページの表情を変えられる仕様です。
運用時に、デザイナーやエンジニアじゃない方でも自由にレイアウトを組み替えられるように、Shopifyの標準機能であるテーマエディタを使ってこの仕組みを作りました。
※テーマエディタとは、プログラミングコードを書くことなく、画面上で直感的にオンラインストアのデザインやレイアウトをカスタマイズできるツールのことです。
では、コードに触れることなく、どのようにしてレイアウトをコントロールしているのか。
その具体的な仕組みをご紹介します。
2. デザインを破綻させない2階層のブロック構造
トップページのコンテンツエリアは、大きく分けて「行」と「カード」の2つの要素で構成しています。
縦に積まれていく「行」の中に、最大4カラム分の「カード」を横に並べる、というシンプルな設計です。
この「行」の中であれば、カードの枚数や並び順、大きさ、載せるコンテンツの種類は自由に変えられます。
その一方で、カード1枚あたりの見た目や、行によって自動で右寄せになるレイアウトルールはあえて固定にしました。
「全体の組み合わせは自由」にしつつ、「個々のパーツのデザインや余白のルールは崩さない」ようにすることで、担当者がどう組み替えてもデザインが自然と保たれる仕組みにしています。
3. 直面した技術的な壁
テーマエディタの制約
この仕組みを実現するには、Shopifyならではの技術的な制約にも直面しました。
今回はカードの横幅を1〜4カラムの間で自由に決められる仕様にしていますが、運用者が「3カラム + 2カラム」のようなカードを同じ行に入れてしまうと、合計5カラムになってレイアウトが崩れてしまいます。
本来なら、事前にLiquid（Shopifyのテンプレート言語）側でカラムの合計数を計算して、未然にエラー文を出したりしたかったのですが、調査を進めるとそれができないことがわかってきました。
そのため、行のテンプレートにはあらかじめ非表示のエラー文だけを仕込んでおき、それを表示させるかどうかの判定は別のレイヤーで行う必要がありました。
カラム数が取得できない問題
Liquidで計算できなかった理由は、Shopifyの新しいブロック構造の仕様にあります。
ブロック同士をネストできる反面、親と子のブロックがそれぞれ独立してレンダリングされる設計になっていました。
つまり、「親ブロック（行）」から「中の子ブロック（カード）」が持っている数値を直接見にいくことができませんでした。for文で子要素のデータを順番に足して合計を出す、というWeb制作ではごく当たり前のアプローチが、この環境では通用しませんでした。
どうやって解決したか？
Liquidだけで完結させるのは難しいと判断し、DOM描画後にJavaScriptで計算して判定する形をとりました。
ページ読み込み時にJSで各カードの横幅を合算し、4カラムを超えていれば、親の行要素にクラスをつけてエラー文を出すようにしています。
合計が4に満たない行を右寄せにしたり、「BEER & GOODS」などのナビゲーション用のラベルの表示を切り替えたりといった調整も、同じ仕組みで対応しています。 Liquidの仕様上どうしても対応できない部分をフロントエンドの処理でカバーすることで、なんとか理想の挙動を作ることができました。
4. 初めてのShopify構築を振り返って
私自身、Shopifyのテーマ構築もLiquidを書くのも今回が初めてでした。
プロジェクトが始まった当初は、「果たして自分にできるのだろうか」という不安の方が大きかったのを覚えています。
テクニカルディレクターの岡部に相談しながら、AIもうまく使いつつ、なるべく運用しやすい形になるよう検証を重ねました。
それでも、テーマエディタやブロック機構の独自仕様には何度も跳ね返され、思うように実装が進まず「Shopifyと全然仲良くなれない…」と悔しさを感じる場面も少なくありませんでした。。
それでも一つひとつの制約に向き合い、毎日ひたむきに手を動かし、泥臭く検証を続けていくうちに、少しずつ形になっていきました。
初めての技術でも、一つずつ検証を重ねていけば着実に前に進める。試行錯誤の末に、ようやく思い通りの挙動を実現できたときの純粋な喜びは、「エンジニアの達成感ってこういう瞬間にあるんだろうな」と実感させてくれる、とても大きな経験になりました。
