【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.もしテキスト表示のみの簡易な説明欄を残したい場合は、テキストセクションを追加するか、メタフィールドのリッチテキストで追加する
以上!