Shopifyページに商品メタフィールドを追加する方法

Shopifyの商品メタフィールドとは?

A Shopifyメタフィールド 保存できます 追加情報 デフォルトのフィールドに収まらないストアのコンテンツに関するものです。最もよく使われるタイプの一つは 製品メタフィールド — スキンケアの種類、栄養情報、原材料、さらにはカスタムバッジの画像 URL などの独自の仕様を追加するのに最適です。

表示したい場合は パーソナライズされた製品の詳細 またはあなたの Shopify製品ページ カスタムデータの場合、メタフィールドが最適なソリューションとなります。

Shopifyで商品メタフィールドを追加する方法

ステップ1：Shopifyで商品メタフィールドを作成する

メタフィールドを使用するには、まず 定義します Shopify管理画面で設定します。

• あなたから Shopify管理者, に行く 設定 > メタフィールドとメタオブジェクト > 製品.

• 次に、をクリックします 「定義を追加」.

• 埋める 名前, 詳細説明 選択 内容型、および選択 カテゴリー.

• ヒット 「保存」 終了したら。

ステップ2: 製品にメタフィールド値を追加する

製品メタフィールドの作成が完了すると、製品設定に追加されたことがわかります。次に、最近作成したメタフィールドに値を追加するには、以下の手順に従います。

• に行く Shopify管理 > 商品 メタフィールドを通じて詳細情報を追加する製品を選択します。
• 下にスクロールして メタフィールド 製品設定ページのセクション。

• フィールドに値を入力してください。 「保存」 終了したら。

ステップ3: ページにメタフィールドを表示する

• 戻る Shopify管理者 > メタフィールドとメタオブジェクト > 製品 ページに表示するメタフィールドを見つけます。
• 次に、 名前空間とキー のセクションから無料でダウンロードできます。

• に行く GemPagesダッシュボード > 製品ページ、希望するテンプレートを選択して入力してください エディター.

ここから先の手順は、お使いのエディタのバージョンによって異なる場合があります。お使いのGemPagesのバージョンに対応する手順を確認し、それに従って以下の手順を実行してください。

GemPages V6を使用している場合

• 左側のサイドバーからドラッグ＆ドロップして 液体要素 ページ上のお好みの場所に。

• Liquid要素を右クリックして選択 コードの編集.

• 次に、先ほどコピーしたコードを テンプレート パネル。

追加する必要があることに注意してください product.metafields。 コピーしたコード行の前に、コードを {{ }}.

具体的な例を挙げますと、以下の通りです。

{{product.metafields.my_fields.skintype}}

• ヒット 「保存」 プレビュー ページでどのように表示されるかを確認します。

GemPages V7を使用している場合

• 動画内で カスタムコード 左サイドバーの 高機能 セクション。希望の場所にドラッグ アンド ドロップします。

• 要素をクリックすると、左側のサイドバーにコード パネルが表示されます。

• 先ほどコピーしたコードを HTML/リキッド タブ。プレフィックスも追加する必要があります product.metafields. コピーしたコード行の前に、コードを {{ }}.

具体的な例を挙げますと、以下の通りです。

{{product.metafields.custom.product_test}}

• 詳しくはこちら Save and ページを公開する 結果をストアフロントで確認します。

画像ソースをメタフィールドに接続するにはどうすればいいですか?

Shopifyもサポートしています 画像メタフィールドただし、ページ上でレンダリングするにはカスタム HTML コードが必要です。

メタフィールドの画像をアップロードした後、次のコードを使用して画像を表示できます。

{{product.metafields.custom.test_metafield_image | metafield_tag}}