こんにちは、Furukaitenのシステムスタッフです。
当店の店名「Furukaiten」って読みづらいですかね？
実は由来は「古着を世の中にもっと循環させたい」という想いから⇒「古着を回転」⇒「ふるかいてん」という流れで決まったらしいです。

さて、そんなFurukaitenですが、システムは最近日本国内でも人気が出てきたShopifyを使用しています。
国内のECパッケージとしては、楽天やGMOのMake shop、無料のBASEあたりが有名ですね。それぞれ一長一短あるのですがShopifyはいろんな機能を追加するアプリが豊富なのが特徴です。
とはいえ、まだまだ国内で使用している人が少ないので、問題があってもぐぐって解決できずに結構困ることも多いんですよね。

ということで、システム担当としてはShopifyのTipsやネットショップ運営にまつわるハウツー等を記事にしていくつもりです。

さて第一弾は、商品名が長すぎる場合に「・・・」みたいにして端折ってしまう方法について。です。
こういうのWordpressだとすぐ出てくるんですけどね。

SEO対策のために商品名にいろいろ加えてたら長くなってしまいがちなんですよねー。



「truncatewords」とか「truncate」を使用して商品名が長すぎる場合にだけ自動で文字数制限をかけます。

まず商品一覧を表示しているliquidファイルを探す必要があるので、Google Chromeのデベロッパーツールからレイアウトに使用されている変数を特定します。



デベロッパーツールはブラウザ右上にある丸が3つ縦にならんだメニュー内にあります。そちらクリックして「その他のツール」⇒「デベロッパーツール」を選択します。

続けて、デベロッパーツール内の左上に「ページ内の要素を選択して検査」という矢印メニューを選び商品レイアウトブロックを選択します。


こんな感じで選ぶと、HTMLのソースコード上どのあたりかを指し示してくれます。


テーマによると思うのですが、Furukaitenで使用しているテーマでは商品1tuごとのブロックは「class="product-block"」という名前になっているのが分かりました。
続けて「product-block」を使用しているliquidファイルを特定するためShopify管理画面側へ戻ります。
テーマのコード編集側で特定します。


左上の検索フォームで検索したところあっさり特定できました。product-block.liquidというファイルで一覧の商品ブロックを管理しているようです。
続けて、ソースコード内で「title」と検索します。


Shopifyに慣れないと結構とまどうのですが、liquidファイルを探すときの検索窓と、ソースコード内を探すときの窓は別なんですよね。
ソースコード内を検索するときの検索フォームは「Ctrl+F」や「Command+F」で表示されます。


Furukaitenのテーマでは
<div class="product-block__title">{{ product.title }}</div>
と書かれてました。

この要素に対し


truncatewordsとtruncateというのを追加します。
<div class="product-block__title">{{ product.title | truncatewords:6 |truncate:30 }}</div>
といった書き方です。数字の意味は6単語、30文字まで制限する。といった意味合いです。
以上で保存をすると反映されます。


美しく2行に揃いました。ぜひお試しあれ。