【徹底解説】Shopify アプリ「シンプル画像レイアウト｜お手軽フォトギャラリー＆グリッド」でできること

【徹底解説】Shopify アプリ「シンプル画像レイアウト｜お手軽フォトギャラリー＆グリッド」でできること

このアプリは、管理画面でギャラリーを組み立てて、テーマエディタで選んで貼るという作りをしています。
画像の配置もピンの位置も色の指定も、すべてアプリ側で決めてから、
テーマには「どのギャラリーを出すか」だけを伝えます。

記事では、管理画面の 4 つのタブとすべての設定項目を、実際の画面と一緒に順番に見ていきます。
画面に書かれていない挙動（上限に達したときの動き、操作によって結果が変わる場面、
契約が無いときに何が制限されるか）もあわせて補足します。

後半には、同じことをテーマのコードで書こうとするとどこまでできるのかも載せました。

シンプル画像レイアウトの仕組み

ギャラリーは「ストアのデータ」として独立している

このアプリのいちばんの特徴は、ギャラリーがテーマから切り離されていることです。

テーマのセクションで画像を並べる場合、画像も並び順もそのセクションの設定として保存されます。
別のページで同じ並びを使いたければ、もう一度設定し直すことになります。

このアプリでは、ギャラリーはストア側のデータとして保存されます。
テーマエディタ側は「どのギャラリーを表示するか」を選ぶだけです。

結果として、次のことができます。

• 同じギャラリーを複数のページに置ける（それぞれでブロックを追加して同じものを選ぶ）
• テーマを変えてもギャラリーは残る（新しいテーマでブロックを追加して選び直すだけ）
• 内容の更新が 1 か所で済む（アプリ側で直せば、貼ってあるすべての場所に反映される）

2 段構えなので、片方だけでは表示されない

裏を返すと、ギャラリーを作っただけではストアに出ません。
テーマエディタでブロックを置き、そこでギャラリーを選んで保存する必要があります。

この 2 段構えが、最初につまずきやすいところです。
「作ったのに出ない」と感じたときは、まずテーマエディタ側を確認してください。

画像はストアのファイルに保存される

アップロードした画像は、Shopify のコンテンツ > ファイルに保存されます。
アプリのサーバーには置きません。

そのため、上げた画像はストアの資産としてそのまま残り、
商品ページやブログなど他の場所でも使えます。

運用に効いてくるところ

機能の一覧ではなく、日々の運用で何が変わるかという角度で整理します。

• レイアウトの検討が早くなります。 並べ方を変えるとその場でプレビューが切り替わるので、
  ストアに反映して確認する往復が不要になります。
• 写真から商品への導線が作れます。 コーディネート写真にピンを置けば、
  お客様が商品名を検索し直す必要がなくなります。
• 季節の入れ替えが複製で済みます。 ギャラリーを複製しておけば、
  差し替えに失敗しても元に戻せます。
• 拡大表示に別アプリが要りません。 ライトボックスが組み込まれているので、
  アプリを増やさずに済みます。
• 枚数が多くても重くなりません。 最初に見せる枚数を絞れるので、
  数十枚のギャラリーでも初期表示を軽く保てます。
• スタッフに引き継ぎやすくなります。 管理画面が日本語で、
  設定ごとに推奨サイズや補足が画面に出ます。

向いていないケース

用途が合わない場面もあるので、先に書いておきます。

動画を並べたいストアには向きません。扱えるのは画像だけです。
動画を混ぜたギャラリーを作りたい場合は、別のアプリを検討することになります。

お客様が投稿した写真を集めたいストアにも向きません。
このアプリは店側が画像を用意して並べるものなので、UGC の収集機能はありません。

1 ページに数百枚を並べたいストアでは上限に当たります。
1 つのギャラリーに置ける画像は 1024 枚までです。

契約せずに使い続けたいストアでは機能が絞られます。
ご契約が無いあいだは、ギャラリー 1 つ・画像 12 枚・グリッドのみになり、
ホットスポットは保存されません。

料金プラン

プランは 1 つです。

• 月額 $4.99
• 年額 $49.99（2 か月分無料）
• 7 日間の無料体験

ご契約が無い状態でも、次の範囲までは使えます。

• ギャラリー 1 つまで
• 1 ギャラリーあたり画像 12 枚まで
• レイアウトはグリッドのみ
• ホットスポットは保存されません

メイソンリー・カルーセル・モザイクと、ホットスポットが有料プランの機能です。

