【Shopify 】スライドショーにリンクをつける!!!

【Shopify 】スライドショーにリンクをつける!!!

※Dawn Ver.9にアップロードされますとものすごくレイアウトが崩れます…
現在調査中ですのでそれ以降のバージョンでお試しください…

Shopify をカスタマイズし過ぎて何が何だか分からなくなってきました、クロエ・ルメールです。

CMでも言ってますオンラインショップを始めるならショッピファイ♪
って言ってますけど、まぁ~絶妙にかゆいところに手が届かないテンプレートばかり。
有料はどうか知りませんけど(笑)
でも唯一Shopify で褒めるべきなのはカスタマイズ性の高さです!

そして今回お教えするのはスライドショーにリンクをつける!
というものです。
セクションの項目にaタグ付けたらいいんじゃね?と思ったんですけど
これ…for文で生成されるからaタグ付けたら全部のスライドに同じリンクがついてしまう…
かといってコーディングすんのもめんどくさい。
できたらカスタマイズページで簡単にリンク先をつけれるようにしてほしい…

こんな感じで…
ってできんの!?
できちゃいます!


これがあれば複数してるブログのリンクを貼ったり、おすすめしたい商品バナーにリンクを貼って特集ページに飛ばすことだってできます!
てかなんでこれが標準でないねん!って話ですけど!

 

セクションのslideshow.liquidをいじる

Dawnを使っていますが、大体のテーマで使える技術だろうと思います。
タイトルの通りにslideshow.liquidを開いてずっと下へ
{% schema %}のところに以下のコードをほほいのほ~いと入れます。


    {
            "type": "url",
            "id": "image_link",
            "label": "Image Link"
          }

 

一応下に前後のコードも入れておきます。
たまにエラーになる原因としてカンマ忘れがあります。
気を付けてください


{% schema %}

"blocks": [
    {
      "type": "slide",
      "name": "t:sections.slideshow.blocks.slide.name",
      "limit": 5,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow.blocks.slide.settings.image.label"
        }, 
 
{%comment%}↓このコードを入れる{%endcomment%}

    {
            "type": "url",
            "id": "image_link",
            "label": "Image Link"
          },

 

そうすると冒頭のスクショのようにリンクをつけることができます。
めっちゃ簡単ですね。。
以下に完成形のコードを貼っておきます。


  {%- for block in section.blocks -%}
      <style>
        #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
          opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
        }
      </style>
         
      <div class="slideshow__slide grid__item grid--1-col slider__slide"
        id="Slide-{{ section.id }}-{{ forloop.index }}"
        {{ block.shopify_attributes }}
        role="group"
        aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
        tabindex="-1"
      > 

<!--↓ここに追加のコード↓-->
      {% if block.settings.image_link != blank %}
          <a href="{{ block.settings.image_link }}">
        {% endif %}  
<!--↑ここに追加のコード↑-->            

        <div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}">
          {%- if block.settings.image -%}
            <img
              srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
              sizes="100vw"
              src="{{ block.settings.image | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image.alt | escape }}"
              width="{{ block.settings.image.width }}"
              height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
            >
          {%- else -%}
            {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
     
        <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
          <div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
            {%- if block.settings.heading != blank -%}
              <h2 class="banner__heading {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
            {%- endif -%}
            {%- if block.settings.subheading != blank -%}
              <div class="banner__text" {{ block.shopify_attributes }}>
                <span>{{ block.settings.subheading | escape }}</span>
              </div>
            {%- endif -%}
            {%- if block.settings.button_label != blank -%}
              <div class="banner__buttons">
                <a{% if block.settings.link %} href="{{ block.settings.link }}"{% else %} role="link" aria-disabled="true"{% endif %} class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}">{{ block.settings.button_label | escape }}</a>
              </div>
            {%- endif -%}
          </div>
        </div>
          </a>
<!--↑ここに追加のコード↑-->   
      </div>
               
    {%- endfor -%}
  </div>
  

このブログを見つけた人はラッキーですよほんと。
こんな単純かつ必要な機能を標準でつけていないShopify にはオコですわ。
参考になりましたらウチでなんかグッズ作ってください(笑)



 

