Shopify でウェブサイトを制作する時、セクションテンプレートでは画面の表示がある程度固定されています。 セクションでも画像や文字を使いたい場合と必要ない場合、ありませんか?

例えば、下の画像みたいにブログの抜粋を表示したくないけれど、左側の設定画面で非表示にする場所がない、と言ったことです。

image2

今日は、画像や文字を設定画面で表示・非表示する方法を紹介します。

まずは、管理画面に移動します。

現在のテーマの『アクション』をクリックして、『コードを編集する』をクリックします。

image3

コード編集画面が表示されました。

image4

そして、管理画面の左側にある、オンラインストアの目玉みたいなアイコンをクリックします。

image5

製作中のサイトが表示されますので、表示非表示したい場所まで移動します。

Chrome のブラウザ内で右クリックをし、検証をクリックします。

image6

Elements の中で、消したい場所の CSS を探します。

その際、html にカーソルを当てると、カーソルを当てた場所と一致する画面に色が付きます。

image7

今回は、ブログの抜粋を表示非表示にしたいので、<div class="rte article__grid-excerpt">のクラス内rte article__grid-excerptをコピーします。

ちなみにコピーする場合は、クラス内をダブルクリックするとクラス内の範囲が指定できますので、command+c でコピーできます。

image8

コード編集画面まで戻り、コード一覧の中の Sections の『featured-blog.liquid』を選択します。

image9

ちなみに、設定画面を追加・変更できるのは Sections 内のコードです。

Chrome 画面内で検索(command+F)をクリックし、コピーしたクラスをペーストします。

すると、検索に該当する場所のクラスに色が付きました。

image10

このクラスがある div タグ内が、ブログの抜粋箇所になります。

こちらの div タグを{%- if section.settings.show_excerpt -%}{%- endif -%}で囲みます。

image11

コードは、以下の通りです。

{%- if section.settings.show_excerpt -%}
  <div class="rte article__grid-excerpt">
    {% if article.excerpt.size > 0 %}
      {{ article.excerpt }}
    {% else %}
      {{ article.content | strip_html | truncate: 150 }}
    {% endif %}
  </div>
{%- endif -%}

設定画面にブログの抜粋を表示非表示するチェックボックスを作成します。

コード下にある{% schema %}内が設定の内容に当たります。

image12

この中の"settings":[]が設定画面の表示や操作に関わります。

image13

{}の中ならどちらに記述しても構いません。

今回は、blog_show_date の後に、以下のコードを記述します。

{
      "type": "checkbox",
      "id": "show_excerpt",
      "label": "記事を表示",
      "default": true
    },

type は、入力する種類です。 今回はチェックボックスなので、checkbox とします。

id は、<div class="rte article__grid-excerpt">で囲んだ際、{%- if section.settings.show_excerpt -%}の show_excerpt に当たります。 こちらの文字が一致しないと、正常に作動しませんので、ご注意ください。

label は、管理画面で表示する内容です。

default は、何もしていない場合、チェックボックスがオンになっているかオフになっているかを選択しています。 デフォルトでは表示したいので、true にします。 デフォルトで表示したくない場合は、false にします。

image14

画面右にある『保存する』をクリックします。

image15

正常に保存できれば、Asset saved と表示されます。

image16

右上にある、『テーマをカスタマイズする』をクリックします。

image17

カスタマイズする画面に戻りますので、ブログ記事の画面に行きます。

設定画面に、『記事を表示』のチェックボックスができています。

image18

『記事を表示』のチェックを外してみると、記事も消えました。

image19

表示したくない画像や文字があれば、こちらを試してみてください。

ブログ一覧