テーマは【dawn】を使用しています。
スライドショーを画像をスマホで表示する時、スマホサイズの縦長に切り替えたいと考えてます。
可能でしょうか？
Liquidは全くの初心者です。
よろしくお願い致します。
2 Likes
ご質問いただいているスライドショー画像をスマホサイズに切り替えたい件ですが、
liquidファイルとcssを調整することでスマホで見た際の画像を変更する事が可能です。
Dawnテーマ9.0.0を元に説明させていただきます。
他のバージョンでは、スライドショーの作りが異なっている場合がありますので、ご了承ください。
また、スマホ用の画像縦横比率をは16：9で作られた画像を表示する前提で調整を加えています。
設定方法
**1.**管理画面 > オンラインストア『・・・』をクリックし、『コードを編集』を選択。
**2.**左上の検索窓に『slideshow.liquid』と検索し絞り込まれたファイルを開く。
**3.**ファイル内で下記コードの下に、
{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},
下記コードを追加してください。
{
"type": "image_picker",
"id": "image_sp",
"label": "SP用イメージ"
},
※「labelのSP用イメージ」の表示は任意のテキストに変更ください。
**4.**ファイル内で下記コードを検索し
下記コードに変更
**5.**ファイル内で下記コードを検索し
上の行に下記コードを追加してください。
{%- liquid
assign height = block.settings.image_sp.width | divided_by: block.settings.image_sp.aspect_ratio | round
if section.settings.image_behavior == 'ambient'
assign sizes = '120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
else
assign sizes = '100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
endif
-%}
{{
block.settings.image_sp
| image_url: width: 3840
| image_tag:
loading: 'lazy',
height: height,
sizes: sizes,
widths: widths
}}
**6.**カスタムCSSに下記CSSを追加
.pc-only {
display: none;
}
.sp-only {
display: block;
}
@media screen and (min-width: 750px) {
.sp-only {
display: none;
}
.pc-only {
display: block;
}
}
@media screen and (max-width: 749px) {
slideshow-component .slideshow.banner .sp-only {
height: 177.777vw;
}
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt)
.banner__content {
min-height: 177.777vw;
}
}
※画像の縦幅の比率によって177.777vwの数字は変更ください。
現状は前段でも説明しました、縦横比が16：9の画像が表示した際綺麗に収まるよう調整しています。
スマホ用の画像はスライド追加画面に登録エリアが表示されます。
登録後、スマホで見ると登録した画像が表示されます。
ご参考まで。
(キュー小坂)
横からすみません。
こちらの説明を参考に、スライドショーのSP画像を追加することができたのですが、
画像バナーのセクションも、PCサイズの画像のみとなり同様にコードを追加する必要がありそうです。
もしおわかりでしたら、画像バナーの場合はどのようにすればよいか教えていただけますでしょうか？
1 Like
横からすみません。
縦横の比率を変えたいのですがうまく出来ず、4:3にしたい場合、177.777を何に変更すればできますか？
4:3の画像の縦位置が4または3で下記のように数値が変わります。
比率の4が縦の場合「133.333vw」
比率の3が縦の場合「75vw」
ご参考まで。
（キュー小坂）
はじめまして
株式会社UnReactの福本と申します。
既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、弊社のアプリ「シンプルスライドショー｜お手軽画像スライダー」も有効な解決策の一つとしてご紹介させていただきます。
「シンプルスライドショー｜お手軽画像スライダー」は、ストアにノーコードでスライドショーを表示できるアプリです。質問にもあるような、PC用とスマホ用で別々の画像を設定できます。
詳細な使い方に関しては、以下のご利用ガイドをご覧ください。
Shopifyにスライドショーを追加して画像をスライダー表示できるアプリについて徹底解説｜ご利用ガイド
その他にも 45 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。