メインコンテンツまでスキップ

テーマ設定

Shopify テーマに PDF Connect の Theme App Extension を追加して、ストアフロントにPDFを表示できるようにします。

なぜテーマ設定が必要か​

PDFをリンクして Active にするだけでは不十分です。ストアに表示するには、テーマに Theme App Extension を追加する必要があります。

イメージとしては次のとおりです:

  • リンク = PDFをページ/リソースに紐付ける
  • Theme App Extensions = テーマエディタで、お客様に見える形で表示する（テンプレートごとに1回だけ必要）

ストアにPDFを表示するには、どちらも必要です。

PDF設定の「追加の調整ステップ」だと考えると分かりやすいです。

リンクしたPDFを公開する方法（2通り）​

1. PDF詳細ページから直接公開（推奨）​

Theme App Extension を最も素早く追加する方法です:

  1. PDF詳細ページの Publish セクションを開きます
  2. まだ Theme App Extension がテンプレートに追加されていない場合、Publish を促す表示が出ます
  3. Publish をクリックし、表示スタイル（Embedded Viewer / Button）を選びます
  4. 拡張が追加された状態で、テーマエディタが新しいタブ/ウィンドウで開きます
  5. 必要に応じて設定を調整し、テーマエディタで Save をクリックします

2. テーマエディタから手動で追加する​

拡張の配置を細かくコントロールしたい場合に向いています:

  1. Online Store > Themes を開きます
  2. 適用中のテーマで Customize をクリックします
  3. PDFをリンクしたページへ移動します（例: 商品ページ）
  4. Add section または Add block をクリックします（テーマによって異なります）
  5. Apps セクション内の PDF Connect を探します
  6. PDF Embedded Viewer または PDF Button を追加します
  7. Save をクリックします

または、表示オプションのカスタマイズ → を参照してください。

手動URLブロック（リンク不要）​

商品テンプレートでは、テーマ設定からPDF URLを直接読み取って表示する「手動ブロック」も追加できます。

商品を1件ずつリンクしたくない場合の、テンプレート共通PDFに最適です。

手動ブロックの手順​

  1. アプリで任意のPDF詳細ページを開きます
  2. ドロップダウンのアクション Add PDF block to product template (manual URLs) を選びます
  3. 商品テンプレートと手動ブロック種別を選択します
  4. テーマエディタを開き、URLを1つ以上貼り付けます
  5. テーマの変更を保存します

手動ブロックの詳細: Manual URL blocks →

Theme App Extension の場所​

PDF Connect の Theme App Extension は、テーマエディタの Apps 配下にあります。次のブロックを探してください:

  • PDF Embedded Viewer - ページ内にPDFを埋め込み表示します
  • PDF Button - クリックでPDFをオーバーレイ表示するボタンを表示します
  • PDF Embedded Manual - 手動URL設定から埋め込み表示します
  • PDF Button Manual - 手動URL設定からボタン/リスト表示します

リンクブロックは、対応するすべてのページタイプで利用できます。
手動ブロックは現在、商品テンプレート向けです。

対応ページタイプ​

次のページテンプレートに PDF Connect の拡張を追加できます:

  • 商品ページ - Product テンプレート
  • コレクションページ - Collection テンプレート
  • 固定ページ - Page テンプレート
  • ブログ - Blog テンプレート
  • 記事 - Article（ブログ記事）テンプレート
  • ホームページ - Index テンプレート
  • 検索ページ - Search テンプレート

拡張の配置​

PDFの表示位置をコントロールできます:

商品ページ:

  • 「カートに追加」ボタンの上
  • 別タブ内
  • 商品説明の下
  • サイドバー

コレクションページ:

  • 商品グリッド（一覧）の上
  • コレクション説明の下
  • サイドバー

その他のページ:

  • メインコンテンツの上
  • メインコンテンツの下
  • 専用セクション内

配置できる場所は、テーマのセクション構成によって異なります。

1つの拡張で、リンク済みPDFが表示される​