インストールと初回セットアップ

導入の入口は、管理画面の左下にある「設定」です。

「アプリと販売チャネル」へ進むと Shopify App Store への導線があります。
そこでアプリ名を検索してください。

権限の確認画面で何を求められるか

求められるのは、商品・テーマ・ストアのファイルへのアクセスです。

商品はピンにひも付けるため、テーマはブロックを追加するため、
ファイルはアップロードした画像を「コンテンツ > ファイル」へ保存するために使います。
お客様の個人情報にはアクセスしません。

入れた直後の状態

インストールが終わると、ギャラリーが 1 つも無い状態で管理画面が開きます。
テーマにも何も追加されていないので、この時点ではストアの見た目は変わりません。

ここから先は、次の 2 つを両方やって初めて表示されます。

1. アプリ側でギャラリーを作り、写真をアップロードする
2. テーマエディタでブロックを置き、そのギャラリーを選んで保存する

片方だけでは何も出ません。 どちらを忘れても画面にエラーは出ないので、
「入れたのに変わらない」と感じたら、まずこの 2 つが揃っているかを確認してください。

アプリ管理画面の構成

サイドバーは「ギャラリー一覧」と「設定」の 2 つです。
日本語で使っているときは「よくある質問」も表示されます。

ギャラリーの編集画面は、さらに 4 つのタブに分かれます。

• レイアウト … 並べ方・列数・余白・画像の配置・画像 1 枚ごとの設定
• デザイン … カードの見た目・拡大表示・ピンの見た目
• ホットスポット … 写真の上のピン
• 表示と読み込み … 続きの読み込み

各画面の説明

ギャラリー一覧

作ったギャラリーがすべてここに並びます。
各行には 1 枚目の画像のサムネイル、ギャラリー名、画像の枚数、レイアウト名が出ます。
名前をクリックすると編集画面が開きます。

操作は 4 つ用意されています。

ギャラリーを作成 を押すと、初期値のギャラリーがその場で 1 件でき、編集画面へ切り替わります。
先に名前を付ける画面は挟まりません。

編集 は名前のクリックと同じ動きです。複製 は中身を丸ごと写した別のギャラリーを作ります。
画像の並びもピンの座標も引き継ぐので、差し替え前の退避に使えます。

削除 はギャラリー本体と、それが持っていた画像の設定・ピンをまとめて消します。
ただし画像そのものはストアのファイルに残るため、上げ直す必要はありません。

ギャラリー一覧からテーマへ渡す

一覧の下にあるカードから、テーマエディタへ直接移動できます。

テーマを選択 のプルダウンには、ストアにあるテーマが並びます。
いま公開しているテーマには「（公開中のテーマ）」と付くので、
下書きのテーマで試したいときも取り違えません。

テーマに追加 は、ブロックを置いた状態のテーマエディタを新しいタブで開きます。
テーマをプレビュー のほうはブロックを追加せず、そのテーマの TOP ページを開くだけです。

ここで知っておきたいのが、追加されるのは必ず TOP ページであることです。
商品ページやコレクションページに置きたい場合は、
テーマエディタでそのページを開いて手動でブロックを追加します。

カードの下には、テーマのバージョンによっては選択欄が空になる場合がある旨の案内が出ています。
その場合も手動追加で対応できます。

ギャラリー編集 — 基本

ギャラリー名は、管理画面とテーマエディタの選択欄に出る名前です。
お客様には見えません。

「TOP 用ルックブック」「商品ページ用」のように、貼る場所が分かる名前にしておくと
テーマエディタで選び間違えません。ギャラリーが増えるほどここが効いてきます。

レイアウトタブ — 並べ方

ギャラリーの見た目を決める、いちばん大事な設定です。4 つから選べます。

• グリッド（初期値）… すべて同じ大きさで格子状に並びます
• メイソンリー … 高さがバラバラのまま、隙間なく積み上がります
• カルーセル … 横スクロールで 1 列に並びます
• モザイク（マス目に配置） … マス目に置き、隣り合うマスをまとめて大きくできます

それぞれの見え方を、実際のプレビューで比べてみます。

グリッドは大きさが揃うので、商品写真のように規格の揃ったものに向きます。

メイソンリーは高さを揃えないので、縦横比がバラバラの写真をそのまま活かせます。

カルーセルは横に流れるので、縦の場所を取りません。

