Answer: How can I differentiate Online products vs “Offline” products on a website?
There would be a number of options you could consider, and I think the best answer will depend on the flow of your site.
Option 1, your idea for having two tabs is not a bad one. Calling one 'In Store' and the other 'Buy Online' (or whatever combination of words work for you) will clearly indicate to the user the buying experience. With this option, I'd make sure to add some clear text at the top of each page to further clarify how purchasing is to be done.
Option 2, if you really wanted them all to be in the same location, you could add some visual elements to clearly show which are available online or not. I did up a quick example here:
Where each of these tags could be attached to the top right of the product to help visually indicated where the user can purchase the product. You may want to further add a filter to the page so they can only see products available online or not, and as well make sure the products are clearly labeled on the detail page.
Option 3, you could also order products on your page based on availability. For example, in the left column are products available online, in the right column products available in store only, both clearly marked.
Just a couple options you could consider, hopefully one of these or a combination will help.
Remember to have direction, a map, or a link to a Store Finder page for the products that are only available online. Want to make sure you facilitate their urge to buy if they like what they see.
Want more tips like this?
Get them, resources, and more delivered to your inbox: