FROM CACHE - jp_header

フッターの画像はどのような方法でリンクを付けますか?

フッターの画像はどのような方法でリンクを付けますか?

sunsun572
観光客
4 0 0

フッターの画像はバナーになりたいので、リンクを付けたいです。

実装方法などあれば教えていただきたいです。

テーマはrefreshになります。

 

截圖 2024-02-01 16.24.54.png

5件の返信5

株式会社フルバランス
Shopify Partner
1540 550 699

ご質問拝見いたしました。

refreshはデフォルトの状態ですとフッターに画像を入れることは可能ですが、リンクは挿入できません。

なのでリンクを挿入するにはliquidファイルのコードの編集をする必要があります

以下が手順になります。

1. カスタマイズのメニューからコードをカスタマイズを選択する。

 

2. セクションファイルの中から「footer.liquid」を選択する。

 

3. 下部の430~450行あたりにtype="image"の部分があるのでリンクを挿入するための以下コードを挿入する(参照画像添付)

{
 "type": "url", 
 "id": "id_url", 
 "label": "URLを入力"
},

スクリーンショット 2024-02-02 15.41.33.png

 

4.リンクが挿入できるようになったので、画像と挿入したリンクを連動させるためのコードを編集します。(参照画像添付)

リンクは以下の<a>タグを140行目あたりのimgタグを囲うようにしてコードを追加するとリンク付きの画像として使用できます

<a href="{{ block.settings.id_url }}">
<img xxxxxxxx>
</a>

スクリーンショット 2024-02-02 15.47.31.png

 

以上で画像にリンクを挿入できるようになりますのでお試しください。

 

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
sunsun572
観光客
4 0 0

迅速なご回答ありがとうございます。
ご回答いただいた方法を試してみましたが、画像がリンクに接続されません。
クリックしてもホームページに戻ってしまいます。
これはどのような問題が原因でしょうか?

p01.png

p02.png

  

 

株式会社フルバランス
Shopify Partner
1540 550 699

クリックできたということはリンクは設定できるようになったのかなと思います。

カスタマイズ画面でリンクを入力する欄を作成することはできていますでしょうか?

リンクを間違ってはいないでしょうか?

以上2点についてはいかがでしょうか?

 

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
sunsun572
観光客
4 0 0

入力欄にURLを入力していなかったようです。問題は解決しました!
また、クリック後に新しいウィンドウで開くようにしたい場合、どのように設定すればよいでしょうか?

株式会社フルバランス
Shopify Partner
1540 550 699

以下のようにtarget="_blank" という記述をaタグ内に入れることで、別タブで開くことが可能になります。

<a href="example.com" target="_blank"></a>

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス