logo

【Shopify】見出しやタイトルを改行する方法

【Shopify】見出しやタイトルを改行する方法

この記事では、Shopifyのカスタマイズ画面で通常は改行できない(複数行にできない)タイトルを改行する方法についてご紹介していきます。

Shopifyではタイトル箇所が改行しない前提で作られているため、エンターキーなどでは改行ができない仕様になっています。

タイトルの長さによっては改行した方がきれいに見える場合もあるため
ぜひこの記事を読んで試してみてください!

管理画面から改行する方法

  1. 「オンラインストア」から「テーマ」をクリック
  2. 「カスタマイズ」をクリックして編集画面へ移動

タイトルを改行することができました。
ポイントは改行したい箇所に<br>を入れることです。
少し専門的な内容にはなりますが<br>は改行タグと呼ばれるもので、
テキストを改行する時に使用します。

また、この<br>は文字として認識されていないため
Webサイト上には表示されません。

今回はDawnテーマで解説していますが、
テーマによっては<br>を入れても改行できず、文字としてWebサイト上に<br>と表示されるテーマもあるため、もし改行できなければ以降で解説している方法で改行するようにしましょう。

管理画面で改行ができない時の対処

 テーマによっては先述した方法で改行ができない場合があります。
その場合はこちらの方法で改行しましょう。

  1. 「オンラインストア」から「テーマ」をクリック
  2. 「...」をクリック
  3. 「コードを編集」をクリック

 

コードの編集画面に移動しました。
画面右上の「ストアをプレビュー」をクリック

  1. Chromeブラウザで右クリック
  2. 「検証」をクリックするとこのような画面になります。

  1. 改行したいタイトルをクリック
  2. ②で該当箇所のコードが確認できます。
  3. banner__headingをコピー

  1. コード編集画面で「image-banner.liquid」ファイルをクリック
  2. 該当のファイルが表示されます。

  1. 「command +F」で全文検索を表示。
  2. 「banner_heading」を貼り付けで探します。

今回のDawnテーマでは管理画面から改行可能なため確認できませんが、
改行ができないテーマでは「| escape」というコードが記述されています。

この記述が改行できない原因のため削除してあげると、先述したカスタマイズ画面から<br> をつけることで改行できるようになります。

テーマごとに仕様が変わり、改行方法も異なる場合があるため
こちらも自身が使っているテーマを参照するようにお願いいたします。

まとめ

以上が見出し・タイトルを改行する方法になります。
少し専門的な記述が必要になりますがいかがでしたでしょうか?

カスタマイズ画面から<br>が機能するテーマであれば簡単でしたが、機能しないテーマの場合は、コードを編集する必要があります。

この場合はちょっと複雑になりますので、テーマ選定時にはこの辺りも視野に入れると良いかもしれません。

デザイン的にもタイトルは複数行にした方がきれいな見た目になるため、知っておくと役に立つのではないでしょうか。

※この記事は2024年04月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【1ドル×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。