Shopifyテーマで、全ページの右下に画像バナーを常時表示し、スクロールや商品ページ遷移後も追従させる方法が質問されている。参考例として外部サイトの「300円クーポン」画像のような表示を実現したいが、アプリ・テーマ機能・コード編集のどれで実装されているか判別できず、手がかりを求めている。
回答では、主に2つの方法が示されている。
theme.liquid の </body> 直前付近にバナー用HTMLを追加し、CSSの position: fixed; で画面右下に固定する方法が簡単と説明された。また、一定量スクロール後に表示するなど動きが必要な場合はJavaScriptが必要と補足されている。結論として、テーマ依存の特殊機能というより、アプリまたは通常のWeb制作で使う固定バナー実装で対応できる、という方向性が示された。議論は具体的な実装手順までは未解決。
どなたか知恵を貸していただけますと嬉しいです。
上記のサイトのページの右下に「300円クーポン」という画像が表示されていて
画面をスクールしても、各商品ページに移動してもずっと表示されているのですが
このような画像を設置したいと考えております。
こちらでソースコードなどを確認してみたものの
どのようなカスタムをしているのか分からなく、
またアプリを使用している、またはテーマに依存したものかと思い調べてみたのですが
どのように画像を表示させているか分からず困っています。
方法が分かれば一番ありがたいのですが
コードを編集している、アプリを使っている、テーマに関係するものというように
ざっくり分かるだけでも大変助かります。
Shopifyにはバナーに関するアプリがありますので、以下などで探していただくとご希望のものが見つかるかもしれません。
https://apps.shopify.com/search?q=banner
たまたま見た以下のアプリ内で選べる「Stickers」というタイプはご要望に近そうではあります。
https://apps.shopify.com/promo-bar
アプリを使わない場合は、おそらくtheme.liquidにあると思われるbodyタグやラッパー要素の終了タグ()の直前あたりにバナーのHTMLを記述し、CSSの position:fixed; を使って固定するのが簡単かなと思います。
ある程度下にスクロールしてから表示させるなどが必要な場合は、javaScriptが必要になります。求める表現が豊富なほど難度は上がります。
記述対象のファイル以外に関してはShopifyに関わらない通常のwebサイト制作の情報で対応できる事柄のため、「下部固定バナー」などで検索いただきその情報を元に色々試されると良いかなと思います。