Liquid、JavaScriptなどに関する質問
下記のようなセクションを自作して、HOMEページ(TOPページ)に組み込みたいのですが、一部(img部分)がなぜか表示されません。
テキスト部分(SAMPLEなど)は表示され、さらにtheme.liquidに読み込ませたCSSも効いているような感じですが、img部分は全く表示されません。
原因がわかれば教えてください。
<div class="about">
<p class="sectionHeding">
SAMPLE
<br>
<small>sample</small>
</p>
<div class="about-img">
<div class="about-slider">
<div class="item slick-slide">
<a href="XXX">
<img src="XXX" alt="sampleについて">
</a>
</div>
</div>
</div>
</div>
{% schema %}
{
"presets": [
{
"name": "ABOUT",
"category": "image"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
単純に考えれば画像のパスが間違っているのではと思いますので確認されることをお勧めします。
画像の置き場所がわからないのでなんとも言えませんが、assetsディレクトリ内に入れているのであれば以下のドキュメントなどを参照ください。
https://shopify.dev/api/liquid/filters/url-filters#asset_img_url
なお「slick-slide」というクラス名が少々気にはなりますので、画像が本当にブラウザで取得できていないかを開発者ツールで確認されることもお勧めします。
JSやCSSの影響で非表示になっているだけの可能性もありますので、Slickを使われている場合はSlickのドキュメントも参照ください。
Shopifyの請求書の支払いが失敗したという通知を受け取って驚いたことはありますか。初めての支払いでエラーが発生したり、これまで何の問題もなく支払いできていたのに突然失敗し...
By Minami_ Sep 8, 20242023年2月、Shopifyはcheckout.liquidを廃止し、Checkout Extensibilityに移行することを発表いたしました。この新しいチェックアウト...
By JasonH Aug 15, 2024「味噌の可能性を、とき放つ」をコンセプトに、豊かな自然に恵まれた信州で味噌の製造販売を行う新田醸造。江戸末期に創業した老舗のみそ屋さんですが、2024年春、顧客層や販売範囲の...
By Minami_ Jul 30, 2024