Shopifyで商品ページにPDFカタログをめくって読めるフリップブックで表示できるアプリについて徹底解説|ご利用ガイド
はじめに — PDF を 1 冊登録するだけで、商品ページがカタログ売り場になる
Shopify(ショッピファイ)は、世界 175 か国以上で使われているネットショップ作成サービスです。Shopify アプリは、その Shopify のストアに機能を後付けするための拡張機能で、Shopify App Store からインストールして使います。
「シンプルPDFカタログ|お手軽PDFフリップブック表示」(英語名: UR: PDF Flipbook Catalog)は、商品ごとに PDF を 1 冊登録し、商品ページのボタンから 全画面のフリップブック(ページをめくって読む形式) で見せる Shopify アプリです。
数字でいうと、登録するのは商品 1 つにつき PDF 1 冊(20 MB まで)、設定するのはボタンの見た目 14 項目、対応する言語は管理画面・ビューアとも 20 言語 です。8 ページのカタログなら、ボタンを押してから約 2 秒で 1 ページ目が開きます。PDF そのものは Shopify の「ファイル」に置かれ、商品ページの Liquid が直接その URL を読むため、アプリのサーバーが止まってもボタンとビューアは動き続けます。
- 管理画面の商品一覧から「PDF を登録」を押して PDF を選ぶだけで、商品ページにボタンが出ます
- お客様がボタンを押すと、ページを離れずに全画面でカタログをめくれます
- パソコンでは見開き 2 ページ、スマートフォンでは 1 ページずつ表示します
- 拡大・縮小、ダウンロード(表示/非表示を選択可)、キーボード操作に対応しています
- ボタンの文言・スタイル・配置・色・文字サイズ・余白はテーマエディタで調整できます
- 商品ページで最初に読み込むのはボタン用の小さなファイルだけなので、ページの表示速度を落としません
料金は 月額 4.99 ドル(年額プランは 49.99 ドルで、2 か月分お得です)。インストールから 7 日間は無料 でお試しいただけます。
アプリストア: https://apps.shopify.com/ur-pdf-flipbook-catalog

「シンプルPDFカタログ」でできること — Shopify の商品ページで PDF をフリップブック表示
主な特徴は次の 5 つです。
- 管理画面から、商品ごとに PDF を 1 冊登録できます
- 商品ページで、PDF をページがめくれる全画面フリップブックとして開けます
- パソコンでは見開き 2 ページ、スマートフォンでは 1 ページずつ表示し、ズームにも対応します
- ボタンの文言・スタイル・色・サイズを変えたり、ダウンロードの可否を切り替えたりできます
- 1 クリックでテーマに追加できます
商品ページで PDF カタログをめくって読みたいときは
商品説明の下などに「カタログを見る」ボタンが出ます。お客様が押すと画面全体がビューアになり、本をめくるようにページが動きます。ページ番号、前後ボタン、拡大・縮小、ダウンロード、閉じるボタンがツールバーに並びます。

商品ごとに別の PDF を見せたいときは
アプリの管理画面に商品が一覧で並び、商品ごとに「PDF を登録」できます。カタログでも取扱説明書でも仕様書でも、商品に合った 1 冊をそれぞれに登録します。

スマートフォンでも読みやすくしたいときは
画面の幅が狭いときは自動で 1 ページ表示に切り替わります。設定は要りません。拡大ボタンで 1.5 倍・2 倍にも拡大できます。

ボタンの見た目をストアに合わせたいときは
テーマエディタのブロック設定で、ボタンの文言・塗りつぶし/枠線・左/中央/右・横幅いっぱい・色・文字サイズ・余白を変えられます。コードは書きません。

テーマへの追加を 1 クリックで済ませたいときは
アプリの「設定」画面でテーマを選んで「テーマに追加」を押すと、商品ページにブロックが追加された状態でテーマエディタが開きます。

インストールの手順
Shopify アプリのインストール手順は、どのアプリでも共通です。
- Shopify 管理画面の左下にある「設定」を開きます

- 「アプリと販売チャネル」を開き、「Shopify App Store」を押します

- App Store の検索窓に「UR: PDF Flipbook Catalog」と入力して検索します。公開から日が浅いあいだは検索結果の下のほうに出ることがあるので、見つからないときは アプリストアのページ を直接開いてください

