ハイライトを作成する

ハイライトブロックは、画像、タイトル、説明を持つ特長アイテムをグリッド状に並べたもので、商品ページに配置して、メリットやセールスポイントを紹介できます。エディタには、Design(コンテンツとスタイル)とPlacement(表示する場所と対象)の2つのタブがあります。

1. Highlightsタブを開く

   Shopify管理画面でSami Product Labelsアプリを開き、アプリのサイドバーでExtra Featuresをクリックして、Highlightsタブに切り替えます。

   

   Highlightsタブには、作成したすべてのハイライトブロックが一覧表示されます。

2. Create highlightsをクリックする

   Create highlightsをクリックします。フルスクリーンのエディタがDesignタブで開きます。

   ノート

   Featured templatesまでスクロールしてView all templatesをクリックすると、一から作成する代わりに、Free Deliveryなどの用意されたブロックから始められます。

   

   ハイライトを一から作成するか、Featured templatesから始めます。

3. ハイライトに名前を付ける

   名前欄はプレビューの上にあります。New Highlightを、50文字以内の名前に置き換えます。この名前は内部用で、リスト内でブロックを識別するためのものです。お客様には表示されません。

4. 見出しと説明を追加する

   Content & Badgesで、TitleとDescriptionを入力します。これらはブロック全体の見出しと導入文で、たとえば「Why Choose Us」のように入力します。どちらも、太字、斜体、下線、絵文字、配置、HTML表示(</>)に対応したリッチテキストエディタで、言語ごとに入力します。そのため、ラベルには、たとえばTitle (en)のように、現在の言語が表示されます。

   どちらも任意です。空のままにすると、アイテムのみが表示されます。

   

   ブロックの見出しと説明はリッチテキスト欄で、言語ごとに編集します。

5. ハイライトアイテムを追加する

   Badgesの下にあるAdd highlightをクリックして、次のいずれかを選択します。

   オプション	動作
   Select badge image	画像ピッカーを開き、1つ以上のアイテムを追加します。
   Line break	改行を挿入し、以降のアイテムを新しい行から始めます。

   ピッカーのLibraryには、1,800点以上の画像があります。名前で検索するか、Images、Free Labels、All colors、Latestのフィルターでリストを絞り込みます(Clearでリセットできます)。使用する画像をクリックして、Select Imageをクリックします。ソースをDesign your Imagesに切り替えて、独自の画像を使用することもできます。また、Edit with AIをクリックすると、選択した画像を修正できます。

   

   ライブラリをフィルターまたは検索して、ハイライトアイテムに使用する画像を選びます。

6. 各アイテムのタイトルと説明を入力する

   各アイテムは、Badgesリストの1行として表示されます。行の歯車アイコンをクリックするとパネルが開き、次の項目を設定できます。

   • Image — Changeをクリックして、別の画像に差し替えます。
   • Title — その特長の短い見出しです。言語ごとに入力します。
   • Description — 250文字以内の説明です。言語ごとに入力します。

   パネルのDeleteでアイテムを削除でき、行のハンドルをドラッグするとグリッドの並び順を変更できます。

   

   各アイテムに、独自の画像、タイトル、説明を設定します。

7. グリッドとブロックのスタイルを設定する

   Design Main Sectionを開くと、ブロック全体を設定できます。

   設定	内容
   Alignment	左揃え、中央揃え、右揃えから選択します。
   Column	1行に表示するアイテム数です。
   Width	ブロックの幅を%またはpxで指定します。
   Background Heading Color	見出しと説明の背景色です。
   Background Color	アイテム領域の背景色です。
   Margin / Padding	ブロックの外側と内側の余白です。
   Border & corners	枠線のスタイルと色、角の丸みです。

   

   Design Main Sectionで、グリッドとブロックのコンテナを設定します。

8. ハイライトアイテムのスタイルを設定する

   Design Badgeを開くと、アイテム自体のスタイルを設定できます。

   設定	内容
   Alignment	各アイテムの内容の配置です。
   Style	モノクロ、カード上のモノクロ、元の色、カード上の元の色の4種類の画像スタイルから選択します。
   Background Color	各アイテムの背景色です。
   Size	画像のWidthとHeightをpxまたは%で指定します(初期値は50 px)。
   Positions	テキストに対する画像の位置です。たとえばImage Position Topがあります。
   Margin / Padding / Border & corners	各アイテムの余白と枠線です。
   Title / Description	アイテムのテキストのフォント、色、サイズ、行の高さです。

   

   Design Badgeで、個々のハイライトアイテムのスタイルを設定します。

9. ブロックの見出しのスタイルを設定する(任意)

   Design title & descriptionを開きます。Design TitleとDesign Descriptionには、ブロック全体の見出しと導入文それぞれのフォント、色、サイズ、行の高さの設定があります。

10. レスポンシブサイズとカスタムCSSを設定する(任意)

    • Responsive size — タブレットとモバイルでのサイズを上書きします。
    • Advance Section — Custom CSS (Developer Zone)を追加します。エディタの下にあるCSS referenceには、.samita_highlight_containerなど、指定できるセレクターが表示されます。クリックすると挿入されます。

    

    CSS referenceには、カスタムスタイルに使用できるセレクターが表示されます。

11. ハイライトの表示場所を選択する

    Placementタブに切り替えます。

    • Product page — オンにすると、すべての商品ページで、アプリの組み込み位置にブロックが表示されます。
    • Shortcode — スニペットをコピーしてテーマに貼り付けると、ブロックを正確な位置に配置できます。
    • Conditions — Product、Customer、Page、Language、Countryの条件で、ブロックを表示する対象と場所を絞り込みます。

    ノート

    条件セットの仕組みについては、ハイライトの表示対象を指定するをご覧ください。

    

    Placementタブには、表示条件、Product pageトグル、ショートコードがまとまっています。

12. プレビューして保存する

    プレビューの上で、言語の切り替え、プレビューするページの選択、デスクトップ / モバイルの切り替え、目のアイコンによるサンプル商品の非表示ができます。ブロックをActiveまたはDraftに設定して、右上のSaveをクリックします。保存していない変更を破棄するには、Discardを使用します。

ノート

FREEプランでは、ハイライトを2つまで作成できます。削除したものも上限にカウントされます。ハイライトを無制限に作成するには、GOLDまたはDIAMONDにアップグレードしてください。

次のステップ

• ショートコードでハイライトを配置する — ブロックをテーマ内の任意の場所に配置します。
• ハイライトの表示対象を指定する — ハイライトを表示するページと顧客を制御します。
• ハイライトの概要 — ハイライトの内容と、使いどころを説明します。
• トラストバッジを作成する — 決済やセキュリティのアイコンを商品ページに追加します。

ヒント

サポートが必要な場合

手順の途中で問題が発生した場合は、[email protected]までお問い合わせください。