【Shopify TIPS】
商品名の改行位置を画面ごとに最適化する方法
ページのレイアウトの違いもありコレクションページと商品詳細ページでは、商品名の改行位置をそれぞれ指定したいケースがあります。
コレクションページと商品詳細ページで商品名の改行位置をそれぞれメタフィールドで指定できるようにする方法です。
◆実装のメリット
・商品名の視認性が向上
・ページごとのデザインの一貫性を保てる
・商品情報をより見やすく表示できる
◆具体的な手順
①メタフィールドの設定
・コレクションページ用と商品詳細ページ用、それぞれに商品名表示用のメタフィールドを作成。
②テンプレートファイルの編集
・「snippets/card-product.liquid」を編集してコレクションページの表示を設定
・「sections/main-product.liquid」で商品詳細ページの表示を設定
