FROM CACHE - jp_header

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

K-2taka
Shopify Partner
9 0 0

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

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

 

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

1件の返信1

Qcoltd
Shopify Partner
1051 429 417

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

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

 

もし合っていましたら、

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

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

 

HTML/CSSにお詳しい場合

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

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

screenshot_20220906.png

 

 

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

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

screenshot_20220906_02.png

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

 

こうすることで、

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

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

表示されるはずです。

 

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

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

 

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

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/