【Shopify】トップページにアンカーリンクを設置する方法

Shopify（Dawnテーマ）のトップページで、ページ内リンクを設置する方法の備忘録。

ページ内リンクの仕様

• トップページ内のリンクをクリックした際に、ページ内の任意の位置に遷移する

※今回の例は、スライドショーのリンクをクリックした際に、ページ内の「特集コレクション」の位置に遷移させる

経緯：Shopify（Dawnテーマ）デフォルト機能では、アンカーリンクの設定機能が無かったので、コードカスタマイズで対応を行った。

トップページにアンカーリンクを設置する手順

対象のセクションファイルにアンカーリンクを追加

１．Shopifyコード編集 ＞ セクション ＞ 対象のファイルを選択

　　今回の例では「特集コレクション」が対象なので、「featured-collection.liquid」を開く

２．遷移させたい位置に任意のidを追加

　　今回の例では、ファイル内の最初のdiv要素（下記1行目）にid="an-cl"を追加　

<div id="an-cl"
  class="color-{{ section.settings.color_scheme }} isolate gradient"
>

  <div
    class="collection{% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %} section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}"
    id="collection-{{ section.id }}"
    data-id="{{ section.id }}"
  >

CSSにスクロールの挙動を追記

カスタムのcssまたはセクションファイルに以下のスクロールの挙動を追記。

html{
  scroll-behavior: smooth;
}

テーマのトップページにリンクを設置

１．Shopifyのテーマカスタマイズ画面 ＞ テーマ ＞ カスタマイズ＞ リンクを設置したい箇所を選択して、先ほど追加したidを指定（#id名）

今回の例では、スライドショーのリンクに#an-clを設定

※他ページからリンクする際はトップページURLの末尾に#id名を追加

２．リンクをクリックして、指定した箇所に遷移すればOK

以上！