【アプリ不要】Shopifyでローディングアニメーション表示する方法

はじめに

Shopifyでローディングアニメーションを表示したい
アプリなしで実装したい
簡単に実装したい

このような方のための記事です。

この記事では、Shopifyでローディングアニメーション機能を作成する方法を解説します。

実装方法

今回は、このようなローディングアニメーションをShopifyで実装していきます。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

1. theme.liquidの編集

「オンラインストア」の「テーマ」から「3点リーダー」を押して、「Edit code」を選択し、コードエディターを開いてください。

次に「layout」ディレクトリの「theme.liquid」を選択してください。

「theme.liquid」を選択する参考画像 — 「theme.liquid」を選択する

ショートカットキーの「com+f」を押して<bodyと検索してください。
※Windowsの場合「ctrl + f」

<body>タグが見つかったら、直下に以下のコードをコピペしてください。

{% comment %} ローディング {% endcomment %}
{%- if settings.show_loading_screen -%}
  {% section 'loading' %}
{%- endif -%}

2. loading.liquidの作成

次に「sections」ディレクトリを選択した状態で、上部の「新規ファイル作成アイコン」を押して、「loading.liquid」を作成してください。

loading.liquidを作成する参考画像 — loading.liquidを作成する

作成した「loading.liquid」に以下のコードをコピペしてください。

{% style %}
  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  .loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #25b09b;
    --_m: conic-gradient(#0000 10%,#000)
    , linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
    display: block !important;
  }
  @keyframes l3 {
    to {
      transform: rotate(1turn)
    }
  }
{% endstyle %}


<div class="loading" id="loading">
  <div class="loader"></div>
</div>


{% javascript %}
  document.addEventListener('DOMContentLoaded', function() {
    const loading = document.getElementById('loading');

// ローディング画面を表示する関数
    function showLoading() {
      loading.style.display = 'flex';
      sessionStorage.setItem("loadingShown", "true");
    }

// ローディング画面を非表示にする関数
    function hideLoading() {
      loading.style.display = 'none';
    }

// if (!sessionStorage.getItem("loadingShown")) {
    showLoading()
    setTimeout(hideLoading, 2000);

  });
{% endjavascript %}

3. settings_schema.jsonの編集

次に「config」ディレクトリの「settings_schema.json」を選択してください。

settings_schema.jsonを選択する参考画像 — settings_schema.jsonを選択

最下部の]の上辺りに以下のコードをコピペしてください。

  {
    "name": "Loading",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_loading_screen",
        "label": "ローディングを表示する",
        "default": true
      },
    ]
  }