クイックスタート
アプリをインストールして最初のバッジを作成し、数分でストアフロントに公開します。
このチュートリアルでは、Sami AI Product Labels & Badgeのインストールから、商品ページにバッジを公開するまでを説明します。
-
アプリをインストールする
Section titled “アプリをインストールする”Shopify App Storeのアプリページを開いてInstallをクリックし、要求された権限を確認して承認します。
アプリのページで「Install」をクリックします。
-
アプリの埋め込みを有効にする
Section titled “アプリの埋め込みを有効にする”Dashboardで、Explore outstanding featuresの横にあるステータスチップを確認します。App embed inactiveと表示されている場合は、テーマエディタで埋め込みをオンにします。
アプリの埋め込みをオンにして、テーマエディタで「Save」をクリックします。
詳しい手順については、テーマでアプリを有効にするをご覧ください。
-
最初のバッジを作成する
Section titled “最初のバッジを作成する”アプリのサイドバーでBadges & Labelsに移動し、Create badgeをクリックします。Choose badge typeダイアログに2つのオプションが表示されるので、使用するほうのCreateをクリックします。
タイプ 説明 Text badge(最も人気) セール、新着、数量限定などのバッジを、編集可能なテキストとスタイルで作成します。 Image badge 独自のアートワーク、用意されたバッジ画像、AIで作成したデザインを使用します。 
バッジのタイプを選択して、「Create」をクリックします。
-
バッジをデザインする
Section titled “バッジをデザインする”エディタがDesignタブで開き、右側のライブプレビューに入力内容がリアルタイムで反映されます。
- Text badge — Badge textを入力し、フォントとテキストの色を選択してBackground colorを設定してから、Choose templateで形を選択します。
- Image badge — 独自の画像をアップロードするか、ライブラリから選択するか、AIで生成します。
Positionで、バッジを表示する位置を選択します。
オプション 内容 Inside product image 左上から右下までの9つの位置がある3 × 3のグリッドです。Use Custom Positionにチェックを入れると、座標を細かく指定できます。 Outside product image Predefined positionドロップダウン(たとえばBelow the product price)と、左揃え、中央揃え、右揃えの設定があります。 
Designタブで、テキスト、色、形、位置を設定します。
-
バッジを表示する商品を選択する
Section titled “バッジを表示する商品を選択する”Productsタブに切り替えて、Choose products to show this badgeの下にある3つのオプションから1つを選択します。
オプション 動作 All products ストア内のすべての商品にバッジを表示します。 Specific products 商品を1つずつ手動で選択します。 Products matching conditions 商品タイトル、タイプ、ベンダー、価格、タグ、在庫、コレクションなどからルールを作成します。 
すべての商品、手動で選んだリスト、ルールのいずれかを対象にします。
すべての項目と演算子については、条件演算子のリファレンスをご覧ください。
-
有効にしてストアフロントを確認する
Section titled “有効にしてストアフロントを確認する”プレビューの上にあるステータススイッチをActiveに設定し、右上のSaveをクリックします。
ストアフロントを新しいタブで開きます。数秒以内に、商品画像にバッジが表示されます。
バッジがストアフロントに公開されました。
次のステップ
Section titled “次のステップ”- テキストバッジを作成する — テキストバッジのすべてのデザインオプションを説明します。
- 画像バッジを作成する — アートワークをアップロードするか、組み込みのライブラリを使用します。
- バッジとラベルの概要 — すべての機能を紹介します。