Liquid、JavaScriptなどに関する質問
掲題の件、Narrativeのテーマのスライドショーおいて、PCとSPで表示される画像を別々に設定にしたいです。
過去の似たような質問に対して、技術的に専門知識がないと難しいと回答がありましたが、以下の記事を発見して試してみました。
https://qiita.com/br-to/items/ed3253bcae8db0fad398
しかし、Sectionsに作成した「image.liquid」にコードをコピペして貼ったところ「Error: Invalid JSON in tag 'schema'」というメッセージが表示されました。
貼ったコードは以下の通りです。
<picture>
<source class="feature-row__image-wrapper " media="(min-width: 768px)" srcset="{{ section.settings.image_pc | img_url: 'large' }}"> // 幅768px以上はsourceタグの画像を表示
<img class="feature-row__image-wrapper" src="{{ section.settings.image_sp | img_url: 'large'}}"/> // 幅768px未満はimgタグの画像を表示
</picture>
{% schema %}
{
"name": "画像切り替え",
"settings": [
{
"type": "image_picker",
"id": "image_pc",
"label": "画像(PC)" //pc画像用のセクション定義
},
{
"type": "image_picker",
"id": "image_sp",
"label": "画像(SP)" //sp画像用のセクション定義
}
]
}
{% endschema %}
①そもそもURLのやり方で画像の切り替えが可能なのか
②可能であればなぜエラーメッセージが出るのか
どなたかお分かりになる方はいらっしゃいますでしょうか?宜しくお願い致します。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024