バッジにアニメーションを追加する
パルスなどのアニメーション効果をバッジに追加して、ストアフロントで顧客の注意を引きます。
アニメーション効果を追加して、セール、期間限定オファー、重要な商品情報に顧客の注意を引きます。
アニメーションを追加する方法
Section titled “アニメーションを追加する方法”-
バッジエディタを開く
Section titled “バッジエディタを開く”Sami Product LabelsでBadges & Labelsに移動します。既存のバッジの場合はEdit badge/labelをクリックし、新規の場合はCreate badgeをクリックして最初のバッジ設定を完了します。
-
Designを開く
Section titled “Designを開く”エディタはデフォルトでDesignが開きます。別のタブが表示されている場合は、Designをクリックします。
-
Advanced settingsを展開する
Section titled “Advanced settingsを展開する”Designの一番下までスクロールし、Advanced settingsをクリックします。
Advanced settingsを展開すると、Effectsの下にアニメーションの設定があります。
-
Use animationを有効にする
Section titled “Use animationを有効にする”Effectsの下で、Use animationをオンにします。アニメーションの種類、速度、繰り返しのコントロールが表示されます。
-
アニメーションの種類を選択する
Section titled “アニメーションの種類を選択する”利用できる13種類の効果から1つを選択します：Pulse、Flash、Bounce in、Bounce out、Swing、Wobble、Flip、Gelatine、Roll in、Roll out、Rotate in down left、Rotate in up left、Hi there。
アニメーション効果を選択し、速度と繰り返し回数を調整します。
-
アニメーションの速度を設定する
Section titled “アニメーションの速度を設定する”Animation speedのスライダーまたは数値フィールドで、0～10の値を設定します。ライブプレビューを見ながら調整し、商品の邪魔にならずに効果が目立つようにします。
-
繰り返し回数を設定する
Section titled “繰り返し回数を設定する”Animation Repeatのスライダーまたは数値フィールドで、0～100の値を設定します。
-
保存してプレビューする
Section titled “保存してプレビューする”ライブプレビューで効果を確認します。コレクションページと商品ページのプレビュー、デスクトップ表示とモバイル表示を切り替えられます。アニメーションが問題なければ、エディタの上部にあるSaveをクリックします。
次のステップ
Section titled “次のステップ”- バッジのスタイルを変更する — バッジのフォント、色、枠線、背景をカスタマイズします。
- カスタムCSSを使用する — カスタムCSSで、高度なスタイル設定やアニメーションの微調整を行います。