【Shopify】カスタマイズで画像にURLを入れるセクションをliquidで作成する

投稿日:2021.12.26

Shopifyテーマのカスタマイズから、画像にURLをリンクすることが出来るセクションを作成する方法を紹介します。

画像にURLをリンクする

こちらの記事で作成した画像を作成するセクションで、設置した画像にURLをリンクできるようにします。
下記のコードがurlを入れるコードになります。

<a href="{{ section.settings.link }}">URLを適用させるよ</a>

{% schema %}
{
  "name": "リンク",
  "settings": [
    {
      "type": "url",
      "id": "link",
      "label": "URLを入れる場所"
    }
  ],

"presets": [
   {
     "name": "リンク",
     "category": "テキスト"
   }
 ]
}
{% endschema %}


typeurlとすることでurlをアップ出来るセクションとして設定できます。
前回の画像をアップするセクションの設定と同じように、

<a href="{{ section.settings.link }}">


section.settings.の後の文字はschemaで定義したidを入力してください。

画像をアップするコードと合わせる

前回のコードと合わせたものが下記になります。

<a href="{{ section.settings.link }}"><img src="{{ section.settings.image_box | img_url: 'master' }}" alt="{{ section.settings.image_box.alt }}"></a>

{% schema %}
{
  "name": "画像ボックス",
  "settings": [
    {
      "type": "image_picker",
      "id": "image_box",
      "label": "画像を選ぶ"
    },
    {
      "type": "url",
      "id": "link",
      "label": "URL"
    }
  ],

"presets": [
   {
     "name": "テスト画像",
     "category": "画像"
   }
 ]
}
{% endschema %}


imgタグを先ほどのaタグで囲んで、選んだ画像にurlリンクを設定できるようにします。
schemaの画像設定部分の下にurlの設定を入力します。
画像設定とurl設定はカンマで区切ってください。
※1 presetsはコードを足すのではなく、このままで大丈夫です。

◎ポイント
※1 このセクションはあくまで画像を設定するセクションですのでcategoryは画像になります。
また、presetsを設定することで、indexページに作成したセクションの項目が追加され、カスタマイズできるようになります。

カスタマイズの画面を確認する

前回作成した画像のセクションにURLが追加されました。



shopifyのurlの選択は下記の様に選択するだけで簡単にリンクすることが出来ます。
もちろんurlを直接入力してリンクすることも可能です。



urlを選択して保存することで画像にurlがリンクされました。


SNSでシェア

このエントリーをはてなブックマークに追加
弊社ブログの最新記事を無料メルマガでお届け!

関連記事

【Shopify】blocksで繰り返し要素を作成する

【Shopify】blocksで繰り返し要素を作成する

2022.02.01

【Shopify】カスタマイズで画像をアップするセクションをliquidで作成する

【Shopify】カスタマイズで画像をアップするセクションをliquidで作成する

2021.12.01

楽天スーパーセール必殺マニュアル
売上リサーチツール mark bench
【Shopify】blocksで繰り返し要素を作成する

2022.02.01

【Shopify】blocksで繰り返し要素を作成する

【Shopify】カスタマイズで画像にURLを入れるセクションをliquidで作成する

2021.12.26

【Shopify】カスタマイズで画像にURLを入れるセクションをliquidで作成する

【Shopify】カスタマイズで画像をアップするセクションをliquidで作成する

2021.12.01

【Shopify】カスタマイズで画像をアップするセクションをliquidで作成する

【楽天市場】広告費削減のためにまずやるべきRPP広告のチューニング

2020.07.12

【楽天市場】広告費削減のためにまずやるべきRPP広告のチューニング

Amazon出店時に気を付ける3つのポイント

2020.05.25

Amazon出店時に気を付ける3つのポイント

楽天他社売上想定ツールmarkbench新機能追加のお知らせ

2020.05.20

楽天他社売上想定ツールmarkbench新機能追加のお知らせ

Amazonで売る戦略!スポンサーブランド広告とは?

2020.05.18

Amazonで売る戦略!スポンサーブランド広告とは?

より魅力的な商品ページに!商品紹介コンテンツとは?

2020.05.08

より魅力的な商品ページに!商品紹介コンテンツとは?

今ならECコンサル無料お試し可
弊社ブログの最新記事を無料メルマガでお届け!
DX人材・Webマーケター育成サービスのD-marketing Academy(Dマーケティングアカデミー)

SERVICE

多くの選択肢の中から最適解を導き出し、高精度な施策のご提案を行います

CONTACT

サービスに関するご相談やご質問などこちらからお問い合わせください。