[Shopify] liquidコードスニペット集

公式のやつと被るものもある。

アカウント関連

新規会員登録導線

{%- if customer != true -%}
  <a href="{{ routes.account_register_url }}">
     新規会員登録
  </a>
{%- endif -%}

アイコン横にユーザー名orログインテキストの表示

{%- if shop.customer_accounts_enabled -%}
  <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}">
    <span class="icon-account">{% render 'icon-account' %}</span>
    {%- if customer -%}
      <span class="icon-label">
        {{ customer.name }}
      </span>
    {%- else -%}
      <span class="icon-label">
        {{ 'customer.log_in' | t }}
      </span>
    {%- endif -%}
  </a>
{%- endif -%}

フォント設定機能

Dawnから抜粋

Schema

settings_schema.json にカスタムするフォントの設定を追加する

{
  "type": "font_picker",
  "id": "type_header_font",
  "default": "assistant_n4",
  "label": "t:settings_schema.typography.settings.type_header_font.label",
  "info": "t:settings_schema.typography.settings.type_header_font.info"
}

theme.liquid

テーマのheadタグ内にフォントファイルのlinkタグ追加：

 {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
      <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
    {%- endunless -%}

{%- unless settings.type_header_font.system? -%}
      <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}

styleタグ内で利用：

{% style %}      
  {{ settings.type_header_font | font_face: font_display: 'swap' }}

   --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
   --font-heading-style: {{ settings.type_header_font.style }};
   --font-heading-weight: {{ settings.type_header_font.weight }};
{% endstyle %}

Shopify提供のフォントには日本語が含まれてない。
この辺の設定全部削除するなり変えるなりすれば、GoogleFontsに変更とかもできる。

SNSシェアボタン

シェアに必要なのはURLとシェアするテキストだが、商品と記事・ページその他によって参照するオブジェクトが異なる。

スニペット作成

snippets/sns-share.liquidを作成しておく。
以下は例としてTwitterのシェアボタンを表示するソースである。
パラメーターでshare_textとshare_urlを渡す。

{% comment %} 
params:
 - share_text
 - share_url
{% endcomment %}
<div class="sns-share">
  <a class="sns-share__btn share-button--twitter" href="https://twitter.com/intent/tweet?text={{ share_text | url_encode }}%0a&url={{ share_url | url_encode }}" target="_blank" rel="nofollow noopener noreferrer" title="Twitterでシェア">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
         viewBox="0 0 400 400">
        <path fill="#1DA1F2" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300
          C400,377.6,377.6,400,350,400z"/>
        <path fill="#fff" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6
          c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2
          c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8
          c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8
          c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7
          C97.7,293.1,124.7,301.6,153.6,301.6"/>
      </svg>
    <span class="visually-hidden">Twitterでシェア</span>
  </a>
</div>

商品ページの場合

デフォルトは商品ページのURLだけどバリエーションが選択されていたらそのURLとする。
フィルターを使うstringを直接渡そうとしても空になるので、変数に入れる。

{% assign share_url = product.selected_variant.url | default: product.url | prepend: shop.url %}
{% render 'sns-share' | 
  share_text: product.title | escape, 
  share_url: share_url
%}

ブログ記事の場合

{% assign share_url = shop.url | append: article.url %}
{% render 'sns-share' | 
  share_text: article.title | escape, 
  share_url: share_url
%}

ページの場合

  {% assign share_url = shop.url | append: page.url %}
  {% render 'sns-share' | 
    share_text: page.title | escape, 
    share_url: share_url
  %}

DawnのデフォルトシェアボタンはWeb Share APIを利用しており、未対応デバイス（PC等）だとURLコピーだけになるので、各種サービスのシェアボタンを追加する方が親切かも。