Riseの既存SOLD OUTラベルではなく、添付のように画像がグレーアウトになるようにしたい。
また、SALEとNEWのラベルを添付のような黒縁の四角・白背景にしたい。
コード編集初心者なので、分かりやすく教えていただけますと幸いです。
現在のバージョン：Rise 15.4.0
AI-generated summary
Rise 15.4.0で、在庫切れ時の既存「SOLD OUT」ラベル表示をやめ、商品画像自体をグレーアウト表示にしたいという相談。あわせて、SALE と NEW のラベルを「黒枠・白背景・角丸なし」の見た目に変更したいという要望で、添付画像がデザイン意図の理解に重要です。
提示された対応案は次の2点です。
- CSS追加：
base.cssまたはtheme.cssの末尾に、在庫切れ商品の画像へgrayscale(100%)とopacity: 0.5を適用するコードを追加。 - Liquid修正：
card-product.liquidなどのdiv class="card-wrapper"に、在庫切れ時だけcard--sold-outクラスを付与する条件分岐を追加。
ラベル側は、.badge / .product-badge に対して白背景・黒文字・黒枠・角丸なしのCSSを追加し、必要ならモバイル用の文字サイズ調整も案内されています。
当初はストアURLの共有依頼がありましたが、サイトリニューアル中のため未共有。現時点では一般的な実装方法の提示までで、実機確認や最終的な解決確認はまだ行われていません。
Hello @m4820
Welcome to the Shopify Community! 
Could you please share your store URL so we can take a look?
If your store is password-protected, you can also share the storefront password (not admin access).
This will help us understand the issue better and guide you correctly.
Thanks!
Best regards,
Titu
We apologize, but as this popular brand’s e-commerce site is currently undergoing renewal, we cannot provide the URL or password.
Hi @m4820
Step 1: Add CSS Go to Online Store → Themes → … → Edit code → Assets → base.css (or theme.css)
Paste this at the bottom of the file:
/* SOLD OUT product image - grey effect */
.card--sold-out img,
.product-card--sold-out img {
filter: grayscale(100%);
opacity: 0.5;
}
Step 2: Add SOLD OUT Class (Liquid change)
Open one of these files (Rise usually uses one of them):
-
Snippets →
card-product.liquid -
or Sections →
main-collection-product-grid.liquid
Find this line:
<div class="card-wrapper">
Replace it with:
<div class="card-wrapper {% unless product.available %}card--sold-out{% endunless %}">
Result:
- If the product is out of stock, its image will automatically grey out.
PART 2: SALE & NEW Label Styling (Black Border + White Background)
Step 3: Add CSS for Labels
In the same CSS file, add:
/* SALE & NEW label styling */
.badge,
.product-badge {
background-color: #ffffff !important;
color: #000000 !important;
border: 1.5px solid #000000;
border-radius: 0;
font-weight: 600;
padding: 4px 10px;
text-transform: uppercase;
}
Mobile Optimization (Optional but Recommended)
@media (max-width: 749px) {
.badge,
.product-badge {
font-size: 11px;
padding: 3px 8px;
}
}