Table of Contents

PageFly 2.5.0: UIの改善と最新の設定を提供

当社の事業は、アフィリエイトから得られる手数料によって支えられています。 詳細

2020年11月20日に更新されました。

改善を目指すことは長い間私たちの DNA に刻み込まれており、PageFly は、はるかに優れた機能、より優れた UI、より強力なカスタマイズ機能を備えた新しい 2.0 アップデートを継続的にリリースしています。

PageFly に関する最新情報については、以下をご覧ください。 PageFly ヘルプ センター

---

約 1 か月前、PageFly は、ユーザーがストアのコンバージョン率を最適化するのに役立つ多くの優れた要素と機能を備えた 2.4.0 バージョンをリリースしました。2.4.0 バージョンでは、Shopify 要素と新しい UI の改善に重点が置かれました。詳細については、こちらをご覧ください。

肌寒い初秋の日に、PageFly は新しいバージョン 2.5.0 を発表できることを嬉しく思います。この新しいバージョン 2.5.0 では、UI の改善と超現代的な設定が提供されます。以下に共有するものをお楽しみいただければ幸いです。それでは見てみましょう!

コレクションリスト要素の更新

サブ要素を個別にカスタマイズする機能

以前のバージョンでは、コレクション リスト要素をページ エディターにドラッグ アンド ドロップすると、4 つのイラスト画像が表示され、コレクションを追加する場合は、それらを 1 つずつ選択して、必要なコレクションを追加する必要がありました。

コレクションリスト-1-1

新しいバージョン 2.5.0 では、このコレクション リスト要素を使用すると、Shopify ストアにあるコレクションが直接表示されます。コレクションのデフォルトの数は 4 で、読み込みごとにアイテムを調整できます。このオプションの最大値は 30 です。どのように機能するか見てみましょう。 コレクションリスト-1-2

この新しい変更明確にするために、一般タブで確認できます。CONTENTパラメータには、2つの選択肢があるコレクションソースオプションがあります。

  • すべてのコレクション
  • カスタムコレクション

コレクション リスト要素のこの新しいアップデートにより、ユーザーは簡単にカスタマイズでき、通常の要素と同様にすべてのパラメータを保持しながらパラメータを個別に編集できます。つまり、コレクション リストを使用するときにコレクションの詳細コレクションの画像コレクションのタイトルなどの他の要素が使用できるため、これらの要素を追加する必要がありません。

コレクション リスト内の要素にスタイルを設定すると、すべてのコレクションの対応する要素に適用されることに注意してください。

さらに、デバイスに応じた統合を備えたコレクション リスト要素を使用すると、ラップトップ、タブレット、モバイルなどのあらゆるデバイスでレイアウトを編集できます。

コレクションリスト-1-3

商品画像要素の新機能

デフォルトの画像ソースオプション

このデフォルトの画像ソースは、期待できる機能です。Pag​​eFlyの以前のバージョンでは、製品画像を使用して希望の製品を選択すると、表示される製品画像がデフォルトで注目画像として表示されていました。現在、PageFlyバージョン2.5.0では、表示される画像が注目画像か最初のバリエーション画像かを選択できるデフォルトの画像ソースオプションが提供されています。このオプションは、以下の画像のように[一般]タブに表示されます。 製品画像 1-1

選択する前に、Shopify 管理画面にアクセスして商品を確認できます。

1. 注目の画像

製品画像1-3 2. 最初のバリエーション画像製品画像1-4どのように動作するか見てみましょう。 コレクション画像1-5

製品詳細要素の再装備

PageFly バージョン 2.5.0 では、製品の詳細がさらにアップグレードされ、製品のカスタマイズが簡単になりました。デフォルトのバリアントオプションを紹介します。

製品詳細-1-1

このオプションを使用すると、顧客が閲覧できるライブ ページに表示する製品のバリエーションを選択できます。

ボタン要素を改善しました

クリックアクションオプションの更新

まず、 Button要素を見てみましょう。PageFly バージョン 2.4.0 では、 Button要素は最初の 2 つのボタンを提供していました。しかし、この新しいバージョン 2.5.0 では、下の画像のようにさらに 2 つのボタンを導入します。 ボタン要素-1-1

