We value your feedback. Please take a 1-minute survey to help us improve our Help Center. Click ‘Yes’ to participate.

Yes
✕
Start Strong
Sell Smart
Manage with Ease
Market to Success

マテリアルライブラリを活用したカスタム商品デザイン

カスタム商品をデザインする際、同じオプションカテゴリを繰り返し作成したり、同じ画像を異なる商品にアップロードしたりすることがあります。たとえば、様々な商品で使用したい猫の画像コレクションがある場合、それらを品種や色などで分類し、それぞれの商品に1枚ずつ画像をアップロードする必要があります。これは時間がかかり非効率的です。

このプロセスを効率化するために、商品カスタマイザー アプリのPreview Design カスタマイザーにはMaterial Library 機能があります。この機能を使用すると、デザイン素材を一度集中的なライブラリにアップロードし、複数の商品で再利用することができ、貴重な時間を節約できます。

 

 

画像素材の作成と適用

このセクションでは、Material Library で画像素材を作成し、カスタム商品デザインに適用する方法について説明します。

 

ライブラリ内で画像素材を作成する

  1. SHOPLINEの管理画面で、アプリ ＞ 商品カスタマイザーに移動します。
  2. カスタマイズ商品タブをクリックし、素材ライブラリを選択し、素材を作成します。
    1.1.2.png
  3. 素材の名前を入力し、作成をクリックします。
    1.1.3.png
  4. 画像をアップロードするには、画像を追加します。一度に複数の画像を追加できます。
    1.1.4.png
  5. 画像リストには、以下のオプションがあります。
    1.1.5.png
    • ソート： 画像をドラッグアンドドロップして順序を調整します。この順序は、商品詳細ページの画像オプションの順序と一致します。
    • 画像名：画像にカーソルを合わせ、鉛筆アイコンをクリックして名前を変更します。
    • カラーカード：パレットアイコンをクリックして画像の色を選択します。選択すると、カラーカードが商品ページのオプションとして表示されます。
    • ID：IDは各画像のアップロード順序を表し、一意であり、手動で変更できません。
    • 削除：不要な画像を削除するには、ゴミ箱アイコンをクリックします。

 

カスタム商品に画像素材を適用する

  1. アプリ内で、カスタマイズ商品タブをクリックし、カスタマイズ商品を選択し、次にプレビューデザインを追加をクリックします。
    1.2.1.png
  2. 素材を適用したい商品を選択し、追加をクリックします。
    1.2.2.png
  3. 必要に応じてカスタマイズテンプレートを選択し、確認をクリックしてカスタマイザーに入ります。
    1.2.3.png
  4. カスタマイザーで、画像オプションをクリックし、右パネルで以下の設定を構成します：
    1.2.4.png
    • タイトル：画像オプションに明確なタイトルを入力してください。
    • ノート：画像選択に関する顧客への指示を含めます。
    • 商品にカスタム要素が必要：このオプションを有効にすると、サービスを必須にすることができます。
  5. オプションの下で、素材ライブラリから選択を選択します。次に、適用したい画像素材を選択し、選択をクリックします。
    1.2.5.png
  6. 上下矢印を使用して、並べ替えボックスで画像をプレビューします。表示順序はライブラリの並べ替え設定と一致します。
    1.2.6.png
  7. 背景画像をアップロードするには、プレビュー設定タブに移動します。
    1.2.7.png
  8. 保存をクリックしてください。その後、設定をプレビューするためにストアを訪れてください。
    1.2.8.png
  9. 満足したら、有効にするスイッチをオンにしてサービスをアクティブにしてください。
    1.2.9.png

 

商品ページでのカスタムエフェクト
1.3.png

 

カテゴリ素材の作成と適用

このセクションでは、素材ライブラリでカテゴリ素材を作成し、カスタム商品デザインに適用する手順について説明します。

 

ライブラリ内でのカテゴリ素材の作成

  1. SHOPLINEの管理画面で、アプリ ＞ 商品カスタマイザーに移動します。
  2. カスタマイズ商品タブをクリックし、素材ライブラリを選択し、素材を作成をクリックします。
    2.1.2.png
  3. 素材の名前を入力し、作成をクリックします。 
    2.1.3.png
  4. カテゴリを追加をクリックします。
    2.1.4.png
  5. カテゴリ名を入力し、カテゴリ画像をアップロードし、必要に応じてカラーカードを選択します。その後、作成をクリックします。
    2.1.5.png
  6. このカテゴリに画像をアップロードするには、画像を追加をクリックします。複数の画像を一度に追加できます。
    2.1.6.png
  7. カテゴリリストでは、以下のオプションがあります:
    2.1.7.png
    • ソート： カテゴリをドラッグして並べ替えます。この順序は、商品詳細ページのカテゴリオプションの順序と一致します。
    • カテゴリ名：カテゴリにカーソルを合わせ、鉛筆アイコンをクリックして名前を変更します。
    • カラーカード：パレットアイコンをクリックしてカテゴリの色を選択します。選択した場合、色カードが商品ページのオプションとして表示されます。
    • ID: IDは各カテゴリの作成順序を表し、一意です。したがって、手動で変更することはできません。
    • 削除：不要なカテゴリを削除するには、ゴミ箱アイコンをクリックします。
  1. 必要に応じて上記の手順を繰り返して追加のカテゴリを作成します。
    2.1.8.png

 

カスタム商品にカテゴリ素材を適用する

  1. アプリ内で、カスタマイズ商品タブをクリックし、カスタマイズ商品を選択して、プレビューデザインを追加をクリックします。
    2.2.1.png
  2. 素材を適用したい商品を選択し、追加をクリックします。
    2.2.2.png
  3. 必要に応じてカスタマイズテンプレートを選択し、確認をクリックしてカスタマイザーに入ります。
    2.2.3.png
  4. カスタマイザーで、画像オプションをクリックし、右パネルで以下の設定を構成します:
    2.2.4.png
      • タイトル：画像オプションに明確なタイトルを入力してください。
      • 注意：画像選択に関する顧客への指示を含めます。
      • 商品にカスタム要素が必要：このオプションを有効にすると、サービスを必須にすることができます。
  5. オプションの下で、素材ライブラリから選択を選択します。その後、適用したいカテゴリ素材を選択し、選択をクリックします。
    2.2.5.png
  6. 上下矢印を使用して、並べ替えボックスで画像をプレビューします。表示順序はライブラリの並べ替え設定と一致します。
    2.2.6.png
  7. 背景画像をアップロードするには、プレビュー設定タブに移動します。
    2.2.7.png
  8. 保存をクリックします。その後、設定をプレビューするためにストアを訪れてください。
    2.2.8.png
  9. 満足したら、有効にするスイッチをオンにしてサービスをアクティブにします。
    2.2.9.png

 

商品ページのカスタムエフェクト
2.3.png