dawnにて販売ページを作成していますが、売り切れ商品の画像左下に表示される売り切れの記載が小さくかつ色が黒で視認性が悪いです。
大きさと色の変更はどのように行えばよいか教えていただけますでしょうか。
Topic summary
テーマ「Dawn」で商品画像左下の「売り切れ」ラベルが小さく黒で視認性が低いため、サイズと色の変更方法を質問。最新の回答では、テーマのコード編集が必要と説明。
- 手順1: 売り切れラベルのコードに専用クラスを追加。対象はcard-product.liquid内の該当箇所で、約140行目付近にも同様の記述があるため両方に追記。LiquidはShopifyのテンプレートファイル。
- 手順2: CSSでスタイル変更。独自CSS、またはcard-product.liquidを読み込むmain-collection-product-grid.liquidやfeatured-collection.liquid等で読み込み。font-sizeは任意、background-colorとborder-colorは同色推奨。CSSは見た目を制御するスタイル定義。
スクリーンショットが添付され、コード位置の参照に役立つ点が示唆。記載のコードは本文では具体例が抜けているため、実装時は該当箇所の確認が必要。
解決状況: 提案手順が提示されたが、実行・検証結果の報告はなく未確定。今後のアクションはクラス追加とCSS適用。
Tomonyanさま
はじめまして、フルバランスの園畑です。
ご質問を確認いたしました。
売り切れの記載部分をピンポイントで変更できたら嬉しいですよね。。
一例ですが、dawnの場合、売り切れ部分の変更は基本的にコードの修正が必要かと思います。
■手順① - 売り切れ表記のコード部分にクラスを追加
セールの表記と分けるために追加します。
おそらくcard-product.liquidの添付箇所があるかと思いますので、クラスを追記してください。
(140行目あたりにも同様の記述があったため、そちらにも追記しておいた方が良いかと思います。)
■手順② - cssで装飾
以下コードを独自cssファイル、もしくは「card-product.liquid」を読み込むファイル(main-collection-product-grid.liquid、featured-collection.liquid等)に読み込んでください。
※font-sizeは任意の大きさで、background-color、border-colorは同一の色を選択されると良いかと思います。
ご参考になりましたでしょうか。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 園畑
2 Likes