【Shopify liquid】 PC用画像とスマホ画像を違う画像にする-コピペするだけ #img_005

HTML 素材専用のnoteで作成した　【PCとスマホの画像を変える】をShopify liquid化！

自己紹介‐プロフィール

商品登録の外注歴12年越え↑↑

1万点以上の商品登録・移行、ネクストエンジン導入時のSKU整理などを得意としています🛒

Shopify ・カラーミー・楽天・Yahoo!・BASE等々…多種カートの仕様が判る商品データ仙人！Shopify をメインに活動をしています。

【HTML】→ 【liquid化】→【商品データ】 note紹介

▶ HTML 素材部門はこちら
▶ liquid 素材部門はこちら
▶ 商品データ＆構築部門はこちら

HTML　から　liquid化　Shopify 商品データ構築までを分野別にまとめて行きます。

【HTML・CSS】だけで作るアコーディオンメニュー【コピペで使える】

上記 HTML＆CSS で作ったアコーディオンメニューをShopify のSectionで使えるliquid化していきます！

Shopify のコード編集から新規sectionを作成してコピペするだけ！

{%- for block in section.blocks -%}

<div class="img-005">
 

 <a href="{{ block.settings.image005_link }}" ><img class="pc" src="{{ block.settings.image | image_url }}" alt="パソコン用の画像"></a>
 
 <a href="{{ block.settings.image005_link }}" ><img class="sp" src="{{ block.settings.mobile_image | image_url }}" alt="スマートフォン用の画像"></a>
 

 
</div>


{%- endfor -%}

<style>
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
/*2160 x 720px .jpg recommended"*/
.img-005 img {
   width: 100%;
 }

.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
/* 750 x 1100px .jpg recommended"*/
@media only screen and (max-width: 750px) {
   .pc { display: none !important; }
   .sp { display: block !important; }
}</style>


{% schema %}
{
"name":  "画像-005",
"tag":  "section",
"class":  "section",
"settings": [
],
"blocks":[
{
"name": "画像",
"type": "image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2160 x 720px .jpg recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "mobile_image",
"info": "750 x 1100px .jpg recommended. If none is set, desktop image will be used."
}, 
{
"type": "url",
"id": "image005_link",
"label": "Link"
}
]
}
],
"presets": [
{
"name": "画像-005"
}
]
}
{% endschema %}

あとがき

・どちらかの画像が無い場合…
・リンクが設定されてない場合…
・デフォルトの表示画像…

等　if  でコントロールするほうがより親切なコードにはなります。

Shopify のDawn のCSS は利用していませんが、他のテーマでは表示確認をしていませんのでCSSなどを調整してご利用ください。

こちらのサイトは、自己作業用に素材のコードをまとめていく予定ですので初歩的な情報は省きます。

継続が定着するまでは無料公開の予定ですが公開が難しいものは有料化や削除する場合がございますのでご了承のほどよろしくお願いします。