Hello fellow shop owners! I'm trying to figure out if there is a way to hide the "Out of Stock" variant in the Buy Button app overlay. You can see it by clicking on the brown Harley boot in my blog article: https://www.shoevariety.com/blogs/news/96325441-review-harley-davidson-vincent-mens-motorcycle-boots
Here's a screen shot:
I did some digging around and found a thread on how to "remove-sold-out" variants by creating a snipped, but it only seems to work on product pages. The Buy Button overlay still shows variatns that are "Out of Stock" which I feel is confusing for customers. Any help would be appreciated.
This is such a great question!
The Buy Buttons work as a cohesive unit wherein the only adjustments that can be made are tied directly to the options available in the creation tool. Everything above the red line that isn't blurred out in this screen shot from my test shop can be edited. Generally, its a better idea to use the creation tool :)
In order for the code for the Buy Button to be usable in environments outside of a Shopify site, editing them beyond those options is currently not possible. Even the most basic CSS edits can prevent the whole button to stop working and leading customers to the checkout.
To have the theme customizations from our Documents and Guides work with your shop, it will need to be using a Shopify theme on a Shopify hosted website. The least expensive option for this is currently $29/month
Hope you find this useful! :) The Guru Team is always available to help if you need information more specific to your shop.