【Shopify】特定のページだけサイドバーをつける | 株式会社エンタースクウェア

テーマによっては、２カラムにしたいと思ってもセクションの移動だけではできない場合があります。

そんな時に、特定のページだけレイアウトを変更する方法です。

Liquidファイルを触るので、HTMLとCSSの知識が必要です。

環境

テーマ：Dawn OS 2.0

コード編集

管理画面 > オンラインストア > 現在のテーマ > アクション > コードを編集

1. サイドバーのスニペットを作る

サイドバーをまとめたスニペットを作ります。

Snippetsディレクトリに入れるのが良いでしょう。

メニューを使うと管理画面で操作ができるのでいいかもしれません。

<div class="side-bar">
 <!--サイドバーに掲載したい内容を記載 -->
</div>

2. サイドバー（2カラム）用の土台を作る

Layoutディレクトリの「theme.liquid」をコピーして、新しいファイルを作ります。

ここでHTMLをサイドバー用のレイアウトに書き換え、1で作成したスペニットを読み込ませます。

{% section 'announcement-bar' %}
{% section 'header' %}

 <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
　<!-- mainの中でカラムを作る--!>

  <!-- 基本的なコンテンツはメインカラムに --!>
  　<div class="main-col">
    {{ content_for_layout }}
    </div>

    <!-- 作成したサイドバースニペットを読み込む --!>
    <div class="side-col">
     {%- render 'side' -%}
　　</div>

 </main>

{% section 'footer' %}

※レイアウトを決めているのはテーマによりますが、はおそらくtheme.liquidのような上の方でコントロールをしていると思います。どこでレイアウトを調整しているかはそれぞれ調べる必要があります。

3. CSSを調整する

AssetsディレクトリにあるCSSを調整して整えます。

4. jsonファイルのlayoutを書き換える

最後に、2で作成した土台を特定のページで読み込みたいと思います。

今回はコレクションページにだけサイドバーを入れてみたいと思います。

Templatesディレクトリのcollection.jsonを開いて、作成したlayout名を入れます。

{
　"layout": "theme-2col.liquid",
  "sections": {
    "banner": {
      "type": "main-collection-banner",
      "settings": {
      }
    },
    "product-grid": {
      "type": "main-collection-product-grid",
      "settings": {
      }
    }
  },
  "order": [
    "banner",
    "product-grid"
  ]
}

jsonファイルでエラーが出る場合は、ほとんど構文エラーです。

カンマが抜けていたり、余分だったりが多い気がします。

これでコレクションページだけ、2カラムにすることができました！