ウェブノウハウ

WEB KNOWHOW

ShopifyをカスタマイズしてオリジナルのECサイトを作る

コレクションセクションの商品名を複数箇所文字列置換する【テーマ:Debut】

ShopifyはLiquidという独自のテンプレート言語を利用してカスタマイズします。
このテーマではそんなLiquidテンプレート言語の基本関数の説明も交えながら、目的別に解決方法を掲載していきたいと思います。
 
第一弾は、【テーマ:Debut】で、トップページにコレクションを掲載する際に表示される

Tシャツ(大人向け)

という商品の商品名を

Tシャツ
(大人向け)

という具合に2行にして、しかも「(大人向け)」はspanタグで囲んでみたいと思います。

snippets/product-card-grid.liquid から

{{ product.title }}

を探して、下のように直します。

{{ product.title | replace: "(", "<br><span>(" | replace: ")", ")</span>" }}

これで

Tシャツ(大人向け)

Tシャツ<br><span>(大人向け)</span>

になります。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!