これは、ボタン要素のクリック アクションオプションの新しい改良点です:ポップアップを開く!

ポップアップコンテンツでは、ユーザーは次の2つの選択肢から選ぶことができます。

  • Youtubeビデオ:

ループ、自動再生、ミュート、コントロールの表示などのYoutube要素のような他の選択肢の他に、Youtube ビデオの選択肢ではアニメーションを有効にするが提供されており、Youtube ビデオに必要なアニメーションを自由に選択できます。

この選択を説明するために、以下の例をご覧ください。PageFly エディタで、Youtube の URL を挿入した後、任意のアニメーション (たとえば、 tadaアニメーション) を選択できます。 ボタン要素 1-2ライブページでは次のように表示されます。 ボタン要素 1-3

  • ストアコンテンツ:
  1. ポップアップ コンテンツで、 [コンテンツの保存]オプションを選択します。
  2. 次に、下の画像のようにURLアイコンをクリックします。
  3. ページの選択モーダルで、コレクション/製品/ページ/ブログ投稿のいずれかのページを選択します。

[ページの選択]ボタンをクリックします。 ボタン要素-1-4

次に、必要なアニメーションを選択することもできます。この例では、クレンザーと角質除去剤のページとウォブルアニメーションを選択しました。ライブページを見ると、変更が確認できます。 ボタン要素 1-5

他の要素のアクションオプションをクリック

一般タブにクリックアクションオプションがある他の要素にも、ポップアップを開くオプションがあります。たとえば、見出し要素の場合、この例では、見出しテキストが「Go with you on every road」で、 「Store Content 」も選択されています。 ボタン要素-1-6

「保存し公開」した後のライブページでの動作は次のようになります。 ボタン要素-1-7

クリックアクションのこの新しい設定は素晴らしいです。ぜひ試してみてください。きっと気に入っていただけるはずです。

新しい高度な設定: 画像の遅延読み込み

画像の遅延読み込みオプションは、ページ設定モーダルで使用できます。これは、ページの最適化設定を構成するページ最適化部分です。任意のページで画像の遅延読み込みを有効にすることができます。画像の遅延読み込みを設定したページでは、下にスクロールすると、下の画像が徐々に読み込まれます。 遅延ロード-1-1

ご参考までに、 Lazyload Imagesオプションは、コレクション画像、背景画像、製品画像などのすべての画像に適用されます。したがって、このページでは、 Lazyload Imagesオプションを有効にすると、ページ上のすべての画像に適用されます。以下のライブ ページで確認できます。 遅延読み込み-1-2

PageFly がLazyload Imagesオプションを作成した理由は、その利点にあります。上で述べたように、 Lazyload Imagesオプションはページの読み込み速度を最適化するのに役立ちます。これにより、ページの読み込みが超高速になります。これは、PageSpeed Insights のWeb サイトでテストできます。ページの URL を挿入すると、ページの読み込み速度を確認できます。Lazyload Imagesオプションを使用しないページには、 Defer offscreen imagesという要素があります。この要素により、ページのスクロールしない部分に表示される画像の読み込みが遅れます。以下は、 Lazyload Imagesを使用していないページです。機会では、 Defer offscreen images要素が 4.3 秒で、これが最も多くを占めています。 遅延読み込み-1-3

ご参考までに、このLazyload Imagesオプションは有料プランでご利用いただけます。詳細については、 PageFly の料金プランをご覧ください。

まとめ

興奮しながらこの記事を書いていますが、PageFly バージョン 2.5.0 のリリースが待ちきれません。PageFly バージョン 2.5.0 がもたらすものは、間違いなくあなたのストアを強化し、より多くのユーザーを獲得することでしょう。

新しいバージョン 2.5.0 を体験して、さらに高度な制御を実現し、ストアを美しく構築して、より多くの売上を獲得できるようになりました。

弊社の 24 時間 365 日対応のカスタマー サービス チームが、いつでもお客様をサポ​​ートし、お手伝いいたします。

PAGEFLYを無料でお試しください

プロプランにアップグレード

Explore Now
Improve store speed to convert better and rank higher on Google.    Try TinyIMG