The images are partially local brands that may not look like what you buy for your household.
Hi manunited10,
how do you exactly created the templates? Im running into the following error when Im using your code:
Log Details (ERROR)
Logger: homeassistant.config
Source: config.py:978
First occurred: 1:06:48 PM (4 occurrences)
Last logged: 1:19:06 PM
Invalid config for [template]: [shopping_list_card] is an invalid option for [template]. Check: template->shopping_list_card. (See /config/template.yaml, line 46).
Invalid config for [template]: [shopping_list_category_card] is an invalid option for [template]. Check: template->shopping_list_category_card. (See /config/template.yaml, line 67).
Please take a look at the link below. Basically templates are for avoiding repeating a button-card and reuse them. We put them in a yaml file, and include them in the dashboard.
1 Like
Hi manuited10,
sorry for this really stupid newbie questions, but I really dont understand how to handle this. I followed your link and read the complete article. I understand that im using the managed lovelace ui and I have to add the templates to the raw editor. I added the following complete code into it:
button_card_templates:
header:
styles:
card:
- padding: 5px 15px
- background-color: var(--paper-item-icon-active-color)
name:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
label:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
header_red:
template: header
styles:
card:
- background-color: '#FF0000'
shopping_list_card:
entity: null
variables:
category: Dairy
name: Milk
quantity: ''
unit: ''
show_icon: false
show_name: true
name: '[[[return variables.name]]]'
icon: mdi:cart
aspect_ratio: 4/3
entity_picture: >-
[[[return "/local/images/shopping-list/" +
variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]
show_entity_picture: true
tap_action:
action: call-service
service: shopping_list.add_item
data:
name: >-
[[[return variables.category + " - " + variables.name +
variables.quantity + variables.unit ]]]
shopping_list_category_card:
entity: null
variables:
name: Fruits & Vegetables
show_icon: false
show_name: true
aspect_ratio: 4/3
name: '[[[return variables.name]]]'
icon: mdi:cart
entity_picture: >-
[[[return "/local/images/shopping-list/" +
variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]
show_entity_picture: true
style:
- padding: 0%
styles:
entity_picture:
- width: 60%
I was trying to add this code to the bottom, to the top and between the shopping cart dashboard and the rest. It ends always in “missing template card”:
Do you know what Im doing wrong?
Thanks a lot!
OK no problem at all. You’re on the right track.
First that header: and header_red are some examples that you could get rid of if you are not using them.
Second, you just need to add space (indent) to shopping_list_card: and the other one. So it should look like:
button_card_templates:
shopping_list_card:
entity:
variables:
category: Dairy
name: Milk
quantity: ''
unit: ''
show_icon: false
show_name: true
name: '[[[return variables.name]]]'
icon: mdi:cart
aspect_ratio: 4/3
entity_picture: '[[[return "/local/images/shopping-list/" + variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]'
show_entity_picture: true
tap_action:
action: call-service
service: shopping_list.add_item
data:
name: '[[[return variables.category + " - " + variables.name + variables.quantity + variables.unit ]]]'
# ToDo: above string concatenation needs space in between (if quantity is not '')
shopping_list_category_card:
entity:
variables:
name: Fruits & Vegetables
show_icon: false
show_name: true
aspect_ratio: 4/3
name: '[[[return variables.name]]]'
icon: mdi:cart
entity_picture: '[[[return "/local/images/shopping-list/" + variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]'
show_entity_picture: true
style:
- padding: 0%
styles:
entity_picture:
- width: 60%
This helps alot. Thank you @manunited10 ! Its working perfectly and my wife is also happy . 
We are using home assistant mostly from our mobile phones and therefore I switched the dashboard to a vertical layout card. I used a conditional card to show and hide the items:
Now Im just have to fill all products with pictures
Thanks again!
1 Like
Looks great. I’m happy it worked for you.
Does the automation also work for you?
Next I will do some digging to find a way to tell google assistant and/or alexa to add items to this list. I saw some examples like this and this here and there but not exactly what I wanted.
1 Like
I didn’t tried it yet. Our home assistant is public reachable and we normally open the app to check in the products we had put into the cart. I don’t think we’ll need the automation.
There’s another interesting project from a German dude. He build a custom barcode scanner and used an public available api to scan any product he like and put them to the shopping list. 
3 Likes
Ok, that’s pretty awesome, and a bit of a pain to maintain at first until you eventually add in the few hundred items you would normally purchase. I still think, however, that the biggest weakness of the shopping list is still there though. Once you have everything you want to buy listed, there may be 40+ items which are a pain to keep sorted since they will not autosort, and a pain to track visually since the shopping list has just one single solitary column. It would be better if that shopping list contained multiple columns, namely Qty (0 = checked off), Class (dairy, drinks, flesh, fresh, grain, frozen, etc), Supplier (grocery, costco, walmart, homedepot, pharmacy, etc), product (jarlsberg, pelegrino, etc), Pkg (block, jug, tub, flat, pack, bag, each, jar, can, bottle, kg, etc), detail (“make sure it’s pre-washed”, etc), and link (maybe an url pointer to an image or a specific product).
I looked at grocy for some of this, but grocy is built more like an ERP system. It’s great, but a huge overhead to maintain, i just need a shopping list that isn’t volatile and that doesn’t have a sort button that delete everything that is checked off so i’m left scratching my head on what i had on that list next time i want to replenish my stock.
Your solution is a great way to stabilize the shopping list against the weekly accidental deletion (glad i have backups), but it still presumes you shop at only one store and that you have only a few items at a time that fit on one screen and won’t need some secondary organization. I think the shopping list is useable for other purposes (it’s my to-do list for my server, i wish i could name it that way though) but as a shopping list i’m still waiting for it to evolve a bit.
-z
1 Like
Yeah agreed. The shopping list in home assistant is pretty basic and we can’t have more than one.
Maybe someone gives a bit of attention to it one day and adds more features.
Thank you for sharing this! Got it working quickly and will start to dive into creating categories and assigning pictures. I haven’t got to the automation side of it it but I have already setup the Alexa/todoist integration with shopping list and it all works perfectly together.
1 Like
Did you get it working to add custom items to a list from Google Assistant?
1 Like
Hi manunited10!
Good to know that more people are working on the same project
I also have my improved shopping list. I just want to share it with you, since you may want to get some new funcionalities. I will get your categories section to add products, nice!!
1 Like
No not yet. looks like the new update on home assistant has some good features and added some interesting feature as well as google sync. I’ll look into it.
Great 
I am sorry, I am a newbi here… I try again and again but when I press the category image nothing happens…could some one provide any help ?
Thanks.
Solved!!!
1 Like
The Shopping List feature is the primary reason we have kept Amazon Echos in our home.
With Home Assistant’s “Year of the Voice” is it possible to add items and hear (or view) the list?
———————————-
I would love to have a method of tracking the prices of items, since we shop at four to five stores every other week. A gallon of milk can vary from $3 to $7 depending on the store or sales. Many other items we find ourselves calculating the price per unit in the store while cross referencing others.
It would be amazing to have a shopping list that calculates the price per a unit for an item across stores then display the shopping list with the items grouped by store with details such as brand and quantity. #AskingForTooMuch
After some searching: There is an app called Flipp that apparently does a lot of this…but doesn’t offer a method for adding items via voice.
Hello,
I’ve managed to install the shopping list.
Great job!
1 Like
Hey guys,
Thanks to Home Assistant’s recent updates to the shopping list feature, which now supports multiple to-do lists, I’ve added a couple of to-do lists to my dashboard. I’ll update my original post above in a couple of days.