FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

【Dawn】デスクトップのみ指定の画像バナーを表示させない方法

【Dawn】デスクトップのみ指定の画像バナーを表示させない方法

えびさん
訪問者
2 0 0

【Dawnテーマ】で、指定の画像バナーをデスクトップ上のみ非表示(スマホ上では表示)したいのですが、どのようにすればいいでしょうか?

 

3件の返信3

株式会社ナレッジサービス
Shopify Partner
71 30 28

image-banner.liquidにコードを追記することで対応可能です。

 

具体的な方法はこちらの記事にまとめました。

https://knowledge-service.net/tech/image-banner-desktop/

えびさん
訪問者
2 0 0

回答有難うございます。

 

 { "type": "checkbox", "id": "hide_desktop", "default": false, "label": "デスクトップでは表示しない" },の入力箇所が分からなかったので、チャットGPTに聞きながら進めてみました。

 

"default": "center", "label": "t:sections.image-banner.settings.desktop_content_alignment.label" }, { "type": "checkbox", "id": "hide_desktop", // ここに追加! "default": false, "label": "デスクトップでは表示しない" },

 

ここまでは問題なく完了し、管理画面に表示・非表示を選択するチェックボックスができました。

 

その後、指定通りにチェックが入っているときだけクラスを付与するコードを記述した所、バナー画像がデスクトップとスマホ共にズレてしまいまして進めることが出来ませんでした。

 

株式会社ナレッジサービス
Shopify Partner
71 30 28

「ズレてしまい」とは、具体的にどのような状況でしょうか?

 

画面やコードの画像があれば原因がわかるかもしれません。