カスタム画像でギフトカードをパーソナライズする

注意

現在、以前のテーマはテーマストアでは提供されていません。以前のテーマには、ShopifyのOnline Store 2.0テーマに含まれている機能が盛り込まれておらず、セキュリティ修正以外のアップデートは行われません。

メモ

Shopifyの無料テーマを使用している場合は、Shopify サポートに連絡すると、このチュートリアルのサポートを受けることができます。設計には15分かかります。Shopifyデザインポリシーについて詳しくはこちらをご覧ください。

ギフトカードの新しい画像をアップロードする

1. 管理画面で [オンラインストア] > [テーマ] に移動します。
2. 編集するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
3. [アセットディレクトリ] で、[新しいアセットを追加する] をクリックします。

4. [ファイルを選択] をクリックし、コンピューター上の新しいギフトカード画像にアクセスして、その画像をアップロードします。blue-giftcard.pngのようなシンプルなファイル名の使用をおすすめします。

5. [アセットをアップロード] をクリックします。新しいギフトカード画像が [アセット] ディレクトリに表示されます。ファイルの拡張子に注意してください (.pngまたは.jpg)。

新しい画像を使用するようにギフトカードのテンプレートファイルを編集する

1. テンプレートディレクトリーで、gift-card.liquidをクリックします。
2. ファイルで次のコードを探します。

<img src="{{ 'gift-card/card.svg' | shopify_asset_url }}" alt="">

1. ステップ3のコードを以下のコードに置き換えます。

<img src="{{ 'blue-giftcard.png' | asset_img_url: '1024x1024' }}" alt="">

1. [保存] をクリックします。

メモ

必要に応じて、blue-giftcard.pngを新しい画像のファイル名と拡張子に変更します。

新しいギフトカード画像をプレビューする

1. テーマコードエディタの右上隅にある [テーマをカスタマイズ] をクリックします。
2. テーマエディタを開きます。
3. ページ上部のドロップダウンメニュー、またはモバイルの [テンプレート] メニューから、[ギフトカード] を選択します。