Issue: With two inventory locations (Retail POS and Warehouse/Online), products in stock only at the Retail location appear on the Online Store as “sold out.” The goal is to hide items that are out of stock in the Online Store location without affecting POS. Existing workflows only hide products when total inventory across all locations is zero.
Proposed approaches:
Duplicate products per channel, either managed separately or synced via an app.
Theme customization using a product/variant flag; however, Shopify themes don’t receive per-location inventory, so a flag must be set via automation (e.g., Shopify Flow limits) or an app like Mechanic (pay-what-feels-good) to drive hide/show.
Pure front-end CSS/JS to hide DOM elements with a “sold-out” class (affects only the website, not inventory/POS). OP notes current tagging only triggers when both locations are out; responder clarifies CSS could hide without tags.
Mesa app workflow: choose a location and publication (Online Store); on product update, if that location’s inventory ≤ 0, unpublish from Online Store. Screenshots provided.
Status: No final decision from the OP. Discussion remains open; key trade-off is app-based automation vs. front-end-only hiding. (POS = Point of Sale; DOM = page structure in the browser.)
Hey there folks we recently switched over fully to shopify POS for our in-store operations as we were previously under quickbooks.
We have been using shopify as our webstore for a while now but have encountered an issue now that we have two “locations”
Not all items can be sold online, so we have to have separate stock locations. Plus we do a lot of online sales and don’t want either the retail store or online stealing from the other when stock sells. (hence the two location situation)
The problem we are having is items that are have quantity available in the Retail location are showing up on our store page but as “sold out” which is frankly becoming a mess for browsing.
Is there a way to hide things that are out on the Online store location but still available in the in-store location? I tried some workflows but I don’t think it is helping as it only hides things that are out of stock in both locations. (Truly 0 in the store total)
I would rather not have to get yet another app we have to pay for but if reasonable, that is an option.
A) having duplicate products with completely separate publishing and inventory
B) duplicate products combined with inventory syncing via an app
C) theme customizations for the online-sales channel that use some flag to hide products or their variants. The flag often requiring an app if shopify-flow cannot facilitate that part.
With some variances for which system needs to show/hide/change the display of specific merchandise features. i.e. show in online-store but don’t show in POS, add contact-form for online store shipping but allow purchase for pickup, etc etc
For automations I recommend mechanic because of it’s flexibility though it requires knowledge of liquid to use it’s scripting approach.
Mechanic has pay what feels good pricing if you want it.
Because of that, granular inventory data is not provided to the theme system , any theme customization requires some sort of flag either on the product or the variant itself to indicate status.
If you need this automation or customization created then contact me by email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
I may be able to write up some simple code to hide the sold out products on your site. Thinking about all the ways you could do it otherwise sounds insanely tedious. Usually sold out products have a class appended to it. I can write some code to select that class and hide its parent container. Then I could use a line of javascript to adapt the page so there isn’t some random empty space between the products. If you have the URL for the site I could look at it and can see if this would be straight forward. The hiding the product would be insanely easy, I would just need to look at the structure of some of your pages to see how easy it would be to make the page readjust. If it is responsive it should work well.
Note: This approach would work well because it just effects your DOM ( what you see on your website ) and doesn’t touch anything in your backend (your inventory that other channels use such as your POS system)
Thank you for the offer, However we already have code that adds a hide tag to anything out of stock, but it only appends it if the item is out of stock at both locations (POS and Warehouse). We have not found a way for it to append the tag if there is still inventory at the POS location (we call Retail) but it is sold out at the Warehouse location.
Not sure if we are on the same page but want to make sure. So putting in CSS for example:
.item--sold-out{
display: none;
}
Inside your site (going into your code editor and placing code inside your header) also makes items not display in your POS system? No settings would be touched and no tags would be used it would be strictly just the front end code that effects what is displayed on your site. Just double checking here to make sure we mean the same thing.
It works by allowing you to select a location and a publication name (i.e. Online Store), and then when a product is updated it checks the inventory levels of all the variants for that specific location, and if the total is <= 0, it unpublishes it from the Online Store channel.
