Ride Theme - Featured Collection showing placeholder items for sold-out collections

[Geiger]

DISCLAIMER: My storefront is 18+/NSFW (fantasy adult toys). Please be aware before clicking any links. I don’t want anyone to see something they don’t want to see!

Shop link: Rooter – TWH (the-wicked-hunt.com)

Shop theme: Ride

I’m having trouble with the Featured Collection widget displaying “Example product title $19.99” when a collection is sold out:

I have these widgets on my “Bestiary” (About) pages, which describe the characteristics of the product; customers get the details, then are guided by the widget to currently available stock in the related collection.

Because all of my products are one-of-a-kind and sell out with some regularity, I often have collections that are empty. This is fine on the Collection page, where a message lets people know that there are no products available:

But when it’s a Featured Collection widget, it just has those unprofessional-looking placeholders. They don’t even link to the collection page. I’d like to get rid of the “Example product title” placeholders.

I’m open to various solutions here, if any are viable:

Widget automatically hidden when collection is empty

Widget displays the same “no products found” message shown on collections page

Widget displays a custom “Out of Stock” message

etc.

Is there anything I can do to get rid of these placeholders when product is sold out?

[LuffyOnePiece]

Hi @Geiger ,

We can hide the Widget automatically when the collection is empty.

Another alternative will be showing the out of stock message.

We need to custom code for that.

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[zack_dev]

sorry placed at wrong place ..

[zack_dev]

placed wrong place comment sorry …

[tim_1]

Yes, you can actually do this without code editing.

In your “Custom CSS” setting of this section add the following code:

.collection:has(.placeholder-svg) {
  display: none;
}

This will hide the entire section if collection is empty.

Other options are also possible, but may require code editing/more complex CSS.

[Geiger]

Perfect, this is exactly what I needed. Thank you!