- アプリの詳細ページで「インストール」を押します

- 「アプリをインストール」の権限確認で「インストール」を押すと、インストールが完了してアプリの管理画面が開きます。このアプリが使う権限は「商品」(PDF の参照を商品に保存するため)、「オンラインストア」(テーマの一覧を出すため)、「ファイル」(PDF を Shopify のファイルとして保存するため)です。顧客や注文のデータには一切触れません

最初にやる設定 — 3 ステップで商品ページにボタンが出るまで
インストール直後は、商品ページにはまだ何も表示されません。次の 3 つを行うと表示が始まります。順番はどちらが先でもかまいませんが、ブロックの追加と PDF の登録の 両方 がそろって初めてボタンが出ます。
ステップ 1: テーマにブロックを追加するには
左のメニューの「設定」を開き、「テーマに PDF フリップブックを追加」のカードで「テーマを選択」からテーマを選び、「テーマに追加」を押します。公開中のテーマには「(公開中のテーマ)」が付き、最初から選ばれています。

押すと新しいタブでテーマエディタが開き、商品ページ(product テンプレート)のメインセクション(Horizon なら「商品情報」セクション)の末尾にブロックが追加された状態になります。位置はドラッグで動かせます。右上の「保存」を押すまでテーマには残らないので、必ず保存してください。
自動追加がうまくいかないテーマでは、テーマエディタで商品ページを開き、「商品情報」セクションの「ブロックを追加」→「アプリ」タブから「UR: PDF Flipbook Catalog」を選んで手動で追加できます。

ステップ 2: 商品に PDF を登録するには
左のメニューの「PDF フリップブック」を開き、商品一覧で PDF を付けたい商品の「PDF を登録」を押します。開いたモーダルで「PDF を選択」から PDF ファイルを選び、「アップロード」を押します。

ステップ 3: 商品ページで確認するには
その商品のページを開くと、ブロックを置いた位置にボタンが出ます。押すとビューアが開きます。

登録してから商品ページに出るまで、数十分から数時間かかることがあります(理由は「うまく表示されないときは」で説明します)。管理画面の一覧にファイル名が出ていれば登録は済んでいます。
管理画面でできること — 画面ごと・操作ごとの説明
アプリの管理画面は「PDF フリップブック」と「設定」の 2 画面です。左のメニューで切り替えます。管理画面の表示言語が日本語で、開発元の「よくある質問」が公開されているときだけ、3 つ目として「よくある質問」が並びます(この記事の時点ではまだ出ていません)。
「PDF フリップブック」画面
インストール直後に開く主画面です。上から順に、反映に関する注意バナー、商品の検索欄、商品一覧、ページ送りが並びます。

反映に関する注意バナー
一番上に「登録した PDF が商品ページに反映されるまで、時間がかかることがあります。」と常に表示されています。消せません。商品ページのボタンは Shopify の CDN(配信サーバー)にキャッシュされた商品データを読むため、登録・差し替え・削除のどれも、ストアフロントに反映されるまで遅れが出ることがあります。
商品を検索したいときは
一覧の上の「商品を検索」欄(薄く「商品名で検索」と表示)に語句を入れて「検索」を押すと、商品名にその語句を含む商品だけが一覧に出ます(部分一致、大文字・小文字は区別しません)。検索語は URL に付くので、ブラウザの「戻る」で検索前に戻れます。

一致する商品が無いときは「商品がありません」「検索条件に一致する商品がありません。」と出ます。欄を空にしてもう一度「検索」を押すと全商品に戻ります。ストアに商品が 1 つも無いときは「ストアに商品を追加すると、ここに一覧が出ます。」と出ます。

商品一覧の見かた
1 ページに 50 件ずつ、Shopify の商品一覧と同じ順(新しい商品が上)で並びます。列は次の 3 つです。

