【Shopify】商品ページの説明欄を1カラムに変更する方法

【Shopify】商品ページの説明欄を1カラムに変更する方法

Shopify(Dawnテーマ)のデフォルトの商品説明欄をPCでも1カラム表示に変更する方法の備忘録。

カスタマイズする商品説明欄の仕様

  • 編集画面からテキスト・画像の追加が可能(デフォルト機能のまま変更なし)
  • PC画面でも1カラム表示
  • タイトルの表示とサイズ調整
  • 上下余白調整可能

経緯:Shopify(Dawnテーマ)デフォルトの商品ページの商品説明欄はPC表示で2カラム表示のため、内容が多いと見にくくなるのと、LP形式で詳細説明のエリアを設けたかったため、カスタマイズで対応を行った。

商品ページの説明欄を1カラムに変更する手順

セクションにliquidファイルを追加

1.Shopifyコード編集 > セクション > 新しいセクションを追加する

2.ファイル名を設定してliquidファイルを作成し、下記コードを追加

<section
  id="MainProduct-{{ section.id }}"
  class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}"
  data-section="{{ section.id }}"
>
  {%- 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;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }
  {%- endstyle -%}

  <div class="page-width">
    {%- if section.settings.title != blank -%}
      <h3 class="title {{ section.settings.heading_size }}">
        {{section.settings.title}}
      </h3>
    {%- endif -%}
    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when 'description' -%}
          {%- if product.description != blank -%}
            <div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
              {{ product.description }}
            </div>
          {%- endif -%}
      {%- endcase -%}
    {%- endfor -%}
    </div>
</section>

{% schema %}
  {
    "name": "1カラム商品説明",
    "settings": [
      {
        "type" : "text",
        "id"  :  "title",
        "label": "セクションタイトル",
        "default": "商品説明"
      },
      {
        "type": "select",
        "id": "heading_size",
        "options": [
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h0",
            "label": "t:sections.all.heading_size.options__3.label"
          }
        ],
        "default": "h1",
        "label": "t:sections.all.heading_size.label"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      }
    ],
    "blocks": [
    {
      "type": "description",
      "name": "t:sections.main-product.blocks.description.name",
      "limit": 1
    }
    ],
    "presets" : [
      {
        "name" : "1カラム商品説明"
      }
    ],
    "enabled_on": {
    "templates": ["product"]
  }
  }
{% endschema %}

参照:Skillhub

https://skillhub.jp/blogs/331

参照:Shopify.dev

https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#enabled_on

テーマにカスタマイズした商品説明欄を追加

1.Shopifyのテーマカスタマイズ画面 > テーマ > デフォルトの商品 > セクションを追加 先ほど追加したセクション(1カラム商品説明)を選択

2.セクションの内容(画像・リンク)を設定

3.商品ページ編集画面で説明欄に入力した内容が表示されていればOK

デフォルトの説明欄の非表示

1カラムの説明欄のみ表示する場合は、デフォルトの説明欄は非表示に変更する。

1.Shopifyのテーマカスタマイズ画面 > テーマ > デフォルトの商品 > 商品情報 > 商品説明 を非表示に変更

2.もしテキスト表示のみの簡易な説明欄を残したい場合は、テキストセクションを追加するか、メタフィールドのリッチテキストで追加する

以上!