ご契約が無いあいだはグリッドだけが選べます。
選択欄の下に、有料プランの機能である旨の案内が出ます。

レイアウトタブ — 列数と余白

パソコンの列数（初期値 3）とスマートフォンの列数（初期値 2）を、
それぞれスライダーで決めます。

スマートフォンで 3 列以上にすると 1 枚が小さくなりすぎるため、2 列のままをおすすめします。
モザイクのときは、マス目の列数にも「パソコンの列数」が使われます。

画像同士の余白は写真と写真のあいだの間隔で、初期値は 8px です。
0 にすると写真が隙間なくつながり、1 枚の大きな絵のように見えます。

1マスの形は写真を収める枠の縦横比です。
選ぶと「推奨サイズ: 横幅 1800 px 以上」のように、用意すべき画像の大きさが表示されます。
この数値を目安に画像を準備すると、拡大表示でもぼやけません。

画像の合わせ方は、枠に写真をどう収めるかです。
「枠を埋めて切り取る」（初期値）と「全体を入れて余白を作る」が選べます。
商品写真のように端が切れてはいけないものは、全体を入れる側にしてください。

カーソルを重ねたときの効果は、マウスを写真に重ねたときの動きです。初期値は拡大です。
カーソルを重ねている間だけ動き、「動きを減らす」設定にしている端末では動きません。

キャプションの表示は、写真に付けた説明文をどこに出すかです。
写真の下、写真に重ねる、出さない、から選べます。

レイアウトタブ — カルーセルのときだけ出る設定

並べ方で「カルーセル」を選ぶと、4 つの設定が追加で表示されます。

• 自動で送る … 放っておいても次の写真へ進みます
• 送る間隔 … 自動で送るときの間隔（秒）
• 端まで行ったら先頭に戻る … 最後の写真の次に 1 枚目へ戻ります
• 現在位置を点で表示する … 何枚目を見ているかを点で示します

自動で送ると読んでいる途中で動いてしまうので、
じっくり見てほしいギャラリーではオフのままが読みやすくなります。

レイアウトタブ — モザイクのマス目配置

モザイクを選ぶと、マス目の行数（最大 8 行）と盤面が表示されます。

盤面の使い方は次のとおりです。

1. タイルを押すと選択されます
2. まわりの ＋ ボタンで選択範囲を広げます（角の ＋ は縦横まとめて広がります）
3. 範囲を決めたら、下のフォームから置く画像を選びます

ここで知っておきたい挙動が 2 つあります。

1 つは、マス目を縮めても、はみ出した画像は消えないことです。
「未配置」に戻るだけなので、行数を戻せばまた置けます。

もう 1 つは、タイルを押したときの結果がレイアウトによって違うことです。
モザイクでは「画像を外す」（配置の解除）になり、画像そのものは残ります。
押し直せば戻せるので確認は出ません。
一方、グリッド・メイソンリー・カルーセルでは「画像を削除」になり、
実体が消えるため必ず確認のダイアログが出ます。

レイアウトタブ — 画像 1 枚ごとの設定

盤面の下に、画像ごとの設定が並びます。

• キャプション … 写真に添える説明文です。「キャプションの表示」で出す場所を決めます
• 代替テキスト … 画像が表示できないときに読み上げられる説明です。検索エンジンも読みます
• 画像のリンク先 … 写真を押したときの移動先です。空欄なら拡大表示が開きます

並べ替えと削除もここから行います。
前へ移動 / 後ろへ移動で並び順を 1 つずつ入れ替え、
画像を外す（モザイク）または削除（その他）で外します。

画像の追加は、盤面の末尾にあるグレーのタイルから行います。
画像をアップロード（パソコンから複数選択）と
ストアのファイルから選ぶ（すでに上げてある画像）の 2 通りです。

1 つのギャラリーに置ける画像は 1024 枚まで、
ご契約が無いあいだは 12 枚までです。

デザインタブ — カードの見た目

角の丸み（初期値 0px）は写真の四隅を丸めます。
影（初期値なし）は写真の下に影を落とします。

角を丸めて影を付けると、写真がカードのように浮いて見えます。
ストアの雰囲気を引き締めたいときは、どちらも初期値のままが馴染みます。

デザインタブ — 拡大表示

• クリックで拡大表示する（初期値オン）… 写真を押すと大きく表示します
• 拡大表示にキャプションを出す（初期値オン）… 拡大したときに説明文も出します
• 拡大表示の背景の濃さ（初期値 90）… 拡大中の背景をどれだけ暗くするか