| 列 | 内容 |
|---|---|
| 商品 | サムネイルと商品名。画像の無い商品は仮のアイコンが出ます。下書きやアーカイブ済みの商品も並びます |
| 登録状態です。未登録なら「—」、登録済みならファイル名と容量(例: 779.7 KB)が出ます。このほかに 2 つのバッジがあります(下記) | |
| 操作 | 未登録の商品には「PDF を登録」、登録済みの商品には「差し替え」と「削除」が出ます |
PDF 列に出る 2 つのバッジは、次の状態を表します。
| バッジ | 意味 | どうすればよいか |
|---|---|---|
| 処理中(黄色) | アップロードは済んだが、Shopify 側でファイルの処理が終わっていない状態です。通常は数秒で消えます | 画面を再読み込みしてください。長く残るときは「差し替え」で上げ直します |
| ファイルが見つかりません(赤) | 登録はあるのに、参照先の PDF が Shopify の「コンテンツ > ファイル」から削除されています。商品ページには何も出ません(エラーも出ません) | 「差し替え」で PDF を上げ直すか、「削除」で登録を外してください |
PDF を登録するには
- 商品一覧で、PDF を付けたい商品の「PDF を登録」を押します
- モーダルの「PDF を選択」を押してファイルを選びます(枠の中へドラッグ&ドロップしてもかまいません)
- ファイル名と容量が枠の中に出たら、「アップロード」を押します

選べるのは PDF(application/pdf)1 つだけ で、容量は 20 MB 以下(20 × 1024 × 1024 バイト)です。20 MB は Shopify のファイル全体の上限で、アプリ側で増やすことはできません。PDF 以外を選ぶと「PDF ファイルを選択してください」、20 MB を超えると「20MB 以下の PDF を選択してください」と赤字で出て、「アップロード」は押せないままです。ファイル名は 200 文字以内です(超えると「入力内容を確認してください」で止まります)。

「アップロード」を押すと、ブラウザから Shopify のファイル保管先へ直接 PDF が送られ、Shopify 側の処理が終わる(通常 1〜5 秒)のを待ってから商品に結び付けられます。処理中はモーダルのボタンが押せなくなり、閉じることもできません。終わると画面上部に「PDF を登録しました」のトーストが出て、一覧の PDF 列にファイル名と容量が入ります。

うまくいかなかったときのメッセージは 3 種類です。「アップロードに失敗しました」はファイルの送信自体が通らなかったとき(通信の問題など)、「アップロードの処理が完了しませんでした」は送信は済んだが Shopify 側の処理が 20 秒待っても終わらなかったとき、「入力内容を確認してください」はファイル名が長すぎるなど送った内容がはじかれたときです。いずれもモーダルは開いたままなので、選び直して「アップロード」を押し直してください。処理が終わらなかった作りかけのファイルはアプリが自動で消すので、「ファイル」に残りません。
PDF を差し替えるには
- 登録済みの商品の「差し替え」を押します
- 「PDF を差し替え」モーダルで新しい PDF を選び、「アップロード」を押します

新しい PDF が登録され、商品ページのボタンは新しい PDF を開くようになります。古い PDF は Shopify の「コンテンツ > ファイル」に残ったまま なので、不要なら「ファイル」画面から削除してください(アプリは他の用途で使われている可能性のあるファイルを勝手に消しません)。
PDF を削除するには
- 登録済みの商品の「削除」を押します
- 「PDF を削除しますか?」の確認で「削除」を押します

画面上部に「PDF を削除しました」と出て、一覧は「—」と「PDF を登録」に戻ります。削除されるのは 商品と PDF の結び付きだけ で、確認文のとおり PDF ファイル本体は「ファイル」に残ります。商品ページのボタンは(反映の遅れを経て)消えます。

前へ・次へでページを送るには
一覧の末尾に「前へ」「次へ」があります。商品が 50 件を超えると「次へ」が押せるようになり、次の 50 件に移ります。検索中も同じです。1 ページ目では「前へ」、最後のページでは「次へ」が押せません。

