Smartpopup のスマホ画面での見え方の調整

日本語 ディスカッション Shopify アプリ

Topic summary

主題: Smartpopup（Promotion Popup想定）のスマホ表示で大きい文字が不自然に改行されるため、モバイル向け調整方法を相談。

  • 該当アプリに、デバイス別に文字サイズなどを標準設定で切り替える機能は見当たらないとの指摘。
  • 代替1（推奨）: HTML/CSS編集。ポップアップのデザイン調整画面で「ソースコード編集」を開き、styleにメディアクエリ（CSSで画面幅ごとにスタイルを切替える仕組み）を追加して、スマホ時のフォントサイズを小さくする。
  • 代替2（ノーコード）: ポップアップを複製し、Aは「Disable On Mobile=Yes」「Priority=1」、Bは「Disable On Mobile=No」「Priority=2」に設定。PCではA、スマホではBが表示されるようにし、Bのデザイン/フォントをモバイル前提に最適化。
  • 注意: 代替2はトリッキーで不具合の可能性あり。可能ならCSS編集が望ましい。
  • 補足: スクリーンショットが、ソース編集ボタンや「Disable On Mobile」「Priority」の設定場所の理解に重要。
  • 状況: 回答提案は出たが、質問者の実施報告はなく解決可否は未確認。
Summarized with AI on February 9. AI used: gpt-5.
1

smartpopup のスマホ画面での見え方の調整方法がわかりません。

PCだと綺麗に見えるのですが、スマホ画面だと大き目の文字が不自然な改行で表示されています。

スマホ画面用に表示の方法があるかご存知の方はいらっしゃいますでしょうか？

2

こちらのアプリで合っていますでしょうか？

https://apps.shopify.com/promotion-popup?locale=ja

もし合っていましたら、

私が見た限りでは、質問者さまのご要望通りの機能はアプリにはないようでした。

しかし、代替手段はありそうです。

HTML/CSSにお詳しい場合

アプリ内の、ポップアップのデザイン調整画面にて、ソースコード編集のボタンをクリックし、

ソースコード内のstyleにメディアクエリで文字サイズを調整するようなCSSを追加してあげることでスマホ表示の場合に、文字サイズを小さくする、ということが可能です。

screenshot_20220906.png
screenshot_20220906.png3360×1826 319 KB

HTML/CSSを編集したくない場合

  • スマホで表示した際に、文字サイズが気になるポップアップの設定と、全く同じ設定のポップアップをもう1つ作ります。元々のポップアップをA、新しく作ったポップアップをBとします。
  • Aのポップアップの、Disable On MobileをYesに、Priorityを1にします。(これで、Aのポップアップはスマホで閲覧した時には表示されません。)

screenshot_20220906_02.png
screenshot_20220906_02.png2090×982 126 KB

  • Bのポップアップは、Disable On MobileをNoに、Priorityを2にします。

こうすることで、

PCで閲覧した時には、ポップアップAが、

スマホで閲覧した時には、ポップアップBが、

表示されるはずです。

ポップアップBはスマホにしか表示されませんので、

ポップアップBのデザインやフォントサイズはスマホで閲覧されることを前提としたものに変えておくことで、表示を最適化できます。

しかし、かなりトリッキーなやり方なため、どんな不具合が出るか分かりません。

可能なのであれば、HTML/CSSを編集されることをお勧めします。

ご参考まで。

(キュー田辺)