拡大表示（ライトボックス）はアプリに組み込まれているので、別のアプリは要りません。

写真を押して商品ページへ飛ばしたいときは、
「クリックで拡大表示する」をオフにして、画像ごとの「画像のリンク先」を設定してください。

デザインタブ — ホットスポットの見た目

ピンと吹き出しの見た目もデザインタブで決めます。

• ピンの形 … 点や丸など（初期値は点）
• ピンの色 … #RRGGBB の形式で指定します（初期値 #e53e3e）
• ピンの大きさ … ピンの直径（初期値 20）
• 吹き出しの出し方 … ホバー（初期値）またはタップ
• 吹き出しの背景色 … 初期値 #1a202c
• 吹き出しの文字色 … 初期値 #ffffff
• 吹き出しの文字サイズ … 初期値 13

色は #RRGGBB の形式で入力してください。形式が違うとその場で注意が出ます。

写真の色が濃いストアではピンが埋もれやすいので、
ピンの色を写真に無い色（白や蛍光色）にすると見つけてもらいやすくなります。
スマートフォン中心のストアでは、吹き出しの出し方をタップにしておくと確実です。

ホットスポットタブ

写真の上にピンを置いて、商品へリンクするタブです。

まず上のサムネイルから、ピンを置く画像を選びます。
サムネイルの右下には、その画像に置いてあるピンの数が出ます。

画像をクリックするとピンが追加され、ピンはドラッグで動かせます。

ホットスポットタブ — パソコンとスマートフォンで別々に置く

この画面でいちばん大事なのが、パソコン / スマートフォンの切り替えです。

ピンの位置は、この 2 つで別々に保存されます。
画面の幅が変わると写真の切り取られ方も変わるため、
同じ座標では商品からずれてしまうからです。

両方のタブで位置を決めてください。 片方だけだと、もう片方でピンがずれます。
パソコンで置いたあと、スマートフォンのタブに切り替えて位置を直す、という順番が確実です。

ホットスポットタブ — ピン 1 個ごとの設定

ピンの数は画像の下に「2 個のホットスポット」のように出ます。

商品を選ぶ を押すと商品ピッカーが開き、選んだ商品のサムネイルと名前が行に表示されます。
この状態になると、吹き出しの中身も遷移先も商品から自動で決まります。
ひも付けを解くときは 商品を外す です。

商品を選ばない場合に使うのが テキスト と リンク先 の 2 つです。
テキストは吹き出しに出す文章、リンク先は押したときの移動先になります。
商品を選んでいるあいだ、この 2 つは無視されます（画面にもその案内が出ます）。

行の右端にあるゴミ箱アイコンで、そのピンだけを消せます。

コーディネート写真から商品ページへ送りたいなら商品を選ぶ、
「スタッフのおすすめ」のような説明を出したいだけならテキストを使ってください。

1 枚の画像に置けるピンは 128 個までです。
上限に達すると、その旨が表示されて追加できなくなります。

なお、ホットスポットは有料プランの機能です。
ご契約が無いあいだは、置いたピンが保存されません。

表示と読み込みタブ

• 続きの読み込み … すべて表示するか、途中で区切るかを選びます
• 最初に見せる枚数 … 区切る場合、最初に表示する枚数です
• 1回で追加する枚数 … 「もっと見る」を押したときに増える枚数です

枚数の多いギャラリーでは、最初に見せる枚数を絞ると読み込みが軽くなります。
画面にも、枚数が多いギャラリーで絞れる旨の案内が出ます。

プレビュー

どのタブにも下にプレビューが付いています。
保存しなくても、現在の設定でどう見えるかが分かります。

デスクトップ表示とモバイル表示をボタンで切り替えられます。
スマートフォンの列数を変えたときは、必ずモバイル表示で確認してください。

設定

サイドバーの「設定」です。上部にはギャラリー一覧と同じ
「テーマにギャラリーを追加」のカードがあります。

言語設定では、管理画面の表示言語を選びます。
「言語を選択」で選び、変更する を押すと切り替わります。
日本語・英語を含む 20 言語に対応しています。

選んだ言語はブラウザに保存されます。 別のパソコンで開くと既定の言語に戻ります。
スタッフごとに表示言語を変えられる、という言い方もできます。

おすすめアプリには、当社が提供している他のアプリが並びます。

テーマへの追加