保存の仕組みと知っておきたい制約
- 登録した PDF は Shopify の「ファイル」に、商品との結び付きはその商品の アプリ専用メタフィールド(file_reference 型) に保存されます。1 商品に持てる PDF は 1 冊です
- このメタフィールドは Shopify 標準の商品編集画面に表示されますが、そこからは変更できません(閲覧のみ)。登録・差し替え・削除はこのアプリから行います
- 「ファイル」画面で PDF を削除すると、一覧は「ファイルが見つかりません」になり、商品ページのボタンは消えます
- アプリをアンインストールすると、商品ページのブロックは描画されなくなります。PDF 本体は「ファイル」に残ります
- 商品一覧・検索・登録は Shopify の管理 API を通しますが、お客様が商品ページで PDF を開く動作にはアプリのサーバーは関わりません。アプリ側に障害があっても、すでに登録済みの PDF は表示され続けます
「設定」画面
左のメニューの「設定」で開きます。左上の矢印(「PDF フリップブック」)で主画面へ戻れます。
テーマに PDF フリップブックを追加
| 項目 | 内容 |
|---|---|
| テーマを選択 | ブロックを追加するテーマを選びます。公開中のテーマには「(公開中のテーマ)」が付き、最初から選ばれています。選択肢に出るのは公開中と未公開のテーマで、処理中のテーマやデモテーマは出ません |
| テーマに追加 | 押すと新しいタブでテーマエディタが開き、商品ページ(product テンプレート)のメインセクションにブロックが追加されます。テーマエディタで「保存」を押すまで確定しません |
| テーマをプレビュー | 選んだテーマの商品ページを新しいタブで開きます。未公開のテーマの見え方を確かめるときに使います |
カードの下には、日本語で表示しているときだけ黄色いバナー(自動追加が失敗したときはご利用ガイドを見て手動で追加してください、という案内)が出ます。その下の青いバナー「商品ページにボタンを追加する」は、テーマエディタでブロックを手動追加すれば商品ページの好きな位置にボタンを置けることを案内しています。
言語設定

「言語を選択」で管理画面の表示言語を選び、「変更する」を押すと、その場で切り替わります。選べるのは、チェコ語・デンマーク語・ドイツ語・英語・スペイン語・フランス語・イタリア語・オランダ語・ノルウェー語(ブークモール)・ポーランド語・ポルトガル語(ブラジル)・ポルトガル語(ポルトガル)・フィンランド語・スウェーデン語・トルコ語・タイ語・日本語・簡体字中国語・繁体字中国語・韓国語の 20 言語です。
この設定は使っているブラウザに保存されます。別のブラウザや別の PC で開くと、Shopify アカウントの言語に合わせた表示に戻ります。ストアフロント(お客様に見えるボタンやビューア)の言語には影響しません。
おすすめアプリ

同じ開発元(UnReact)の他のアプリの一覧です。名前を押すと App Store のページが新しいタブで開きます。右上の「×」で一覧を閉じられます。
「よくある質問」画面
開発元が公開している日本語の FAQ を表示する画面です。FAQ が 1 件以上公開され、かつ管理画面の言語が日本語のときだけ、左のメニューに「よくある質問」が出ます。
ストアフロントの設定 — テーマエディタでボタンの見た目を整える
商品ページのボタンの見た目は、すべてテーマエディタのブロック設定で決めます。アプリの管理画面には見た目の設定はありません。ビューア(めくる画面)の文言や配色は固定で、変える設定はありません。
ブロックを選ぶには
テーマエディタで商品ページ(「デフォルトの商品」テンプレート)を開き、左のツリーで「UR: PDF Flipbook Catalog」を押すか、プレビュー上のボタンをクリックすると、左に設定パネルが開きます。まだブロックが無いときは、「商品情報」セクションの「ブロックを追加」→「アプリ」タブから追加します。
設定パネルは「ボタン設定」「余白設定」「その他の設定」の 3 つのグループに分かれています。設定を変えると右のプレビューにすぐ反映されます。変更を残すには右上の「保存」を押してください。
このブロックは 商品ページ専用 です。トップページやコレクションページには追加できません(「ブロックを追加」の一覧に出ません)。PDF を登録していない商品では、ブロックを置いていても何も描画されません(空の余白も出ません)。
ボタン設定

| 項目 | 選択肢と既定値 | 説明 |
|---|---|---|
| ボタンの文言 | 空欄(既定) | ボタンに出す文字です。欄の下に「空欄にすると、お客様の言語に合わせた文言を表示します。」とあるとおり、空欄のままなら買い手の言語に合わせて 20 言語で自動表示 されます(日本語「カタログを見る」、英語「View catalog」)。文言を入れると、すべての言語のお客様にその文言がそのまま出ます |
| ビューアにダウンロードボタンを表示する | オン(既定) | ビューアのツールバー右側に「PDF をダウンロード」ボタンを出すかどうかです。オフにするとボタンは出ません。ただし PDF は Shopify の公開 URL にあるため、ブラウザの操作で保存されることまでは防げません |
| ボタンのスタイル | 塗りつぶし(既定)/枠線 | 「塗りつぶし」は「ボタンの色」で塗り、文字は「ボタンの文字色」です。「枠線」は背景が透明になり、枠と文字が「ボタンの色」になります(このとき「ボタンの文字色」は使われません) |
| ボタンの配置 | 左(既定)/中央/右 | ブロックの中でボタンをどちらに寄せるかです |
| ボタンを横幅いっぱいにする | オフ(既定) | オンにするとボタンがブロックの幅いっぱいに広がります。購入ボタンと幅をそろえたいときに使います。オンのときは「ボタンの配置」は効きません |
| ボタンの色 | #111111 | 「塗りつぶし」では背景色、「枠線」では枠と文字の色です。欄を押すとカラーピッカーが開き、「#」の右の欄に 16 進数を直接入力できます |
| ボタンの文字色 | #FFFFFF | 「塗りつぶし」のときの文字とアイコンの色です |
| 文字サイズ(PC) | 16px(10〜32px、1px 刻み) | 画面幅 768px 以上での文字の大きさです |
| 文字サイズ(スマートフォン) | 15px(10〜32px、1px 刻み) | 画面幅 768px 未満での文字の大きさです |

ボタンの左には本を開いたアイコンが常に付きます。アイコンを消す設定はありませんが、「追加CSS」で非表示にできます(後述)。
余白設定

| 項目 | 既定値 | 説明 |
|---|---|---|
| 上の余白(PC) | 16px | 画面幅 768px 以上でのブロックの上の余白です |
| 上の余白(スマートフォン) | 16px | 画面幅 768px 未満でのブロックの上の余白です |
| 下の余白(PC) | 16px | 画面幅 768px 以上でのブロックの下の余白です |
| 下の余白(スマートフォン) | 16px | 画面幅 768px 未満でのブロックの下の余白です |
いずれも -100〜100px の範囲を 2px 刻みで指定できます。マイナスにすると上や下の要素に近づけられます。
その他の設定
「追加CSS」には、CSS を直接書いて見た目を上書きできます。欄の下の注記のとおり、ブラウザの検証機能でクラス名を確認して指定してください。書いた CSS は このブロックの範囲(#block-<ブロックID>)にだけ 効くように出力されるので、他のセクションには影響しません。安全のため「<」の文字だけは取り除かれます。
よく使うクラス名は次の 3 つです。
| クラス名 | 何に付いているか | 例 |
|---|---|---|
.ur-pdf-flipbook-button | ボタン本体 | .ur-pdf-flipbook-button { border-radius: 999px; }(角を丸くする) |
.ur-pdf-flipbook-button__icon | 左のアイコン | .ur-pdf-flipbook-button__icon { display: none; }(アイコンを消す) |
.ur-pdf-flipbook-button__text | ボタンの文字 | .ur-pdf-flipbook-button__text { letter-spacing: 0.1em; } |
ビューア(全画面の部分)はページの一番外側に生成されるため、「追加CSS」では変えられません。
商品ページでの見え方とビューアの操作
設定を保存すると、商品ページには次のようにボタンが出ます。

ボタンを押すと、画面全体が暗くなり、中央に PDF が開きます。このとき初めて PDF 表示用のプログラム(約 1.7 MB)と PDF 本体を読み込むので、最初の 1〜2 秒は「読み込み中…」が出ます。商品ページを開いた時点ではボタン用の小さなファイルしか読まないため、ページの表示速度は落ちません。

ツールバーと操作は次のとおりです。文言はお客様の言語に合わせて 20 言語で切り替わります。
| 操作 | やり方 |
|---|---|
| ページをめくる | ツールバーの「前のページ」「次のページ」(左右の矢印)、キーボードの ← →、ページの端をドラッグ、またはページをタップ |
| ページ番号を見る | ツールバー中央の「現在のページ / 総ページ数」(例: 2 / 8) |
| 拡大・縮小 | 虫眼鏡の「拡大」「縮小」。等倍 → 1.5 倍 → 2 倍の 3 段階で、拡大中はページの中をスクロールして見ます |
| ダウンロード | 下向き矢印の「PDF をダウンロード」。新しいタブで開き、登録したときのファイル名で保存されます(設定でオフにできます) |
| 閉じる | 右上の「閉じる」(×)、キーボードの Esc、またはページの外側の暗い部分をクリック |
ビューアの幅が 640px 以上あれば 見開き 2 ページ、それ未満なら 1 ページずつ 表示します(1 ページの最小幅 320px × 2 で判定)。1 ページ目(表紙)は見開きでも 1 枚だけで表示され、2 ページ目からが見開きになります。ページの幅は最大 1000px までで、縦に長いページは中をスクロールして読みます。


スマートフォンでは同じ PDF が 1 ページずつ表示されます。


PDF が読み込めなかったとき(ファイルが削除されていた、通信が切れたなど)は、ビューアの中に「PDF を読み込めませんでした。」と「PDF を開く」リンクが出ます。リンクを押すと PDF を新しいタブで直接開きます。
ビューアはキーボードだけでも操作でき、開いたときは「閉じる」にフォーカスが移り、閉じると元のボタンへ戻ります。スクリーンリーダーには「PDF ビューア」というダイアログとして伝わります。
こんなときはこう設定する — 用途別のおすすめ設定
設定の組み合わせで見え方がどう変わるかを、テーマエディタのプレビューで並べます。どれも「ボタン設定」だけで済みます。
購入ボタンより控えめに見せたいときは
「ボタンのスタイル」を「枠線」、「ボタンの配置」を「右」にすると、白地に枠だけの小さなボタンが商品説明の右下に収まります。購入ボタンの主役感を邪魔しません。

購入ボタンと同じ幅でそろえたいときは
「ボタンを横幅いっぱいにする」をオン、「ボタンの配置」を「中央」にすると、「カートに追加」「今すぐ購入」と同じ幅のボタンになります。「ボタンの色」をブランドカラー(例: #0A6E8A)にすると、購入ボタンと区別が付きます。

「取扱説明書」「仕様書」など自分の言い方にしたいときは
「ボタンの文言」に「製品カタログを読む」「取扱説明書を見る」のように入れると、そのまま表示されます。海外のお客様にも同じ文言が出る点にだけ注意してください(多言語で出したいときは空欄のままにします)。

PDF を持ち帰らせたくないときは
「ビューアにダウンロードボタンを表示する」をオフにすると、ツールバーからダウンロードボタンが消え、閲覧専用の見た目になります。完全な複製防止にはなりませんが、「読むためのもの」という意図は伝わります。
うまく表示されないときは — 確認する順番
商品ページにボタンが出ない
- ブロックがテーマに入っていません。 「設定」→「テーマに追加」の後、テーマエディタで「保存」を押していないとブロックは残りません。テーマエディタで商品ページを開き、「商品情報」セクションの中に「UR: PDF Flipbook Catalog」があるか確認してください
- その商品に PDF が登録されていません。 PDF が無い商品では、ブロックがあっても何も描画されません。管理画面の一覧で、その商品の PDF 列にファイル名が出ているか確認してください
- 「ファイルが見つかりません」になっています。 「ファイル」画面で PDF を消すと、商品ページでは黙ってボタンが消えます。「差し替え」で上げ直してください
- 反映に時間がかかっています。 登録・差し替え・削除は、商品ページに届くまで数十分から数時間かかることがあります(Shopify の CDN が商品データをキャッシュするため)。管理画面にファイル名が出ていれば登録は成功しています。しばらく待ってから、商品ページを開き直してください
- 公開中のテーマとは別のテーマに追加しています。 「テーマを選択」で選んだテーマにだけ追加されます。「(公開中のテーマ)」が付いたテーマに入っているか確認してください
- 商品ページ以外に置こうとしています。 このブロックは商品ページ(product テンプレート)専用です。他のテンプレートの「ブロックを追加」には出ません
ボタンを押しても開かない・「PDF を読み込めませんでした。」と出る
- PDF が「ファイル」から削除されているか、まだ「処理中」です。管理画面の一覧の PDF 列を確認し、必要なら「差し替え」で上げ直してください
- 通信が不安定だと、PDF 表示用のプログラム(約 1.7 MB)か PDF 本体の読み込みに失敗します。「PDF を開く」リンクなら PDF を直接開けます
- ブラウザの拡張機能(広告ブロックなど)がスクリプトを止めていることがあります。別のブラウザやシークレットウィンドウで試してください
「アップロード」が押せない
- ファイルを選んでいないか、選んだファイルがはじかれています。枠の下に赤字で「PDF ファイルを選択してください」または「20MB 以下の PDF を選択してください」が出ていないか確認してください。20 MB を超える PDF は、画像の解像度を下げる・ページを分けるなどして 20 MB 以内にしてから登録します
「アップロードの処理が完了しませんでした」と出る
- Shopify 側のファイル処理が 20 秒以内に終わりませんでした。容量の大きい PDF で起こりやすいので、少し待ってからもう一度「アップロード」を押してください。作りかけのファイルはアプリが自動で消しているので、「ファイル」にゴミは残りません
ボタンの文言が英語で出る/変えたのに変わらない
- 「ボタンの文言」が空欄のときは、お客様のブラウザ(ストアの言語) に合わせた文言が出ます。英語のストアで見れば「View catalog」です。日本語で固定したいときは「ボタンの文言」に入れてください
- テーマエディタで文言を入れた直後に「保存」を押すと、入力欄のフォーカスを外す操作として消費され、保存されないことがあります。どこか別の場所を一度クリックしてから「保存」を押し、ボタンがグレーになることを確認してください
スマホで見開きになる/PC で 1 ページになる
- 見開きか 1 ページかは、ビューアの幅が 640px 以上かどうかだけで決まります。タブレットを横にすると見開き、縦にすると 1 ページになるのは正常な動作です。変える設定はありません
よくある質問
1 つの商品に複数の PDF を登録できますか?
できません。1 商品につき 1 冊です。複数の資料を見せたいときは、1 つの PDF にまとめてから登録してください。
20 MB を超える PDF はどうすればよいですか?
20 MB は Shopify のファイルの上限で、アプリ側では変えられません。画像の解像度を下げる、不要なページを減らす、分冊にして代表的なものを登録するなどで 20 MB 以内にしてください。外部サイトに置いた PDF の URL を登録することはできません。
トップページやコレクションページにもボタンを置けますか?
置けません。このブロックは商品ページ(product テンプレート)専用です。
お客様が PDF をダウンロードできないようにできますか?
「ビューアにダウンロードボタンを表示する」をオフにすると、ビューアからのダウンロードボタンは消えます。ただし PDF は Shopify の公開 URL に置かれるため、ブラウザの機能で保存されることまでは防げません。印刷やコピーの禁止機能もありません。
登録した PDF はどこに保存されますか?
Shopify 管理画面の「コンテンツ > ファイル」です。商品との結び付きは、その商品のアプリ専用メタフィールドに保存されます。アプリを削除しても PDF 本体は「ファイル」に残ります。
商品ページの表示速度に影響しますか?
商品ページを開いた時点で読み込むのは、ボタンのスタイルと起動用の小さなスクリプト(合わせて 10 KB 以下)だけです。PDF を表示するプログラム(約 1.7 MB)と PDF 本体は、お客様がボタンを押したときに初めて読み込みます。
英語以外のお客様には何語で表示されますか?
ボタンの文言(空欄のとき)とビューアのツールバーの文言は、ストアで公開している言語に合わせて 20 言語で自動的に切り替わります。PDF の中身は登録したものがそのまま表示されます。
ページをめくる効果を 3D にしたり、ページ内の商品をカートに入れたりできますか?
できません。このアプリは「商品ごとの PDF を、軽く・確実に読ませる」ことに絞っています。
おわりに — Shopify の商品ページに「読めるカタログ」を
「シンプルPDFカタログ|お手軽PDFフリップブック表示」は、商品ごとに PDF を 1 冊登録するだけで、商品ページに全画面のフリップブックを追加できる Shopify アプリです。
- 管理画面で商品を選んで PDF を上げるだけ。コードもテーマの編集も要りません
- パソコンは見開き、スマートフォンは 1 ページ。拡大・ダウンロード・キーボード操作に対応します
- ボタンの文言・スタイル・色・サイズ・余白はテーマエディタで調整でき、ページの表示速度は落としません
料金は 月額 4.99 ドル(年額 49.99 ドル)、7 日間の無料体験 付きです。紙のカタログや取扱説明書を持っている商品から、ぜひお試しください。
アプリストア: https://apps.shopify.com/ur-pdf-flipbook-catalog