ページタイプごとに、Theme App Extension は1つ追加すれば十分です:

  • 商品テンプレートに PDF Button を追加します
  • そのテンプレートを使う各商品で、自動的にPDFが表示されます
  • 表示されるのは、その商品にリンクされたPDFだけです
  • 商品ごとに拡張を追加する必要はありません
  • 特定のPDFを除外したい場合は、拡張タイプごとの表示制御 → を参照してください

コレクション、固定ページ、その他リソースでも同様です。

手動ブロックは挙動が異なります:

  • リンク済みPDFは参照しません
  • ブロック設定に入力したURLだけを表示します
  • 追加したテンプレート全体に適用されます

Theme App Extension の設定​

拡張の「見た目」をカスタマイズします（PDFビューア機能そのものの設定ではありません）:

Embedded Viewer 拡張:

  • Show heading（見出しの表示切り替え）
  • Heading text（見出しテキスト）
  • Viewer height（ビューア高さ。ビューポート比率。デスクトップのみ）
  • Show container border（枠線の表示）

PDF Button 拡張:

  • Show heading（見出しの表示切り替え）
  • Heading text（見出しテキスト）
  • Button text / text source（固定文言 / PDF名 / PDF説明 など）
  • Button alignment（左/中央/右）
  • Button text alignment（ボタン内テキストの配置）
  • Multiple PDFs layout（縦/横）
  • Show PDF icon（PDFアイコン表示）
  • Show container border（枠線の表示）
  • Button background color（背景色）
  • Button text color（文字色）
  • Button hover background color（ホバー時の背景色）
  • PDF viewer modal size（ポップアップサイズ: 60% / 70% / 80% / 90%）

リンクブロックの場合: ビューア機能（ズーム、ダウンロード、ツールバー、ナビゲーションなど）は、各PDFのアプリ画面で設定します。Viewer configuration →

手動ブロックの場合: ビューア機能は、テーマエディタのブロック設定で行います。手動ブロックのビューア設定 →

表示スタイルを混在させる​

ページタイプごとに表示スタイルを変えられます:

  • 商品ページは埋め込みビューア
  • コレクションページはボタン表示
  • ホームページは埋め込み表示

テーマが複数拡張を許可していれば、同一ページに混在させることもできます。

Theme App Extension に未対応のテーマ​

古いテーマやカスタムテーマでは、Theme App Extension に未対応のことがあります:

  1. Theme App Extension に対応しているテーマか確認します
  2. 必要に応じてテーマを新しいバージョンへ更新します
  3. テーマ開発者にサポートを依頼します
  4. Online Store 2.0 対応テーマへの切り替えも検討します

多くの最新 Shopify テーマ（Online Store 2.0）は Theme App Extension に対応しています。

公開前にプレビューする​

公開前に次の点を確認しましょう:

  1. テーマエディタで拡張を追加します
  2. プレビューでPDFの見え方を確認します
  3. 2つの表示スタイルを試します
  4. モバイルプレビューでも確認します
  5. 必要に応じて調整します
  6. 問題なければ Save をクリックします

拡張を削除する​

ページタイプからPDF表示を外すには:

  1. テーマエディタを開きます
  2. 対象のページタイプへ移動します
  3. PDF Connect の拡張を見つけます
  4. 拡張の設定をクリックします
  5. Remove block を選びます
  6. Save をクリックします

リンク設定を残したまま、表示だけを消せます。

表示トラブルの対処​

PDFが表示されない:

  • 正しいページタイプに拡張を追加しているか確認します
  • PDFステータスが Active か確認します
  • PDFがリソースにリンクされているか確認します
  • ページを再読み込みします

手動ブロックが何も表示しない:

  • 手動設定に有効なURLが最低1つ入力されているか確認します
  • 使用中の商品テンプレートにブロックが追加されているか確認します
  • テーマを保存し、ストアフロントを強制リロードします

Apps に拡張が表示されない:

  • テーマが Theme App Extension に未対応の可能性があります
  • テーマを更新してみてください
  • テーマ互換性を確認してください（Online Store 2.0 が必要です）

意図しないPDFが表示される:

  • 正しいリソースのページを見ているか確認します
  • PDFライブラリのリンク設定を確認します
  • （使っている場合）テンプレート側の設定を見直します

トラブルシューティングの詳細 →

次のステップ​