Hi Ryan,
It sounds like what you’re looking for is a way to:
- Allow users to select one of your store locations.
- After a location is chosen, prevent customers from seeing products with no inventory at the selected location on collection pages.
- Also, prevent customers from adding products with no inventory at the selected location to their cart.
If so, then a solution might be possible. However, it would be complex, and have several moving parts:
1. Allowing users to select one of your store locations
You can probably create a custom Liquid page template, with a list of all your store locations. When the user selects a location, you can store its ID as a cart attribute for later reference.
You might consider also editing the product page template, to disable the add to cart button if the customer hasn’t selected a location.
2. Determine which products are unavailable at the current location.
This would be the hardest part.
The location object in Liquid doesn’t have a way to check inventory levels AFAIK: https://shopify.dev/docs/api/liquid/objects/location
However, the Admin GraphQL API Location object has an inventoryLevel() property you can use to check the inventory level of a specific item at that location: https://shopify.dev/docs/api/admin-graphql/2023-10/objects/Location#field-location-inventorylevel
The hard part would be to communicate between the GraphQL API and your pages. You might need an app (either a custom app or a public app) that gets called in an AJAX request in the next steps.
It’s not as clean as pure Liquid, unfortunately.
3. Prevent customers from seeing unavailable products on collection pages.
If you do an AJAX call as mentioned above, you can then dynamically apply CSS styles to hide unavailable products on the site.
For example, you could use display: none to hide them entirely. Or if that’s too jarring/janky, you can gray out the images for unavailable products, and display a badge/banner saying “Unavailable at this location.”
4. Also, prevent customers from adding unavailable products to their cart.
You would need to edit the product page template to also add an AJAX call. If the product is unavailable at the current location, you can dynamically disable the “Add to cart” button and add a message to it.
If you are on Shopify Plus, then you can go one step further and use the Cart/Checkout Validation Functions API to prevent customers from checking out entirely, if they have an unavailable item in their cart.
If so, then I recommend:
- In step 3 above, add a line item property to each line item in the customer’s cart, containing the selected location’s current inventory level of that product.
- In your cart/checkout validation function, check that every line item has this property, and that its value > 0. If not, reject the cart with an error message.
Let me know if this sounds like it would meet your needs. I’m always looking for opportunities to build new public Shopify apps.
And if you build this functionality in-house, then I hope the information I provided has been useful.