販売元の文字数制限について

curry313 · ‎04-01-2022

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

「ホーム」のセクション「特集コレクション」および「コレクションページ」それぞれ一覧で表示される商品の【販売元】部分について、文字数を１０文字程度に変更したいです。

ご存じの方いらっしゃればご教授いただければ幸いです。

株式会社フルバランス · ‎04-01-2022

Liquidで出力する内容に対して文字数の制限を行う場合、truncateフィルターを使用します。

Dawnテーマの一覧部位に表示される商品は、共通して「product-card.liquid」というファイルを参照しています。

販売元の出力はデフォルトの状態なら24行目「product_card_product.vendor」という部分ですので、該当箇所を以下のように変更をしてください。

<div class="caption-with-letter-spacing light">{{ product_card_product.vendor |truncate : 13 }}</div>

上記コードで販売元の名称が10文字以上だった場合、「XXX…」のような形で表示されるようになります。

参考：Shopifyコレクションの商品一覧表示で単語(truncatewords)、文字数(truncate)の制限をかける方法

https://shopify-guide.com/2020/11/24/shopify%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E...

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』株式会社フルバランス

元の投稿で解決策を見る

株式会社フルバランス · ‎04-01-2022

Liquidで出力する内容に対して文字数の制限を行う場合、truncateフィルターを使用します。

Dawnテーマの一覧部位に表示される商品は、共通して「product-card.liquid」というファイルを参照しています。

販売元の出力はデフォルトの状態なら24行目「product_card_product.vendor」という部分ですので、該当箇所を以下のように変更をしてください。

<div class="caption-with-letter-spacing light">{{ product_card_product.vendor |truncate : 13 }}</div>

上記コードで販売元の名称が10文字以上だった場合、「XXX…」のような形で表示されるようになります。

参考：Shopifyコレクションの商品一覧表示で単語(truncatewords)、文字数(truncate)の制限をかける方法

https://shopify-guide.com/2020/11/24/shopify%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E...

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』株式会社フルバランス

curry313 · ‎04-11-2022

ありがとうございます！解説の通りでうまく行きました！！

販売元の文字数制限について

販売元の文字数制限について

コミュニティ・ブログ記事