ブログに戻る
  • 【Adobe】アクリルキーホルダーをつくってみた 

    【Adobe】アクリルキーホルダーをつくってみた 

    Adobe Illustrator Photoshop

    アクリルキーホルダーをつくってみた Adobeイラストレータとフォトショップを使った講座動画になっています。自前でアクリルキーホルダーのデータを作れる方にはおすすめの動画です。ぜひこの動画を見てオリジナルのアクリルキーホルダーを作ってみてください!

    【Adobe】アクリルキーホルダーをつくってみた 

    Adobe Illustrator Photoshop

    アクリルキーホルダーをつくってみた Adobeイラストレータとフォトショップを使った講座動画になっています。自前でアクリルキーホルダーのデータを作れる方にはおすすめの動画です。ぜひこの動画を見てオリジナルのアクリルキーホルダーを作ってみてください!

  • スマホで簡単!アクリルフィギュアの台座をデザイン!

    スマホで簡単!アクリルフィギュアの台座をデザイン!

    Photoshop WEBサービス

    台座のデザインをしてみたいけどアドビのイラストレーターやフォトショップを持っていない…それどころかパソコンさえ持っていない…そんなあなたにスマホで簡単にデザインができる方法をお教えします! Photoshop EXで簡単デザイン! スマホ専用アプリであるPhotoshop EXを使って台座のデザインをしていきます。無料で使えてとっても便利!台座のデザインだけではなく、バナー制作や動画のサムネイルのデザインもできます!まぁ出力できる形式はjpgかpng形式だけなんですけど。動画で分かりやすくしてみました!※音が出るのでお気を付けください。 お使いのブラウザはこの動画に対応していません。

    スマホで簡単!アクリルフィギュアの台座をデザイン!

    Photoshop WEBサービス

    台座のデザインをしてみたいけどアドビのイラストレーターやフォトショップを持っていない…それどころかパソコンさえ持っていない…そんなあなたにスマホで簡単にデザインができる方法をお教えします! Photoshop EXで簡単デザイン! スマホ専用アプリであるPhotoshop EXを使って台座のデザインをしていきます。無料で使えてとっても便利!台座のデザインだけではなく、バナー制作や動画のサムネイルのデザインもできます!まぁ出力できる形式はjpgかpng形式だけなんですけど。動画で分かりやすくしてみました!※音が出るのでお気を付けください。 お使いのブラウザはこの動画に対応していません。

  • 【Shopify】DawnのVer.9.0.0対応!スライドショーの画像にリンクをつける!

    【Shopify】DawnのVer.9.0.0対応!スライドショーの画像にリンクをつける!

    Shopify コーディング

    ゴールデンウィーク真っ只中、皆さんはどこへ行かれていますか?このブログを期間中に見ているということは、あなた…ということで、今回はDawnがVer9.0.0の最新バージョンにアップグレードされて、大きく中身が変わりましたので、スライドショーの画像にリンクをつけなおそうと思います。無料のテンプレートをしっかりアップグレードしてくれるShopify流石でございます。一生ついていくから一株ゆずってくれぇ!以前にもブログで紹介しましたが、あのまま新しいテンプレートにコードをコピペするとレイアウトが崩れます。なぜなら、スライドショーが一新されておしゃれになったからです。しかし、相変わらず標準で画像自体にリンクをつけさせてくれません。なんで? スライドショーの画像にリンクをつける!  前回のようにセクションのslideshow.liquidを編集します。以下のコードをスキーマーのblocks内、type: urlの下に分かりやすく設置しましょう。     { "type": "url", "id": "image_link", "label": "Image Link" } そして次にhtmlをコーディングします。以下のコードをいれます。 {% if block.settings.image_link %} <a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item"> {% endif %} {% if block.settings.image_link...

    【Shopify】DawnのVer.9.0.0対応!スライドショーの画像にリンクをつける!

    Shopify コーディング

    ゴールデンウィーク真っ只中、皆さんはどこへ行かれていますか?このブログを期間中に見ているということは、あなた…ということで、今回はDawnがVer9.0.0の最新バージョンにアップグレードされて、大きく中身が変わりましたので、スライドショーの画像にリンクをつけなおそうと思います。無料のテンプレートをしっかりアップグレードしてくれるShopify流石でございます。一生ついていくから一株ゆずってくれぇ!以前にもブログで紹介しましたが、あのまま新しいテンプレートにコードをコピペするとレイアウトが崩れます。なぜなら、スライドショーが一新されておしゃれになったからです。しかし、相変わらず標準で画像自体にリンクをつけさせてくれません。なんで? スライドショーの画像にリンクをつける!  前回のようにセクションのslideshow.liquidを編集します。以下のコードをスキーマーのblocks内、type: urlの下に分かりやすく設置しましょう。     { "type": "url", "id": "image_link", "label": "Image Link" } そして次にhtmlをコーディングします。以下のコードをいれます。 {% if block.settings.image_link %} <a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item"> {% endif %} {% if block.settings.image_link...

  • 身バレ防止!匿名での商品の発送の仕方

    身バレ防止!匿名での商品の発送の仕方

    Vtuber WEBサービス お得情報

    Vtuberやイラストレーターさんは自分のグッズを買ってもらった後どうやって発送していますか?まさか自宅住所がわかるように発送していませんか?自宅がばれたくない!そんなあなたに私の叡智を授けましょう…   クロネコメンバーズで匿名発送! クロネコヤマトでクロネコメンバーズに登録すれば匿名で商品を発送することができます!オプション料として100円(税抜き)かかりますが、身を守るという面では安いくらいです。もうグッズの販売価格に入れ込んでしまっていいんじゃないですか?詳しくはクロネコメンバーズQ&Aへ 匿名発送で身を守ろう! 昨今からVtuberに対しての誹謗中傷や傷害事件、ストーカー被害など多くなってきました。ネットリテラシーが薄まる世の中、自分は大丈夫と思っていてもいきなり身に降りかかってくるかもしれません。自宅がばれて近所で張り込まれる可能性だってあります。あなたのファン層が全員善人とは限りません。防げることは多少お金がかかっても行うべきです!っても100円ですからね。しかもクロネコメンバーズ使い勝手いいしおすすめ。

    身バレ防止!匿名での商品の発送の仕方

    Vtuber WEBサービス お得情報

    Vtuberやイラストレーターさんは自分のグッズを買ってもらった後どうやって発送していますか?まさか自宅住所がわかるように発送していませんか?自宅がばれたくない!そんなあなたに私の叡智を授けましょう…   クロネコメンバーズで匿名発送! クロネコヤマトでクロネコメンバーズに登録すれば匿名で商品を発送することができます!オプション料として100円(税抜き)かかりますが、身を守るという面では安いくらいです。もうグッズの販売価格に入れ込んでしまっていいんじゃないですか?詳しくはクロネコメンバーズQ&Aへ 匿名発送で身を守ろう! 昨今からVtuberに対しての誹謗中傷や傷害事件、ストーカー被害など多くなってきました。ネットリテラシーが薄まる世の中、自分は大丈夫と思っていてもいきなり身に降りかかってくるかもしれません。自宅がばれて近所で張り込まれる可能性だってあります。あなたのファン層が全員善人とは限りません。防げることは多少お金がかかっても行うべきです!っても100円ですからね。しかもクロネコメンバーズ使い勝手いいしおすすめ。

  • 配信がもっとぐっと楽になる!スコラボ

    配信がもっとぐっと楽になる!スコラボ

    Vtuber Vtuber素材 WEBサービス お得情報

    配信のためにパソコンを買った!マイクも買った!ミキサーも奮発して買った!あとは配信用の素材を用意して華やかにしよう…ってうわーーーー!やることが多いーーー!と配信初心者は頭を抱えることが多いんじゃないでしょうか?配信者の方との交流があったので、そこの見えない努力ややらなければいけない作業を目の当たりにしいて、大変だなとしみじみ思っていました。今回はそんな時間を割かれる配信面での素材集めの部分を簡略化してくれる神のようなプラットフォームをご紹介します。 素材を選んで設置するだけで簡単スタート! スコラボでは素材を組み合わせて配信画面をデザインすることができます!どうしても自分で作ったり、フリー素材から用意したりとなるとデザインの偏りやクオリティーの担保が難しくなります。例えば、ポップでパリッとした映えるキャラデザのモデルなのに背景がなんか微妙だったり…そうなると全体のデザインがボヤっとなり引き締まらなくなり、世界観が損なわれる可能性が出ます。ですがこのスコラボ、素材のクオリティが高いのです!配信者を際立たせるデザインなので安心して使いたいデザインを選ぶことができます!一つ一つクリエイターがデザインしたものなのでめちゃくちゃおしゃれです!全部使ってみたくなる素材たちばかりです!   配信画面だけでなくサムネイル作成にも! 配信画面を作らないユーザーにも使えるようにサムネイル作成もスコラボで作れます!う~ん…最強だ…       使用可能な素材は4000種類以上! 何がすごいって利用できる素材の数に圧倒されます!4000種類以上の素材が利用できるので何を使おうが迷ってしまいます…ですがちゃんと行う配信目的に沿ってデザインをソートできるので、迷ってしまう時間が生まれません!選べる素材が多いと配信するのが楽しくなりそうですね!     OBSにリンクをして配信開始! OBS側にスコラボで作成されたリンクを「ブラウザ」ソースに紐づけすれば準備OK!誰でも簡単に配信画面を作成して配信できます。     どれだけ使っても使用料0円!? スコラボは無料です。これだけ使えるなら月額制にしたらいいのに…それぐらい使いやすい神webアプリです。   いかがでしたか?4000種類の素材が無料で使えるスコラボ。とにかく神様のようなこちらのサービス使わない手はないでしょう。Vtuberの人だけではなくYoutuberの人にも使えてとってもGood!僕もこれを機にストリーマーデビューしちゃおうかなって考えてみちゃったりなんかしちゃったりしてちなみにスコラボさんから依頼を受けてこのブログ書いているわけではありませんのでご安心ください!(?)とにかくめちゃくちゃ便利で楽しいサイト「スコラボ」さんのご紹介でした!   スコラボ公式サイト

    配信がもっとぐっと楽になる!スコラボ

    Vtuber Vtuber素材 WEBサービス お得情報

    配信のためにパソコンを買った!マイクも買った!ミキサーも奮発して買った!あとは配信用の素材を用意して華やかにしよう…ってうわーーーー!やることが多いーーー!と配信初心者は頭を抱えることが多いんじゃないでしょうか?配信者の方との交流があったので、そこの見えない努力ややらなければいけない作業を目の当たりにしいて、大変だなとしみじみ思っていました。今回はそんな時間を割かれる配信面での素材集めの部分を簡略化してくれる神のようなプラットフォームをご紹介します。 素材を選んで設置するだけで簡単スタート! スコラボでは素材を組み合わせて配信画面をデザインすることができます!どうしても自分で作ったり、フリー素材から用意したりとなるとデザインの偏りやクオリティーの担保が難しくなります。例えば、ポップでパリッとした映えるキャラデザのモデルなのに背景がなんか微妙だったり…そうなると全体のデザインがボヤっとなり引き締まらなくなり、世界観が損なわれる可能性が出ます。ですがこのスコラボ、素材のクオリティが高いのです!配信者を際立たせるデザインなので安心して使いたいデザインを選ぶことができます!一つ一つクリエイターがデザインしたものなのでめちゃくちゃおしゃれです!全部使ってみたくなる素材たちばかりです!   配信画面だけでなくサムネイル作成にも! 配信画面を作らないユーザーにも使えるようにサムネイル作成もスコラボで作れます!う~ん…最強だ…       使用可能な素材は4000種類以上! 何がすごいって利用できる素材の数に圧倒されます!4000種類以上の素材が利用できるので何を使おうが迷ってしまいます…ですがちゃんと行う配信目的に沿ってデザインをソートできるので、迷ってしまう時間が生まれません!選べる素材が多いと配信するのが楽しくなりそうですね!     OBSにリンクをして配信開始! OBS側にスコラボで作成されたリンクを「ブラウザ」ソースに紐づけすれば準備OK!誰でも簡単に配信画面を作成して配信できます。     どれだけ使っても使用料0円!? スコラボは無料です。これだけ使えるなら月額制にしたらいいのに…それぐらい使いやすい神webアプリです。   いかがでしたか?4000種類の素材が無料で使えるスコラボ。とにかく神様のようなこちらのサービス使わない手はないでしょう。Vtuberの人だけではなくYoutuberの人にも使えてとってもGood!僕もこれを機にストリーマーデビューしちゃおうかなって考えてみちゃったりなんかしちゃったりしてちなみにスコラボさんから依頼を受けてこのブログ書いているわけではありませんのでご安心ください!(?)とにかくめちゃくちゃ便利で楽しいサイト「スコラボ」さんのご紹介でした!   スコラボ公式サイト

  • 【Shopify】自動で新着商品に”NEW”のラベルを付ける!

    【Shopify】自動で新着商品に”NEW”のラベルを付ける!

    Shopify コーディング

    ホグワーツレガシーで15時間プレイしてやっと箒に乗るところまで来ました無能な働き者ルシウス・マルフォイです。ハードモードが思った以上にハードで禁じられた森のクモやカエルに一生ボコられていました(笑)   今回は自動で新規登録した商品や、期間限定の商品に対して”新着”や”SALE”などのラベルを付けたり外したりしてくれるコードを紹介します。       前回のおさらい 設定からカスタムデータでメタフィールドを作成するということをご紹介しました。そして、card-product.liquidの<div class="card__badge {{ settings.badge_position }}">のdiv内に以下のコードをコピペしたら商品情報で設定したラベルが表示されるというものでしたね。 {%- if card_product.metafields.newarrival_product.tag != blank -%} <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{card_product.metafields.newarrival_product.tag }} </span> {%- endif -%}...

    【Shopify】自動で新着商品に”NEW”のラベルを付ける!

    Shopify コーディング

    ホグワーツレガシーで15時間プレイしてやっと箒に乗るところまで来ました無能な働き者ルシウス・マルフォイです。ハードモードが思った以上にハードで禁じられた森のクモやカエルに一生ボコられていました(笑)   今回は自動で新規登録した商品や、期間限定の商品に対して”新着”や”SALE”などのラベルを付けたり外したりしてくれるコードを紹介します。       前回のおさらい 設定からカスタムデータでメタフィールドを作成するということをご紹介しました。そして、card-product.liquidの<div class="card__badge {{ settings.badge_position }}">のdiv内に以下のコードをコピペしたら商品情報で設定したラベルが表示されるというものでしたね。 {%- if card_product.metafields.newarrival_product.tag != blank -%} <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{card_product.metafields.newarrival_product.tag }} </span> {%- endif -%}...

1 6