ご質問いただいています、フッターメニューの横に画像を入れたい件ですが、
フッタメニューの横に画像を入れるには複数パターン考えられますが、
下記添付画像の様にアイコンとして画像を入れるパターンでご説明させていただきます。
PCでの見た目
スマホでの見た目
設定方法
管理画面 > オンラインストア > カスタマイズをクリックし、画面左側のテーマ設定開いて、カスタムCSSを開きます。
カスタムCSSに下記CSSを挿入してください。
CSS内の『https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png』はShopifyのコンテンツのファイルにアップした画像のURLに変更ください。
footer .list-menu__item {
padding-left: 25px;
background-size: 15px 15px;
background-repeat: no-repeat;
background-position-y: center;
}
@media screen and (min-width: 990px) {
footer li:nth-child(1) .list-menu__item {
padding-top: 0.5rem !important;
}
}
footer li:nth-child(1) .list-menu__item {
background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
footer li:nth-child(2) .list-menu__item {
background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
footer li:nth-child(3) .list-menu__item {
background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
footer li:nth-child(4) .list-menu__item {
background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
メニューが5つ以上ある場合は、下記CSSを対象のメニュー数分追加しnth-child(1)の数字は通番で番号を変更してください。
footer li:nth-child(1) .list-menu__item {
background-image: url(https://cdn.shopify.com/s/files/X/XXXX/XXXX/XXXX/files/icon.png);
}
ご参考まで。
(キュー小坂)