Spice Up Your Rise Theme: Cool Product Labels & Sold Out Effects

Making Your Rise Theme Pop: Custom Labels & Sold Out Styles

Hey everyone! I was browsing the Shopify Community the other day and stumbled upon a great question about customizing the Rise theme. User m4820 wanted to give their store a unique touch by changing the "Sold Out" label and styling the "Sale" and "New" labels. It's a common desire, right? We all want our stores to stand out!

The original poster, m4820, was looking for a way to make the "Sold Out" products have a greyed-out image effect, instead of just the default label. They also wanted to style the "Sale" and "New" labels with a black border and white background, as shown in this image:

Luckily, another user, devcoders, jumped in with a fantastic solution! It involves a little bit of CSS and some Liquid code tweaking. Don't worry if you're not a coding expert – I'll break it down step by step.

Implementing the "Sold Out" Greyout Effect

First, we'll tackle the "Sold Out" effect. Here's what you need to do:

1. Access your CSS: Go to your Shopify admin, then Online Store → Themes → … → Edit code → Assets → base.css (or theme.css).
2. Add the CSS: Paste the following code 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;
}

1. Modify the Liquid code: Open either Snippets → card-product.liquid or Sections → main-collection-product-grid.liquid. The Rise theme usually uses one of these.
2. Find the target line: Locate this line:

1. Replace the line: Replace it with this:

What this does is add a class called card--sold-out to the product card when the product is out of stock. The CSS we added in step 2 then uses this class to apply the greyed-out effect.

Styling the "Sale" and "New" Labels

Now, let's move on to styling those "Sale" and "New" labels.

1. Add CSS for labels: In the same CSS file (base.css or theme.css), add the following code:

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

This CSS code changes the background color to white, the text color to black, adds a black border, removes the rounded corners, and makes the text uppercase and bold. The !important tags ensure that these styles override any default styles that might be applied to the labels.

Mobile Optimization (Optional)

To make sure the labels look good on smaller screens, you can add this optional CSS code:

@media (max-width: 749px) {
 .badge,
 .product-badge {
 font-size: 11px;
 padding: 3px 8px;
 }
}

This code reduces the font size and padding of the labels on screens smaller than 749 pixels wide.

Remember, always test your changes on a staging or development theme before applying them to your live store. This way, you can make sure everything looks and works as expected without affecting your customers' shopping experience.

And that's it! By following these steps, you can easily customize the "Sold Out" effect and style the "Sale" and "New" labels on your Rise theme. It's amazing what a few lines of code can do to personalize your store and make it more visually appealing! I hope this helps you make your Shopify store even more awesome.