PageFlyでコードなしで固定セクションを作成する方法

固定セクションについて

この記事では、カスタムCSSコードを使用せずに固定セクションを作成する方法を学びます。

概要：固定セクションは、顧客がストアをスクロールしても重要なコンテンツが見えるようにするのに役立ちます。特定のセクションを「固定」にすることで、それらがその場に固定されたままになり、顧客はトップに戻るためにスクロールすることなく、重要な情報に簡単にアクセスできます。

固定セクションは、行動喚起や、ユーザーがストアフロントを探索する際に目立つように表示しておきたいあらゆるコンテンツに特に役立ちます。

このマニュアルの残りを読むか、PageFlyで固定セクション機能を設定する方法のチュートリアルビデオを見ることができます。

PageFly固定セクションへのアクセス方法

ページエディターから

ページエディターで、以下の手順に従って固定セクション設定にアクセスします。

• ステップ1：固定したいセクションをクリックします。

• ステップ2：Generalタブに移動し、「Enable Sticky Top」までスクロールして「Yes」を選択します。

• ステップ3：メニューバーの「公開」ボタンからページを公開し、ライブページで結果を確認します。

PageFly固定セクションの設定方法

Enable Sticky Top機能をオンにすると、調整できる2つの詳細設定があります。

Top Offset: ビューポートの上端と固定セクションの間隔を調整します。

Apply elevation（More settingsボタン内）：セクションのスタックレベルで、スタックレベルが大きい方が低い方の前面に表示されます。

一般的なケース

1. セクションが固定されない

上記の手順をすべて実行したにもかかわらず、固定セクションがまだ機能しない。その理由がわからない？

「このセクションを固定に設定しましたが、ライブビューで動作しません。」：

理由は、このセクションを含むコンテナセクションにテーマからの「overflow:hidden;」というコードが含まれているためです。このコードは固定コードを上書きし、固定セクションが動作しないようにします。これを修正するには、以下の手順に従ってください。

• ステップ1：ライブページで、固定セクションを右クリックし、「検証」を開きます。

• ステップ2：固定セクションから、このセクションを含むコンテナセクションを一つずつ確認します。

• ステップ3：セクションの「Styles」タブに「overflow:hidden;」というコードが表示されるまで確認します。

• ステップ4：このセクションのClass Nameをコピーします。PageFlyページエディターに戻り、Custom Code Editorを開きます。

• ステップ5：このコードを追加します：.classname {overflow: visible !important;}

このケースでは、セクションのClass Nameは「pagefly-container」なので、追加する必要のあるコードは次のようになります。

• ステップ6：ページを公開し、ライブビューを確認します。

上記の解決策を試しても固定セクションがまだ機能しない場合は、24時間年中無休のアプリ内ライブチャットでお問い合わせください。直接お手伝いさせていただきます。

2. 商品の「カートに追加」ボタンを固定にする

「カートに追加」ボタンを画面上部に固定するには、まずページ上のセクションに「カートに追加」ボタン要素を追加します。次に、そのセクションに対して「Sticky Top」設定をオンにします。これにより、「カートに追加」ボタンは、訪問者がページをスクロールダウンする際にビューポートの上部に表示され続けます。以下のビデオでは、そのプロセス全体が示されています。

よくある質問

1. 「Enable Sticky Top」が表示されないのはなぜですか？

Enable Sticky Top設定はセクション要素にのみ適用されます。この設定にアクセスするには、ページエディターの以下の領域のいずれかを使用してセクションをクリックします。

• Page Outline

• Canvas

• Breadcrumbs

2. ボタンが上部に固定されている間に、背景を透明にすることはできますか？

はい、可能です！ボタン要素をセクションにドラッグアンドドロップし、そのセクションを透明かつ固定にします。このガイドに従ってください。

追加リソース

• PageFlyページで全幅セクションを作成する5つのステップ