This is a quite common pattern. The basic idea is:
- you have a main action (shopping) that has sub-actions
- action has a boolean status (active/inactive) as the result of such sub-actions
- you need to notify the user that something has changed as a result of performing a sub-action of such action
With this in mind, we can easily define a visualization
See the image below:
The first two are based on the old iOS interaction guidelines for quicker visual understanding (they have changed now to full icons with color, but for explanation sake I think is easier with line/filled):
- line icon (default)
- filled icon (active)
So, as long as we keep icons consistent, users may find relatively easy to notice that something has changed.
However, it's not enough. It's better to add some context as you already did in your mockup, do we'll add the number of elements that have changed.
From here, I think we are covered on the notification part. Now... do we use this on the top bar, the tab bar or a combination of both? This is something you should decide based on testing. But for reference:
- if you want to go the "tab bar only route", you could use the approach I'm showing in the image.
- else, you should use 2 DIFFERENT ICONS, and notification should probably be on top (again, test)
- in this case, whether you use a bag or cart or tag or whatever icon should be based on... yeah you got it: testing!
- an alternative option could be to move everything shopping (including wishlist inside shopping) to the top and have a dedicated CTA on the top bar, but this will require some re-architecture, so just mentioning it here