特定のページのみヘッダー・フッターを非表示にする方法と左右の余白を0にする方法

日本語 ディスカッション Shopify テーマ
1

お世話になります。

現在、Dawnというテーマを使用し、サイトを作成しています。
Shopifyのページにて縦長の画像主体のLPを作りたいと考えております。

現在、テーマのテンプレートに「page.lp.json」というテンプレートを作成したのですが、以下の2点で躓いている状況です。

１．page.lp.jsonというテンプレートのみヘッダーとフッターを非表示

似た質問を見つけてハンドル名を「lp」にして試してみたのですが、非表示にはなりませんでした。

https://community.shopify.com/post/1340226

２．スマホで見た時に左右に余白ができてしまうのを0にしたい

スマホで見た時は左右の余白を0にしたいと考えております。

またテンプレートは初期の状態で以下のようなコードになっています。

{
  "sections": {
    "main": {
      "type": "main-page",
      "settings": {
        "padding_top": 28,
        "padding_bottom": 28
      }
    }
  },
  "order": [
    "main"
  ]
}

おわかりになる方がいらっしゃいましたら、ご教示いただけますと幸いです。
何卒よろしくお願いいたします。

2

１．page.lp.jsonというテンプレートのみヘッダーとフッターを非表示

参考にされている投稿のやり方でうまくいくかと思います。

しかし、質問者様の状況ですと、

ifの条件に使用する文字列はlpではなく、page.lpになりそうです。

下記のようになります。

{% if template != 'page.lp' %}
    {% section 'header' %}
    {% endif %}

~中略~

    {% if template != 'page.lp' %}
    {% section 'footer' %}
    {% endif %}

２．スマホで見た時に左右に余白ができてしまうのを0にしたい

余白というのは下図の赤枠の部分で合っていますでしょうか？

screenshot_20230130_01.png
screenshot_20230130_01.png750×1334 22.2 KB

合っているようでしたら、

セクション > main-page.liquid

から下記の記述を探していただき、

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

下記のようにされると良さそうです。

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    {% if template == 'page.lp' %}
    padding-right: 0;
    padding-left: 0;
    {% endif %}
  }

しかし、

余白というのが、上図の赤枠の部分であるなら、

その余白は無くさないほうがいいかもしれません。

スマートフォン表示において、

画面の端までコンテンツがあると、

リンクボタンなどのミスクリックなど、

ユーザーが意図しない操作をしてしまう原因になるためです。

なお、

上記いずれのコードも十分な検証はできておりませんので、

あくまで、ご参考まで。

(キュー田辺)

3

ご回答いただきましてありがとうございます。
2つともうまくいきました。

今回は非常に丁寧にご回答いただきありがとうございました。

また機会がございましたら、よろしくお願いいたします。

1 Like