I'm helping redesign a website that has some products that can be purchased online and some which can only be purchased offline in physical stores.

Both the products you can buy and can't buy need to be shown on the site, but how can I present both in a way that's not confusing?

We could have a tab with 'Products' and one with 'Online shop' but I'm not sure this is very clear. Alternatively, we could put the products within the shop and just note that these cannot be brought online but this can cause frustration and is misleading.

  • So what do I do with the "offline"/only in stores products? Can I reserve them online or are they informational only?
    – Ben Brocka
    Apr 14, 2012 at 20:00
  • Thats right they are informational only, we will list the stockists or have a nearest store finder perhaps to tell users where they can buy them products... however, we cannot be sure that the store will have that certain item they are looking for... thanks for commenting!
    – Jade
    Apr 14, 2012 at 20:40
  • 1
    I like the idea of a "Catalog" vs a "Store" but I don't have experience in this area personally.
    – Ben Brocka
    Apr 14, 2012 at 21:54
  • Is this for a retailer or a single manufacturer?
    – Nic
    Apr 15, 2012 at 4:18
  • Various retailers
    – Jade
    Apr 15, 2012 at 17:32

3 Answers 3


It may seem that separating products available for immediate purchase online from the products available only in brick-and-mortar stores makes sense. You may even consider listing all products together and then make the store area separate. The problem with either of these approaches is that you repeat product descriptions and increase the path to the checkout, which will reduce your online sales.

Take a look at what Toshiba is doing on their site:

enter image description here

At the first glance, it seems the content in Research section is focused on showcasing the benefits of Toshiba laptops and is a marketing tool designed to increase the desirability of the product. However, on close inspection you can see that the content is duplicated in Toshiba Direct, the online store: overview pages for Satellite L730 in Research and in the store. Yet, the pointlessness of such a setup is even more obvious when looking at the model listing matrix: in Research calls to action are weaker and are likely to result in fewer conversions than the calls to action in the store. (I just wish I had the actual numbers but given such a separation I don't think Toshiba even tracks performance here.)

Instead, you should have just one list of products that clearly indicates what can be purchased online right away and what can be found only in physical stores. The techniques to accomplish this are plentiful and you can test any of them to see which one fits your layout and pleases your users the most.

In the product list, you can show store exclusivity as simply as indicating the item isn't available for delivery, like Fry's Electronics does:

enter image description here

or if you have the Add to cart button in the product list simply replace it with the button Find a store / In Store Only like Best Buy does:

enter image description here

The same technique will apply to product pages. However, you can go a bit further let visitors search for a local physical store (if available) straight from the product page without additional clicks to reveal it, like Toshiba does in the Research section of their site:

enter image description here


You can also give visitors the option to filter out items based on their availability like the already-mentioned Best Buy does in their left-side filter section:

enter image description here

  • Wow thanks so much for your detailed suggestion! i'll check out those sites now!
    – Jade
    Apr 15, 2012 at 17:38
  • Hello again :) Just to add, there are various retailers that stock their products... also we dont want the user to go through a long process only to find that they cannot buy it online. Would filters work? 'All' 'buy online' 'in store' products? perhaps like eBays 'Auction', 'Buy it now' scenario??
    – Jade
    Apr 18, 2012 at 14:38
  • What do you mean a "long process"? I've told you to mark availability in the product list - that's the fastest way to find out how to buy it. And, yes, you can add filters. See the added screenshot.
    – dnbrv
    Apr 18, 2012 at 15:10
  • For more examples of how filtering can be implemented, see the question Extensive filtering on search results page.
    – dnbrv
    Apr 18, 2012 at 15:15
  • @Jade: Did the updates help you?
    – dnbrv
    Apr 25, 2012 at 3:40

I've seen it before and it were 2 seperate websites. One website was clearly informational. They made the link to the online store stand out by giving it an extra big, red button. It was immediately clear and well designed.

The informational site had a catalogue en when browsing it, you could always see that you could not buy these products online, and they put links to the online store website to make it even more clear.

So suppose you have a menu, you could have your buttons/tabs/whatever be of a certain style and the last button should jump out and be much bigger and a colour that draws attention.

  1. You can add a flag on each item in the thumbnail with two different icons.
  2. You can put a tooltip when hovering the product that show the information.
  3. You can design two different kind of thumbnail, with different colors, adding a little legend about it.
  4. You can separate it in two tabs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.