やあ、
PageFly チームの Richard です。PageFly バージョン 4.14.0 のリリースをお知らせできることを嬉しく思います。このアップデートでは、Web サイト構築エクスペリエンスを次のレベルに引き上げるために設計された一連の新機能と改善が導入されています。
モーダルからポップオーバーへの移行から製品メディア機能の強化まで、このバージョンには、魅力的でパフォーマンスの高いページをより効率的に作成するのに役立つ更新が満載されています。PageFly 4.14.0 の新機能の詳細を見てみましょう。
モーダルをポップオーバーに移行する
これらの進行状況/機能のポップオーバーを更新します
ページ/セクションを保存
デフォルトで保存された通知:

製品ページとコレクションページで、ページに少なくとも 1 つの製品/コレクションが割り当てられていない場合、ポップオーバーに「製品/コレクションを選択」オプションが表示されます。

API キーを持つサードパーティ要素
サードパーティの要素を使用して新しいポップオーバーを更新しました:
- Avada マーケティング オートメーション フォーム
- ハルクフォームビルダー
- Quikify - お問い合わせフォームビルダー

ストアフロントパスワードモーダル
「テーマのスタイルを有効にする」オプションをオンにすると、Storefront パスワード モーダルがエディター内に表示されます。

いくつかの要素を改善する
フロントエンド要素のヘルパーの改善
- 「PageFly Helper スクリプト」を「テーマ アプリ拡張機能」に移動します。
- テーマ アプリ拡張機能には、ページ上のすべてのセクションのすべてのヘルパー JS コードが含まれます。これにより、現在の PF バージョンでページが機能し、パフォーマンスが向上します。これが最も重要です。
- 顧客がバージョン 1 と 2 のページをまだ持っている場合、テーマ アプリ拡張機能は適用されません。これらの古いページは、古いバージョンでも引き続き機能します。
旧バージョン:

新バージョン:

- ダッシュボードとエディターに警告メッセージを追加し、ユーザーが PageFly テーマ拡張機能をまだオンにしていない場合はオンにするように求めます。
- ユーザーは、「テーマ」>「アプリの埋め込み」に移動するのではなく、アプリ内で直接テーマ アプリ拡張機能を有効にできます。

製品メディアデモンストレーション機能の向上
- メインメディアに「メディアタイプ」を追加します。スライドショーと単一画像の2種類があります。

- メディア アイテム > 7 でページネーション 2 および 3 の UI を更新します。
- メインメディアの幅が狭くなったときに、UI を折りたたんだり最小化したりできます。

- ピンチしてズームするメカニズムを改善し、「クリックまたはタップしてズーム」というテキストを追加し、モバイル ビューでメディア リストをスワイプできるようにします。
製品メディア、ブログ詳細画像、コレクション詳細の画像読み込みの改善
さまざまなデバイスで画像品質を読み込み、表示するためのメカニズムを改善します。これらの要素に 3 つの設定を追加します。
- 遅延読み込み:画像は、ユーザーの表示ビューポートに入ったときにのみ読み込まれ、表示されます。これにより、PageSpeed が向上します。
- Eager:ページの読み込み時に、できるだけ早く画像の読み込みを優先します。これにより、LCP (Largest Contentful Paint) が向上します。
- 標準:ユーザー エクスペリエンスを向上します。

商品詳細の数量入力とボタンへのアクセスを可能にする
次の要素に aria-label を追加します: カートに追加ボタン、数量入力、商品詳細の増減ボタン:- PageFly で構築されたページが、障害のある人を含むすべての人によって使用され、アクセスできるようにします。
- ユーザーエクスペリエンスを向上させます。
VoiceOver を使用した例:

旧バージョン:

新バージョン:

保存したセクションの絞り込み機能
- 「セクションを保存」機能は、セクションがプレビュー画像として公開されるたびにセクションのスクリーンショットを作成し、キャプチャした画像を Shopify メディア ファイルに保存します。

ブログ投稿の要素を改善する
- ブログ投稿要素カタログ内のすべての要素にソース自動を追加します (ブログ投稿ページにのみ適用)。

- ブログ投稿要素カタログに、ブログ投稿タグとブログ投稿コメントの 2 つの新しい要素を追加します。

ブログページのUXを改善する
- ブログ ページの自動フォローとブログの詳細の自動フォローを区別するために、自動ソースに追加のサブパラメータを作成します。


- PageFly によって作成されたブログ ページの作成者を「Shopify API」ではなく「PageFly」に更新します。

- ブログ タイトル要素内でブログ記事のタイトルを編集できるようにします。

- エディターでコメントが無効になっている状態に関する通知を表示します。

最後に
PageFly 4.14.0 を使用すると、Shopify ストアをカスタマイズおよび強化する機能がさらに強化されます。
いつものように、私たちはあらゆる段階で 24 時間 365 日サポートいたします。ぜひこれらの新機能を体験し、そのメリットを実感して、その効果をお知らせください。
私たちは、皆様のフィードバックとニーズに基づいて PageFly を改善することに尽力しています。
以前の PageFly アップグレードの概要については、PageFly ブログをご覧ください。最新バージョンのアップデートにご期待ください。