Shopifyカスタムリキッドでボタンリンクを設置する方法【コード編集初心者向け】

shopifyのトップページでシンプルなボタンリンクを付けたい！というときは「リッチテキスト」というセクションで簡単に設定できますが、「ボタンのデザインにこだわりたい」「ボタンに別のテキストを被せたい」など複雑な場合には使えません。。。

そんな時に便利なのが「カスタムLiquid（リキッド）」セクションです。

テーマファイルに直接書かず、「オンライン＞カスタマイズ」から設定できます。

今回は、カスタムリキッドを使って、インスタ風カラーのinstagramへのボタンリンクに、「今すぐチェック！」というテキストを被せてみた、という話です。

この記事を書いた人

パピティー

htmlとCSSのきほん本を3冊読んだだけの初心者が、やりたいことベースで、shopifyとwordpressに奮闘中。

カスタムリキッドで作ったボタンリンク完成イメージ
カスタムリキッドに書くコード
まとめ

カスタムリキッドで作ったボタンリンク完成イメージ

わんにゃん.com instagram

ウエスティ犬を配信中

wordpressでは、このインスタグラムのアイコンにfont-awesomeを使っていますが、shopifyでは、「icon-instagram.liquid」ファイルがあったので、そこから引用しました。

カスタムリキッドに書くコード

こちら↓で、色やサイズ、テキストはお好きなように調整してくださいね！（前後を＊と＊で挟んでいる箇所は自由に設定してください）

<div style="text-align: center; margin-top: 20px;">
  <a rel="noreferrer noopener" href="＊ここはリンク先のURLを入れる＊" target="_blank" class="insta_btn">
    <div class="instagram-info">
      <div class="icon-instagram">
        {% render ‘icon-instagram’ %}
      </div>
      <div class="instagram-text">
        <div>＊ここに好きなテキストを入れる（上段）＊</div>
        <div>＊ここに好きなテキストを入れる（下段）＊</div>
      </div>
    </div>
  </a>
</div>

.insta_btn .instagram-info {
    font-size: 14px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.insta_btn .icon-instagram {
    display: inline-block;
    margin-right: 10px;
    width: 50px; 
    height: 50px; 
  }

.insta_btn .instagram-text {
    display: inline-block;
    text-align: center; 
  }

.insta_btn .instagram-text div {
    margin-bottom: 4px;
  }

/* PC向けスタイル */
  @media (min-width: 768px) {
.instagram-text{
font-size:22px;
}
    .insta_btn {
      width: 400px; /* PC用の幅を広げる */
      margin: 0 auto; /* 中央揃え */
    }

.insta_btn::after {
      content: "Follow us!";
      position: absolute;
      top: -20%; /* ボタンの高さの上からの位置 */
      right: -30%; /* ボタンの幅の右端からの位置 */
      transform: rotate(15deg);
      color: ＊ここに好きなカラー番号を入れる＊; 
      font-weight: bold; 
      font-size: 35px;
      text-shadow: 
        2px 2px 0 #fff,
        -2px -2px 0 #fff,
        2px -2px 0 #fff,
        -2px 2px 0 #fff; 
      pointer-events: none; 
      z-index: -1;
    }
  }

/* スマートフォン向けスタイル */
  @media (max-width: 767px) {
    .insta_btn {
      width: 300px; 
      margin: 0 auto;     }

.insta_btn::after {
      content: "Follow us!";
      position: absolute;
      top: -30%;
      right: -8%; 
      transform: rotate(15deg);
     color: ＊ここに好きなカラー番号を入れる＊; 
      font-weight: bold;
      font-size: 20px;
      text-shadow: 
        1px 1px 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff;
      pointer-events: none;
      z-index: -1;
    }
  }
</style>

※PCとSPで見え方を調整するために別々に書きました。慣れている方はもっと効率よく書けると思いますが、悪しからず・・・

まとめ

shopifyで用意されていないセクションや複雑なデザインは、カスタムLiquidを使うと、わざわざコードエディターからファイルに直接書き込む必要はないので、便利です。

shopifyのカスタムリキッドでボタンリンクを設置する方法

カスタムリキッドで作ったボタンリンク完成イメージ

カスタムリキッドに書くコード

まとめ

shopifyのカスタムリキッドで
ボタンリンクを設置する方法