Liquid、JavaScriptなどに関する質問
prestigeのテーマを使用しています。
「rich-text」というセクション内にimageブロックがあるのですが、現状カスタマイズページでは1つの画像のみ設定できる仕様です。これを、モバイルとWEBそれぞれ選択できるように変更したいです。
他のセクションを参考に以下のコードを組んでみたのですが上手く反映されません。
(カスタマイズページには変更が反映されていますが、写真を選択してもページに表示されません)
スキーマも"image"と"mobile-image"で分けて作成していますが、他にも設定が必要でしょうか。
{%- when 'image' -%}
{%- if section.settings.image != blank -%}
<picture>
{%- if section.settings.mobile_image != blank -%}
<source
media="(max-width: 699px)"
srcset="{{ section.settings.mobile_image | image_url: width: '400x' }} 400w, {{ section.settings.mobile_image | image_url: width: '600x' }} 600w, {{ section.settings.mobile_image | image_url: width: '800x' }} 800w, {{ section.settings.mobile_image | image_url: width: '1000x' }} 1000w"
width="{{ section.settings.mobile_image.width }}"
height="{{ section.settings.mobile_image.height }}"
>
{%- endif -%}
{{- section.settings.image | image_url: width: section.settings.image.width | image_tag: sizes: '100vw', widths: '200,300,400,500,600,700,800,900,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000,3200' -}}
</picture>
{%- endif -%}
解決済! ベストソリューションを見る。
成功
状況の詳細が不明なのと軽く見た程度の推測に基づきますのであっているかわかりませんが、 schema の id を mobile-image で設定したのであれば section.settings.mobile_image ではなく section.settings.mobile-image になります(アンダーバーとハイフンの違い)。
原因が上記ではない場合は以下をお勧めします。
参考:
https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture
以上ですがよくわからない場合はエキスパートやパートナーに依頼することをお勧めします。
成功
状況の詳細が不明なのと軽く見た程度の推測に基づきますのであっているかわかりませんが、 schema の id を mobile-image で設定したのであれば section.settings.mobile_image ではなく section.settings.mobile-image になります(アンダーバーとハイフンの違い)。
原因が上記ではない場合は以下をお勧めします。
参考:
https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture
以上ですがよくわからない場合はエキスパートやパートナーに依頼することをお勧めします。
承認が遅くなり申し訳ございません。ご回答いただきありがとうございました!
Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024