ギャラリーを作っただけでは、ストアには出ません。
テーマエディタでブロックを置き、どのギャラリーを出すかを選ぶ必要があります。

TOP ページ以外に置きたいときの手順は次のとおりです。

1. Shopify の管理画面で「オンラインストア > テーマ」を開き、「カスタマイズ」を押します
2. 上のページ選択から、置きたいページを開きます
3. 置きたい場所で「ブロックを追加」→「アプリ」→ このアプリのブロックを選びます
4. 位置をドラッグで調整し、「保存」を押します

ストアフロントの見た目を変える

テーマエディタ側の設定は 4 つだけです。
見た目の細かい調整は、すべてアプリの管理画面側で行います。

• ギャラリー … 表示するギャラリーを選びます
• 上の余白 … 0〜120px を 4px 刻みで指定できます（初期値 0）
• 下の余白 … 0〜120px を 4px 刻みで指定できます（初期値 0）
• 追加 CSS … このギャラリーにだけ適用される CSS を書けます

「ギャラリー」を選ばないと、ストアには何も表示されません。
ブロックを置いただけでは中身が空のままです。

同じページに複数のギャラリーを置きたいときは、
ブロックを必要な数だけ追加して、それぞれ別のギャラリーを選んでください。

実際のストアでは、次のように表示されます。

赤い点がホットスポットのピンです。押すと吹き出しが出て、商品ページへ進めます。

運用の組み立て方

画面の説明だけでは見えにくい、実際の回し方をまとめます。

ギャラリー名に「貼る場所」を入れる

ギャラリー名は管理画面とテーマエディタの選択欄にしか出ません。
だからこそ、テーマエディタで選ぶときに迷わない名前にしておくのが実用的です。

• TOP ルックブック 2026 秋冬
• 商品ページ用 コーデ写真
• About ページ 工房の風景

ギャラリーが 5 つを超えたあたりから、この付け方の差が出てきます。

推奨サイズを見てから写真を用意する

「1マスの形」を選ぶと、その下に推奨サイズが表示されます。
写真を集める前にここを見ておくと、あとで撮り直しになりません。

拡大表示を使う場合はとくに重要です。
一覧では十分に見えても、拡大した瞬間にぼやけることがあります。

ピンは「パソコン → スマートフォン」の順で置く

パソコンで置いたピンは、スマートフォンには反映されません。
置き終わったら必ずタブを切り替えて、モバイル側でも位置を決めてください。

確認はプレビューのモバイル表示で行えます。
実機を出さなくても、ピンが商品からずれていないかを見られます。

差し替える前に複製しておく

季節ごとに写真を入れ替えるなら、複製してから差し替えるのが安全です。
複製は画像もホットスポットも丸ごとコピーするので、
うまくいかなかったときに元のギャラリーへ戻せます。

テーマエディタ側で選ぶギャラリーを切り替えるだけで、表示を戻せます。

枚数が増えてきたら「続きの読み込み」を使う

20 枚を超えたあたりから、初期表示の重さが気になり始めます。
「最初に見せる枚数」を 12 枚程度に絞り、
残りは「もっと見る」で読み込む設定にすると、表示が軽くなります。

契約前に試すときは「グリッド 1 つ 12 枚」で組む

ご契約が無いあいだはギャラリー 1 つ・画像 12 枚・グリッドのみです。
この範囲で試作しておけば、契約後にレイアウトを切り替えるだけで完成します。

用途別の設定例

設定の組み合わせで見た目が大きく変わるので、代表的な使い方を挙げます。

TOP ページのルックブックを大きく見せる

主役の 1 枚を大きく置いて、まわりを小さな写真で固める構成です。

• 並べ方 … モザイク（マス目に配置）
• パソコンの列数 … 4
• マス目の行数 … 3〜4
• 画像同士の余白 … 0〜4px
• 角の丸み … 0px

マス目をまとめて主役を作り、余白を詰めると 1 枚の大きな絵のように見えます。
余白を 0 にすると写真同士が接するので、コラージュのような印象になります。

商品写真をきれいに揃えて並べる

規格の揃った商品写真には、グリッドが向きます。

• 並べ方 … グリッド
• 1マスの形 … 正方形（1:1）
• 画像の合わせ方 … 全体を入れて余白を作る
• キャプションの表示 … 写真の下に出す

商品写真は端が切れると困るので、「全体を入れて余白を作る」にしてください。
「枠を埋めて切り取る」のままだと、縦長の商品が上下で切れます。

