このガイドでは、 製品ファイルのアップロード の要素 ジェムページ V7 顧客が製品ページから直接ファイルをアップロードできるようにします。
製品ファイルアップロード要素とは何ですか?
その 製品ファイルのアップロード GemPagesの商品モジュールの一部である要素です。これにより、顧客は注文時に画像、PDF、その他のサポートされている形式のファイルをアップロードできます。これは、顧客からの個別の入力を必要とするビジネスにとって特に便利です。例えば、以下のようなケースです。
- オンデマンド印刷サービス: 画像のアップロードが必要なカスタム T シャツ、マグカップ、その他の製品。
- パーソナライズされたデザイン: カスタム ファイルを必要とする彫刻、ジュエリー、またはアートワーク。
- ドキュメントベースのサービス: 法的フォーム、契約書、またはその他の文書の提出。
GemPages V7 で製品ファイルアップロード要素を使用する方法を教えてください。
製品ページで製品ファイルのアップロード要素を設定およびカスタマイズするには、次の手順に従います。
ステップ1: 製品ファイルのアップロード要素を見つける
GemPagesエディタを開いて検索します 製品ファイルのアップロード 要素パネルで。この要素は 製品 and 商品リスト モジュールなので、製品ページを編集していることを確認してください。
ステップ2: 要素をドラッグアンドドロップする
商品ファイルアップロード要素を見つけたら、商品ページの任意の場所にドラッグします。GemPagesは自動的に商品モジュールと統合し、顧客のアップロード情報を取得できるようになります。

要素を配置した後、それをクリックして 2 つのタブにアクセスします。 設定 and 上級者:

設定タブを構成する
1.レイアウト
- レイアウト: 要素の垂直レイアウトまたは水平レイアウトを選択します。
- アイコンの位置: アップロード アイコンを中央または左側に表示するように設定します。
- コンテンツの配置: テキストとアイコンを左、中央、または右に揃えます。
- 間隔: 数値またはスライダーを使用して、アイコンとテキスト間の間隔を調整します。
2. 製品の供給元
製品ソース設定にすばやくアクセスして、エディターで製品を切り替えることができます。これにより、さまざまなアイテムのデザインがどのように見えるかをプレビューできます。
3. アップロード設定

- 必須: ファイルのアップロードを必須にするかどうかを切り替えます。これを有効にすると、顧客は必要なファイルを送信しないと注文を完了できなくなります。
- 画像をクリックしてプレビューします: 画像プレビューをオンにすると、顧客は注文を確定する前にアップロードした画像を確認できます。
- ファイル数: 注文ごとに 1 つのファイルのアップロードを許可するか、複数のファイルのアップロードを許可するかを選択します。
4.アイコン
![]()
アップロード フィールドにアイコンを表示するかどうかを決定します。
- アイコンを選択: あらかじめ作成されたアイコンを選択するか、カスタムアイコンをアップロードします。
- ポジション: アップロード フィールドの上または下にアイコンを設定します。
- サイズ: ページのデザインに合わせてサイズを調整します。
5。 サイズ

アップロード フィールドのサイズを変更して、ページ デザインの他の部分とシームレスに適合するようにします。
- 幅と高さ: アップロード フィールドの幅と高さを変更します。
- パディング: フィールドの周囲のバランスの取れた間隔を維持するためにパディングを調整します。
6。 背景

ページのテーマに合った背景色を選択します。
7。 シェイプ
アップロード フィールドの全体的な形状を構成します。

- ボーダー: 境界線のスタイル (実線、破線など) を選択したり、色を選択したり、境界線の太さを設定したりできます。
- コーナー: フィールドの角の丸みを調整します。
- Shadow: アップロード フィールドの影の効果を有効にしたり調整したりして、視覚的な奥行きを強調します。
8. テキストスタイル

- コンテンツ: 製品ファイルのアップロード ボタンに表示されるテキストを編集します。
- 形式: 1 つの見出しスタイル (H6 ~ HXNUMX) または XNUMX つの段落スタイルから選択して、テキスト階層を制御します。
- フォント: ボタンテキストのフォントタイプを選択します。
- サイズ: フォントサイズを設定します。
- 色: テキストの色を選択します。
- 整列: テキストを左、中央、または右に揃えます。
- フォントの太さ: フォントの太さ(太さ)を調整します。
- 行の高さ: テキストの行の高さを設定します。
- 文字間隔: 文字間の間隔を調整します。
- 変換: テキスト変換(大文字、小文字、大文字化)を適用します。
- 影の効果: 強調やスタイルのためにテキストに影を追加します。
9.効果
ホバー時の製品ファイルアップロードの設定。ホバー設定をクリックすると、ポップオーバーが開き、ホバー効果の設定が表示されます。

詳細タブを設定する
より高度なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.
よくある質問(FAQ)
1. 製品ファイルのアップロード要素はお問い合わせフォームで利用できますか?
いいえ、製品ファイルのアップロード機能は製品モジュールでのみ利用可能です。お問い合わせフォームについては、現在別の要素が開発中であり、まもなくリリースされる予定です。
2. アップロードできるファイルの最大サイズはどれくらいですか?
製品ファイルアップロード機能を使用すると、最大サイズまでのファイルをアップロードできます。 10MB.
3. 製品ファイルアップロード要素ではどのようなファイルタイプがサポートされていますか?
サポートされているファイル形式は次のとおりです 形式: PNG、WEBP、GIF、JPEG、JPG, PDF.
4. 顧客は MP3 などのオーディオ ファイルをアップロードできますか?
いいえ。オーディオファイル(例:MP3)はアップロード時に選択可能に表示される場合がありますが、要素 現在サポートされていません ストアフロントでのオーディオ再生またはファイル配信。上記のサポートされているファイル形式のみを使用することをお勧めします。
5. 顧客は一度に複数のファイルをアップロードできますか?
はい、ストアのニーズに応じて、複数ファイルまたは単一ファイルのアップロードを許可するように製品ファイルのアップロード機能を設定できます。
6. 顧客がアップロードしたファイルをプレビューするオプションはありますか?
はい、ファイルプレビューオプションを有効にして、顧客が注文を完了する前にアップロード内容を確認できるようにすることができます。
7. 製品ページで PDF ファイルにリンクするにはどうすればよいですか?
顧客が商品ページから直接 PDF ファイル(サイズ表、ユーザーマニュアル、商品パンフレットなど)にアクセスできるようにするには、「商品ファイルのアップロード」フィールドの横または上にクリック可能なリンクを追加できます。
オプション1: Shopifyに保存されているPDFへのリンク
- Shopify管理画面にアクセスし、 コンテンツ > ファイル.
- PDFファイルをアップロードします。
- アップロードしたら、ファイルの URL をコピーします。
- GemPagesエディタで、 テキスト or ボタン アップロード フィールドの近くにある要素。
- テキストを強調表示するかボタンを選択して、PDF URL をリンク設定に貼り付けます。
オプション2: 外部PDFへのリンク
PDF が Shopify の外部でホストされている場合 (例: Google Drive、Dropbox)、公開共有リンクを GemPages のテキストまたはボタン リンク設定に貼り付けるだけです。
8. 顧客がアップロードしたファイルはどこにありますか?
アップロードされたファイルはShopify管理画面の注文詳細に添付されます。 注文特定の注文を開くと、明細項目のプロパティの下にファイルが表示されます。これにより、顧客が送信したファイルを見逃すことがなくなります。



コメントしてくださってありがとうございます