Liquid、JavaScriptなどに関する質問
フッターの画像はバナーになりたいので、リンクを付けたいです。
実装方法などあれば教えていただきたいです。
テーマはrefreshになります。
ご質問拝見いたしました。
refreshはデフォルトの状態ですとフッターに画像を入れることは可能ですが、リンクは挿入できません。
なのでリンクを挿入するにはliquidファイルのコードの編集をする必要があります
以下が手順になります。
1. カスタマイズのメニューからコードをカスタマイズを選択する。
2. セクションファイルの中から「footer.liquid」を選択する。
3. 下部の430~450行あたりにtype="image"の部分があるのでリンクを挿入するための以下コードを挿入する(参照画像添付)
{
"type": "url",
"id": "id_url",
"label": "URLを入力"
},
)
4.リンクが挿入できるようになったので、画像と挿入したリンクを連動させるためのコードを編集します。(参照画像添付)
リンクは以下の<a>タグを140行目あたりのimgタグを囲うようにしてコードを追加するとリンク付きの画像として使用できます
<a href="{{ block.settings.id_url }}">
<img xxxxxxxx>
</a>
以上で画像にリンクを挿入できるようになりますのでお試しください。
なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。
迅速なご回答ありがとうございます。
ご回答いただいた方法を試してみましたが、画像がリンクに接続されません。
クリックしてもホームページに戻ってしまいます。
これはどのような問題が原因でしょうか?
クリックできたということはリンクは設定できるようになったのかなと思います。
カスタマイズ画面でリンクを入力する欄を作成することはできていますでしょうか?
リンクを間違ってはいないでしょうか?
以上2点についてはいかがでしょうか?
入力欄にURLを入力していなかったようです。問題は解決しました!
また、クリック後に新しいウィンドウで開くようにしたい場合、どのように設定すればよいでしょうか?
以下のようにtarget="_blank" という記述をaタグ内に入れることで、別タブで開くことが可能になります。
<a href="example.com" target="_blank"></a>
Shopifyの請求書の支払いが失敗したという通知を受け取って驚いたことはありますか。初めての支払いでエラーが発生したり、これまで何の問題もなく支払いできていたのに突然失敗し...
By Minami_ Sep 8, 20242023年2月、Shopifyはcheckout.liquidを廃止し、Checkout Extensibilityに移行することを発表いたしました。この新しいチェックアウト...
By JasonH Aug 15, 2024「味噌の可能性を、とき放つ」をコンセプトに、豊かな自然に恵まれた信州で味噌の製造販売を行う新田醸造。江戸末期に創業した老舗のみそ屋さんですが、2024年春、顧客層や販売範囲の...
By Minami_ Jul 30, 2024