ホームページ、コレクションページにおける商品タイトルの表示について

日本語 ディスカッション 技術的なQ＆A
1

DAWNテーマを使用していますが、

【ホームページの特集コレクション】、

および【コレクションページ】における

商品一覧の表示について、２つ調整したいです

①商品タイトルのフォントをテーマ設定における最小値（１００％）よりも

さらに小さくしたいです。

②表示される文字数を４０文字までくらいに制限したいです。

どなたか方法をご存じでしたらご教授いただければ幸いです。

2

①商品タイトルのフォントをテーマ設定における最小値（１００％）よりもさらに小さくしたい

管理画面にログインして、「アクション」→「コードの編集」と進み、Assetsフォルダ内のcomponent-card.cssファイルを選択してください。

商品タイトルは.card-information__textというクラス名で管理されているので、任意のfont-sizeを指定すれば文字サイズを変更できます。

②表示される文字数を４０文字までくらいに制限したいです。

管理画面にログインして、「アクション」→「コードの編集」と進み、snippetsフォルダ内のproduct-card.liquidファイルを選択してください。

{{ product_card_product.title | escape }}というコードを見つけて、以下のように変更します。

{{ product_card_product.title | truncate: 40 | escape }}

40という数字を変更すれば、任意の文字数に設定できます。

※コード編集の経験がない場合は、専門の業者に依頼されることをオススメします。

3

②の文字制限は無事に解決しました。

ありがとうございます。

①ですが、該当箇所を見つけました（添付画像）が、どうすれば文字サイズを変更出来ますでしょうか。

追加もしくは変更箇所などいただければ幸いです。

勉強不足で申し訳ございません。

4 
.card-information__text {
  display: block;
  margin: 0;
  padding-right: 1.2rem;
  font-size: 12px;
}

上記のようなイメージで、「font-size: 〇〇px;」を追記すれば反映されると思います。〇〇のところに数字をいろいろ入れてみて、お好みのサイズになるように調整してみてください。

5

ありがとうございます。

こちらで無事に解決しました！

6

お世話になっております。

こちらで教えていただいた文字数制限についてですが、

Vendor部分にも適用することは可能でしょうか？