How to hide sold-out product variants in Turbo theme?

Store Design
1

Hiya folx,

we’re trying to figure out how to hide sold-out product variants on our shop. Our particular use case is that we run an annual subscription to our magazine for which our customers can choose which issue to start with - the current one, the next one or the one after that. Whenever we publish a new issue, we “roll” these options forward for one issue.

Example: Our current issue is #5, so the options for people to choose from are a subscription starting with Issue 5, Issue 6 or Issue 7. On Sep 1, we’re launching Issue 6, which is when the option to start the subscription with Issue 5 should disappear, and we add a new option to start with Issue 8.

Our challenge now is that we want to hide the variants (2, one for print, one for digital) that start with Issue 5 without deleting them as we need the customer data to fulfill the subscription. As the product has more than one option, the usual Shopify custom codes aren’t working.

Our shop runs on the Turbo theme. Anyone else out there with any tips or advice?

Thank you!
HL

2

I’ve done this before, I think the way I did it was adding a class each variant, then disabling variants that are not available.

Liquid to check if variant is available:

Then use CSS to gray out the variant and disable it, example:

.variant-options.soldout {
  opacity: .5;
  color: #ccc;
  pointer-events: none;
}

Pretty sure that should work but you’ll want to experiment first on a backup theme to verify with your particular setup. If you get stuck and want professional help contact my team at speedboostr.com/contact. We modify Shopify themes every day.

3

Thank you, Joe! Did you add that code to the product.details template or section?

4

@makingstories I’m not sure which file it was. My standard approach is to start with the top level file (product.template), then read the code and look for the include / render statements to see all the included parts of the file. Then you’ll be able to find the piece of code you’re looking for.