Riseのテーマでラベルを作成するにはどうすればいいですか。

Ask & Offer
1

Riseの既存SOLD OUTラベルではなく、添付のように画像がグレーアウトになるようにしたい。
また、SALEとNEWのラベルを添付のような黒縁の四角・白背景にしたい。

コード編集初心者なので、分かりやすく教えていただけますと幸いです。

現在のバージョン：Rise 15.4.0

スクリーンショット 2026-01-07 13.45.53
スクリーンショット 2026-01-07 13.45.531384×1100 171 KB

2

Hello @m4820

Welcome to the Shopify Community! :waving_hand:
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

3

We apologize, but as this popular brand’s e-commerce site is currently undergoing renewal, we cannot provide the URL or password.

4

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;
  }
}