こんにちは、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行に揃いました。ぜひお試しあれ。

関連記事

  • プロ直伝!靴(革製品)の手入れ方法
    プロ直伝!靴(革製品)の手入れ方法

    革靴は日ごろのケアが大切。定期的にケアすれば、何年あるいは何十年も履くことができます。革靴(革製品)の手入れ方法を学ぶと、バッグや財布など他の革製品もケアできるようになりますよ。どんなふうにケアすればいいか分からないという初心者さんで...

  • 今更聞けない!古着とヴィンテージの違いを軸に、古着の概念を考察してみた。
    今更聞けない!古着とヴィンテージの違いを軸に、古着の概念を考察してみた。

    正直言って私、18歳になるまで古着なんて着たくないと思っていました。だって、どこの誰か知らない人が着た服を着るなんて考えられなかったんです。今から25年以上も前のまだ何も分かっていない年頃の私ですから、古着に価値があるなんて知らなかっ...

  • レインウェアの撥水効果を蘇らせる。ニクワックス(NIKWAX)
    レインウェアの撥水効果を蘇らせる。ニクワックス(NIKWAX)

    ニクワックスとは? ニクワックスは株式会社エバニューという国内メーカーの商品です。肉のワックスではありません(笑普通の洗剤や撥水剤では機能性が損なわれてしまうゴアテックスなどの防水浸透性素材のアウター、防水性のあるウェアやギアの撥水効...

  • 大人女性におすすめな古着の選び方☆
    大人女性におすすめな古着の選び方☆

    最近「古着女子」という言葉が流行るほど、ユーズドとかヴィンテージの洋服に注目が集まってきていますよね。古着が持つ独特のデザインやレトロ感が若い人にうけているみたいです。 ですが、ユーズド品が安っぽく感じたり、大人の自分に似合うものがあ...

  • ファッションもサステイナブルに!40代女子のワードローブは古着やリサイクル品を購入しよう!
    ファッションもサステイナブルに!40代女子のワードローブは古着やリサイクル品を購入しよう!

    最近、古着コーデが流行ってきていますよね。古着の中にはほとんど袖を通していないものがあったりして、状態が良いのにお値段が格安ということが結構あるんですよね。賢く良いものを買いたいと思う40代女子にとって、古着はとても魅力的に映りますよ...

2022年/6月/25日 — Systemstaff

コメントを残す