皆様、お力を貸してください。
個別の商品ページの商品タイトル部分で、一部のみテキストサイズを小さくしたいのですが、どうしたらよいでしょうか？
下の写真ですと、120ｍＬの部分のみ小さくしたいと思っています。
よろしくお願いします。
あまりお勧めしませんが、いくつか方法が考えられます。
- 該当文言を出力する箇所を探し、replaceフィルターを使ったHTMLタグを追加する
- 該当文言を出力する箇所を探し、JavaScriptでHTMLタグを追加する
- タイトル自体にHTMLタグを入れる
テーマや該当箇所によって違いはありますが、概ね以下のような形でreplaceフィルターによる置換を行えば動作すると思います。(※説明用にスタイル属性を使っています)
{{ product.title | replace: "120mL", "120mL" }}
ただしこのままでは全商品が対象となるため、特定の商品のみに対して置換を動作させたい場合は追加の対応が必要になります。
タイトルにHTMLタグを入れることに関しては以下のフォーラムを参照ください。懸念事項の確認もできます。
https://community.shopify.com/post/1170575
https://community.shopify.com/post/1464754
また、テーマや箇所によってはeccapeフィルターが設定されHTMLタグが無害化される可能性があるため、この点に関しても対応が必要になる可能性があります。
以上ですがLiquidやHTMLやJavaScriptに関するスキルをお持ちでない場合は、学ばれるか業者に依頼されることをお勧めします。
参考:
https://shopify.dev/api/liquid/filters/string-filters#replace
https://shopify.dev/api/liquid/filters/string-filters#escape