Riseの既存SOLD OUTラベルではなく、添付のように画像がグレーアウトになるようにしたい。
また、SALEとNEWのラベルを添付のような黒縁の四角・白背景にしたい。
コード編集初心者なので、分かりやすく教えていただけますと幸いです。
現在のバージョン：Rise 15.4.0
Topic summary
Riseテーマでの商品ラベルのカスタマイズ要望。既存の「SOLD OUT」ラベルではなく、在庫切れ時に商品画像をグレーアウト表示にしたい。
- 「SALE」「NEW」ラベルは、黒い縁取りの四角形・白背景のデザインへ変更希望（添付画像の見た目）。
- 投稿者はコード編集初心者のため、分かりやすい手順を希望。テーマバージョンは Rise 15.4.0。
- 参考のスクリーンショットが添付され、デザイン要件の理解に重要。
- 現時点で回答や実装手順は示されておらず、依頼は未解決・継続中。
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;
}
}