縦の場所を取らずに新着を見せる

ページの途中に差し込むなら、横スクロールが収まりよく見えます。

• 並べ方 … カルーセル
• 自動で送る … オフ
• 現在位置を点で表示する … オン
• 端まで行ったら先頭に戻る … オン

自動で送ると読んでいる途中で動いてしまうため、オフのままが読みやすくなります。
何枚あるか分かるように、点の表示はオンにしておくのがおすすめです。

コーディネート写真から商品を売る

ショッパブルギャラリーとして使う場合の組み合わせです。

• ホットスポット … 各アイテムにピンを置き、商品を選ぶ
• クリックで拡大表示する … オフ
• ピンの色 … 写真に無い色（白など）
• 吹き出しの出し方 … タップ（スマートフォン中心のストア）

拡大表示をオフにすると、写真を押したときに商品ページへ進めるようになります。
オンのままだと、押したときにライトボックスが開いてしまいます。

パソコンとスマートフォンの両方でピンの位置を決めるのを忘れないでください。

写真点数の多いギャラリーを軽く保つ

30 枚を超えるギャラリーでは、読み込みの設定が効いてきます。

• 続きの読み込み … 途中で区切る
• 最初に見せる枚数 … 12
• 1回で追加する枚数 … 12

最初に 12 枚だけ表示し、「もっと見る」で 12 枚ずつ増える形になります。
初期表示が軽くなるぶん、ページの表示速度にも効きます。

うまく表示されないときは

つまずきやすい場面と、その確認手順をまとめます。

ストアにギャラリーが出ない

次の順に確認してください。

1. テーマエディタでブロックの「ギャラリー」を選びましたか。 選んでいないと何も出ません
2. テーマエディタで「保存」を押しましたか。 押していないと反映されません
3. ギャラリーに画像が 1 枚でも入っていますか
4. ブロックを置いたページを見ていますか。 「テーマに追加」は TOP ページに追加します

もっとも多いのは 1 番です。ブロックを置いただけでは中身が空のままだからです。

テーマエディタの選択欄が空になる

テーマのバージョンによっては、ブロックの自動追加や選択欄の表示がうまくいかないことがあります。
その場合はテーマエディタで手動でブロックを追加してください。
アプリの設定画面にも、その旨の案内が出ています。

スマートフォンだけピンの位置がずれる

ホットスポットタブの「スマートフォン」でも位置を決めてください。
ピンの座標はパソコンとスマートフォンで別々に保存されます。

確認はプレビューの「モバイル表示」で行えます。

ピンを置いたのに保存されない

ホットスポットは有料プランでのみ保存される機能です。
未契約の状態では、画面上にピンを置けても保存時に落ちます。
保存したあとに開き直してピンが消えていたら、この状態を疑ってください。

メイソンリーやカルーセルが選べない

未契約の状態では、並べ方の選択肢に「グリッド」しか出ません。
選べないのではなく、選択肢そのものが表示されない作りです。
モザイクも同じ扱いなので、4 種類を使い分けたい場合は契約が必要になります。

画像を追加できない

ご契約が無いあいだは 1 ギャラリーあたり 12 枚までです。
ご契約中でも 1024 枚が上限です。

写真がぼやける

「1マスの形」を選んだときに出る推奨サイズを確認してください。
その数値より小さい画像を使うと、引き伸ばされてぼやけます。
とくに拡大表示を使う場合は、一覧で十分に見えても拡大した瞬間に粗さが出ます。

保存したのにストアの見た目が変わらない

ストアフロントは Shopify 側でキャッシュされるため、反映まで少し時間がかかることがあります。
ブラウザのスーパーリロード（Windows は Ctrl+F5、Mac は Cmd+Shift+R）を試してください。

コードで自作する場合

同じことをテーマのコードで書くとどうなるかを見ておきます。

グリッドを並べるだけなら難しくない

画像を格子状に並べるだけなら、Liquid と CSS で書けます。
セクションの schema に image_picker を並べ、CSS Grid で配置する形です。

<div class="my-gallery">
  {% for block in section.blocks %}
    <img src="{{ block.settings.image | image_url: width: 1200 }}"
         alt="{{ block.settings.alt }}" loading="lazy">
  {% endfor %}
</div>

<style>
  .my-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
</style>

section.blocks でブロックを回し、CSS Grid で 3 列に並べています。
列数を設定から変えたいなら、grid-template-columns の数値を
section.settings の値で差し替えることになります。

メイソンリーから急に難しくなる

高さの違う画像を隙間なく積むには、CSS だけでは足りません。
column-count を使う方法はありますが、並び順が縦方向になるという癖があります。

.my-gallery {
  column-count: 3;
  column-gap: 8px;
}
.my-gallery > * {
  break-inside: avoid;
  display: inline-block;   /* これが無いと段の外へ飛ぶ */
  width: 100%;
}

見た目は近づきますが、「左から右へ」の並び順にしたい場合は JavaScript で
各要素の高さを測って配置し直すことになります。
画像の読み込み完了を待つ必要もあるため、実装は一気に重くなります。

ホットスポットは座標の持ち方から設計が要る

写真の上にピンを置くには、画像に対する相対座標を持つ必要があります。
絶対座標で持つと、画面幅が変わった瞬間にずれます。

<div class="hotspot-wrap" style="position:relative">
  <img src="{{ image | image_url: width: 1600 }}" alt="">
  {% for pin in pins %}
    <button class="pin"
            style="left:{{ pin.x }}%; top:{{ pin.y }}%"
            data-url="{{ pin.url }}">
    </button>
  {% endfor %}
</div>

<style>
  .pin { position: absolute; transform: translate(-50%, -50%); }
</style>

座標をパーセントで持ち、transform で中心をピンの位置に合わせています。
ここまでは書けますが、パソコンとスマートフォンで別の座標を持つとなると、
座標の組を 2 つ用意して画面幅で切り替える処理が要ります。

さらに、座標を入力する画面も作らなければなりません。
数値を手で打つ形にすると、位置合わせが現実的でなくなります。
画像の上をクリックして置ける UI が必要になり、ここが実装の山場です。

自作とアプリの線引き

• 格子状に数枚並べるだけ … テーマのコードで足ります
• メイソンリー・モザイク・ピンの配置・拡大表示・続きの読み込み … アプリの領分です

他の画像ギャラリーアプリとの使い分け

画像ギャラリー系のアプリは数が多く、併用する意味はほとんどありません。
同じ役割のアプリを 2 つ入れても、ギャラリーの管理場所が 2 か所になるだけです。

選び分けの軸になるのは、次の 3 点です。

1. 管理画面の言語

日本語で運用しているストアでは、日々触る画面が日本語かどうかが効いてきます。
設定項目が多いアプリほど、この差が積み上がります。

2. 画像以外も扱うかどうか

動画やお客様の投稿写真まで扱いたいなら、それに対応したアプリを選ぶことになります。
このアプリが扱うのは画像だけです。

3. レイアウトの自由度

格子状に並べるだけでよいのか、1 枚だけ大きく見せたいのか。
後者ならマス目に配置できる仕組みが要ります。

なお、このアプリを入れてもテーマや他のアプリのギャラリーは壊れません。
テーマ拡張のブロックとして動くため、置いた場所にだけ表示されます。
乗り換えを検討する場合は、既存の表示を残したまま別の場所で試してから切り替えられます。

まとめ

「シンプル画像レイアウト」は、
ギャラリーをストア側のデータとして持ち、テーマエディタで選んで貼るアプリです。

4 つのレイアウトをプレビューしながら選べて、
写真の上のピンから商品ページへ送れます。
ピンの座標をパソコンとスマートフォンで別々に持てるので、
どちらの端末でも商品の位置に合わせられます。

拡大表示が組み込みなので別アプリは要らず、
枚数が増えても「続きの読み込み」で初期表示を軽く保てます。

マス目を縮めても画像は消えない、複製で元に戻せる、
プレビューで保存前に確かめられる。
どれも「やり直しができる」ことを優先した作りです。

• Shopify App Store

おすすめ Shopify アプリ

当社では、この記事のアプリ以外にも Shopify アプリを提供しています。

• シンプルチェックアウトリンク｜広告・メール・DMから直接購入 …
  商品と割引コードを適用済みのリンクを作り、お客様をそのまま購入画面へ案内できます。
  QR コードの出力にも対応しています。
• シンプル外部購入リンク｜お手軽アフィリエイト対応 …
  商品ページに Amazon・楽天などへのボタンを並べられます。
  Shopify で販売しない商品はカートボタンを隠して、カタログとして使えます。

いずれも管理画面は日本語で、7 日間の無料体験からお試しいただけます。